zhangyuheng/blessing-skin-server
1
0
Fork 0
forked from mirror/blessing-skin-server
Code Pull Requests Activity

refactor with const enum

Browse Source
This commit is contained in:
Pig Fang 2020-05-13 18:40:09 +08:00
parent 3e1a10a461
commit 3556f29a24
14 changed files with 90 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
resources/assets/src/scripts/hooks/useTexture.ts
View File

@ -7,7 +7,7 @@ type Response = fetch.ResponseBody<Texture>
export default function useTexture() {
const [tid, setTid] = useState(0)
const [url, setUrl] = useState('')
const [type, setType] = useState<TextureType>('steve')
const [type, setType] = useState(TextureType.Steve)
useEffect(() => {
if (tid <= 0) {

6
resources/assets/src/scripts/types.ts
View File

@ -39,7 +39,11 @@ export type Texture = {
likes: number
}
export type TextureType = 'steve' | 'alex' | 'cape'
export const enum TextureType {
Steve = 'steve',
Alex = 'alex',
Cape = 'cape',
}
export type ClosetItem = Texture & {
pivot: { user_uid: number; texture_tid: number; item_name: string }

3
resources/assets/src/views/admin/PlayersManagement/ModalUpdateTexture.tsx
View File

@ -1,5 +1,6 @@
import React, { useState } from 'react'
import { t } from '@/scripts/i18n'
import { TextureType } from '@/scripts/types'
import Modal from '@/components/Modal'
interface Props {
@ -58,7 +59,7 @@ const ModalUpdateTexture: React.FC<Props> = (props) => {
className="mr-1"
type="radio"
value="cape"
checked={type === 'cape'}
checked={type === TextureType.Cape}
onChange={handleTypeChange}
/>
{t('general.cape')}

31
resources/assets/src/views/skinlib/Show/index.tsx
View File

@ -93,9 +93,9 @@ const Show: React.FC = () => {
input: texture.type,
inputType: 'radios',
choices: [
{ text: 'Steve', value: 'steve' },
{ text: 'Alex', value: 'alex' },
{ text: t('general.cape'), value: 'cape' },
{ text: 'Steve', value: TextureType.Steve },
{ text: 'Alex', value: TextureType.Alex },
{ text: t('general.cape'), value: TextureType.Cape },
],
})
type = value as TextureType
@ -232,7 +232,10 @@ const Show: React.FC = () => {
const linkToUploader = (() => {
const search = new URLSearchParams()
search.append('filter', texture.type === 'cape' ? 'cape' : 'skin')
search.append(
'filter',
texture.type === TextureType.Cape ? TextureType.Cape : 'skin',
)
search.append('uploader', texture.uploader?.toString())
return `${blessing.base_url}/skinlib?${search}`
@ -246,8 +249,12 @@ const Show: React.FC = () => {
{createPortal(
<React.Suspense fallback={<ViewerSkeleton />}>
<Previewer
{...{ [texture.type === 'cape' ? 'cape' : 'skin']: textureUrl }}
isAlex={texture.type === 'alex'}
{...{
[texture.type === TextureType.Cape
? TextureType.Cape
: 'skin']: textureUrl,
}}
isAlex={texture.type === TextureType.Alex}
initPositionZ={60}
>
{currentUid === 0 ? (
@ -284,7 +291,7 @@ const Show: React.FC = () => {
{t('skinlib.addToCloset')}
</button>
)}
{texture.type !== 'cape' && (
{texture.type !== TextureType.Cape && (
<button
className="btn btn-outline-info mr-2"
onClick={handleSetAsAvatar}
@ -343,7 +350,9 @@ const Show: React.FC = () => {
<div className="row my-4">
<div className="col-4">{t('skinlib.show.model')}</div>
<div className="col-7">
{texture.type === 'cape' ? t('general.cape') : texture.type}
{texture.type === TextureType.Cape
? t('general.cape')
: texture.type}
</div>
{canEdit && (
<div className="col-1">
@ -425,7 +434,11 @@ const Show: React.FC = () => {
<ModalApply
show={showModalApply}
canAdd={false}
{...{ [texture.type === 'cape' ? 'cape' : 'skin']: texture.tid }}
{...{
[texture.type === TextureType.Cape
? TextureType.Cape
: 'skin']: texture.tid,
}}
onClose={handleCloseModalApply}
/>
</>

13
resources/assets/src/views/skinlib/SkinLibrary/FilterSelector.tsx
View File

@ -1,5 +1,6 @@
import React from 'react'
import { t } from '@/scripts/i18n'
import { TextureType } from '@/scripts/types'
import Button from './Button'
import { Filter } from './types'
import { humanizeType } from './utils'
@ -13,9 +14,9 @@ const FilterSelector: React.FC<Props> = (props) => {
const { filter, onChange } = props
const handleSkinClick = () => onChange('skin')
const handleSteveClick = () => onChange('steve')
const handleAlexClick = () => onChange('alex')
const handleCapeClick = () => onChange('cape')
const handleSteveClick = () => onChange(TextureType.Steve)
const handleAlexClick = () => onChange(TextureType.Alex)
const handleCapeClick = () => onChange(TextureType.Cape)
return (
<>
@ -36,21 +37,21 @@ const FilterSelector: React.FC<Props> = (props) => {
</Button>
<Button
className="dropdown-item"
active={filter === 'steve'}
active={filter === TextureType.Steve}
onClick={handleSteveClick}
>
Steve
</Button>
<Button
className="dropdown-item"
active={filter === 'alex'}
active={filter === TextureType.Alex}
onClick={handleAlexClick}
>
Alex
</Button>
<Button
className="dropdown-item"
active={filter === 'cape'}
active={filter === TextureType.Cape}
onClick={handleCapeClick}
>
{t('general.cape')}

9
resources/assets/src/views/skinlib/SkinLibrary/index.tsx
View File

@ -4,7 +4,7 @@ import useBlessingExtra from '@/scripts/hooks/useBlessingExtra'
import { t } from '@/scripts/i18n'
import * as fetch from '@/scripts/net'
import { toast } from '@/scripts/notify'
import { Paginator } from '@/scripts/types'
import { Paginator, TextureType } from '@/scripts/types'
import Loading from '@/components/Loading'
import Pagination from '@/components/Pagination'
import addClosetItem from '../Show/addClosetItem'
@ -33,7 +33,12 @@ const SkinLibrary: React.FC = () => {
const filter = search.get('filter') ?? ''
setFilter(
['skin', 'steve', 'alex', 'cape'].includes(filter)
[
'skin',
TextureType.Steve,
TextureType.Alex,
TextureType.Cape,
].includes(filter)
? (filter as Filter)
: 'skin',
)

5
resources/assets/src/views/skinlib/SkinLibrary/utils.ts
View File

@ -1,11 +1,12 @@
import { t } from '@/scripts/i18n'
import { TextureType } from '@/scripts/types'
import { Filter } from './types'
export function humanizeType(type: Filter): string {
switch (type) {
case 'steve':
case TextureType.Steve:
return 'Steve'
case 'alex':
case TextureType.Alex:
return 'Alex'
default:
return t(`general.${type}`)

18
resources/assets/src/views/skinlib/Upload.tsx
View File

@ -15,7 +15,7 @@ const Previewer = React.lazy(() => import('@/components/Viewer'))
const Upload: React.FC = () => {
const [name, setName] = useState('')
const [type, setType] = useState<TextureType>('steve')
const [type, setType] = useState(TextureType.Steve)
const [isPrivate, setIsPrivate] = useState(false)
const [isUploading, setIsUploading] = useState(false)
const [file, setFile] = useState<File | null>(null)
@ -54,8 +54,8 @@ const Upload: React.FC = () => {
}
const texture = URL.createObjectURL(file)
setTexture(texture)
if (type !== 'cape') {
setType((await isAlex(texture)) ? 'alex' : 'steve')
if (type !== TextureType.Cape) {
setType((await isAlex(texture)) ? TextureType.Alex : TextureType.Steve)
}
}
}
@ -136,7 +136,7 @@ const Upload: React.FC = () => {
className="mr-1"
name="type"
value="steve"
checked={type === 'steve'}
checked={type === TextureType.Steve}
onChange={handleTypeChange}
/>
Steve
@ -147,7 +147,7 @@ const Upload: React.FC = () => {
className="mr-1"
name="type"
value="alex"
checked={type === 'alex'}
checked={type === TextureType.Alex}
onChange={handleTypeChange}
/>
Alex
@ -158,7 +158,7 @@ const Upload: React.FC = () => {
className="mr-1"
name="type"
value="cape"
checked={type === 'cape'}
checked={type === TextureType.Cape}
onChange={handleTypeChange}
/>
{t('general.cape')}
@ -228,9 +228,9 @@ const Upload: React.FC = () => {
{ReactDOM.createPortal(
<React.Suspense fallback={<ViewerSkeleton />}>
<Previewer
skin={type !== 'cape' ? texture : undefined}
cape={type === 'cape' ? texture : undefined}
isAlex={type === 'alex'}
skin={type !== TextureType.Cape ? texture : undefined}
cape={type === TextureType.Cape ? texture : undefined}
isAlex={type === TextureType.Alex}
/>
</React.Suspense>,
container,

21
resources/assets/src/views/user/Closet/index.tsx
View File

@ -4,7 +4,12 @@ import debounce from 'lodash.debounce'
import { t } from '@/scripts/i18n'
import * as fetch from '@/scripts/net'
import { showModal, toast } from '@/scripts/notify'
import { ClosetItem as Item, Texture, Paginator } from '@/scripts/types'
import {
ClosetItem as Item,
Texture,
Paginator,
TextureType,
} from '@/scripts/types'
import Loading from '@/components/Loading'
import Pagination from '@/components/Pagination'
import ClosetItem from './ClosetItem'
@ -50,7 +55,7 @@ const Closet: React.FC = () => {
}, [category, query, page])
const switchCategory = () => {
setCategory(category => (category === 'skin' ? 'cape' : 'skin'))
setCategory((category) => (category === 'skin' ? 'cape' : 'skin'))
}
const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
@ -70,7 +75,7 @@ const Closet: React.FC = () => {
}
const handleSelect = (item: Item) => {
if (item.type === 'cape') {
if (item.type === TextureType.Cape) {
setCape(item)
} else {
setSkin(item)
@ -106,7 +111,7 @@ const Closet: React.FC = () => {
)
if (code === 0) {
toast.success(message)
setItems(items => {
setItems((items) => {
items[index] = { ...item, pivot: { ...item.pivot, item_name: name } }
return items.slice()
})
@ -119,7 +124,7 @@ const Closet: React.FC = () => {
const { tid } = item
const ok = await removeClosetItem(tid)
if (ok) {
setItems(items => items.filter(item => item.tid !== tid))
setItems((items) => items.filter((item) => item.tid !== tid))
}
}
@ -151,7 +156,9 @@ const Closet: React.FC = () => {
<li className="nav-item">
<a
href="#"
className={`nav-link ${category === 'cape' ? 'active' : ''}`}
className={`nav-link ${
category === TextureType.Cape ? 'active' : ''
}`}
data-toggle="pill"
role="tab"
onClick={switchCategory}
@ -225,7 +232,7 @@ const Closet: React.FC = () => {
<Previewer
skin={skin?.hash}
cape={cape?.hash}
isAlex={skin?.type === 'alex'}
isAlex={skin?.type === TextureType.Alex}
>
<div className="d-flex justify-content-between">
<button className="btn btn-primary" onClick={applyToPlayer}>

4
resources/assets/src/views/user/Players/index.tsx
View File

@ -4,7 +4,7 @@ import { t } from '@/scripts/i18n'
import * as fetch from '@/scripts/net'
import { showModal, toast } from '@/scripts/notify'
import useTexture from '@/scripts/hooks/useTexture'
import { Player } from '@/scripts/types'
import { Player, TextureType } from '@/scripts/types'
import Loading from '@/components/Loading'
import Row from './Row'
import Previewer from './Previewer'
@ -200,7 +200,7 @@ const Players: React.FC = () => {
<Previewer
skin={skin.url}
cape={cape.url}
isAlex={skin.type === 'alex'}
isAlex={skin.type === TextureType.Alex}
/>
<ModalAddPlayer
show={showModalAddPlayer}

6
resources/assets/tests/views/skinlib/Show.test.tsx
View File

@ -2,7 +2,7 @@ import React from 'react'
import { render, fireEvent, waitFor } from '@testing-library/react'
import { t } from '@/scripts/i18n'
import * as fetch from '@/scripts/net'
import { Texture } from '@/scripts/types'
import { Texture, TextureType } from '@/scripts/types'
import Show, { Badge } from '@/views/skinlib/Show'
jest.mock('@/scripts/net')
@ -10,7 +10,7 @@ jest.mock('@/scripts/net')
const fixtureSkin: Readonly<Texture> = Object.freeze<Texture>({
tid: 1,
name: 'skin',
type: 'steve',
type: TextureType.Steve,
hash: 'abc',
size: 2,
uploader: 1,
@ -22,7 +22,7 @@ const fixtureSkin: Readonly<Texture> = Object.freeze<Texture>({
const fixtureCape: Readonly<Texture> = Object.freeze<Texture>({
tid: 2,
name: 'cape',
type: 'cape',
type: TextureType.Cape,
hash: 'def',
size: 2,
uploader: 1,

3
resources/assets/tests/views/skinlib/SkinLibrary.test.tsx
View File

@ -3,6 +3,7 @@ import { render, fireEvent, waitFor } from '@testing-library/react'
import { createPaginator } from '../../utils'
import { t } from '@/scripts/i18n'
import * as fetch from '@/scripts/net'
import { TextureType } from '@/scripts/types'
import SkinLibrary from '@/views/skinlib/SkinLibrary'
import { LibraryItem } from '@/views/skinlib/SkinLibrary/types'
@ -11,7 +12,7 @@ jest.mock('@/scripts/net')
const fixtureItem: Readonly<LibraryItem> = Object.freeze<LibraryItem>({
tid: 1,
name: 'my skin',
type: 'steve',
type: TextureType.Steve,
uploader: 1,
nickname: 'me',
public: true,

6
resources/assets/tests/views/user/Closet.test.tsx
View File

@ -4,7 +4,7 @@ import { createPaginator } from '../../utils'
import $ from 'jquery'
import { t } from '@/scripts/i18n'
import * as fetch from '@/scripts/net'
import { ClosetItem, Player } from '@/scripts/types'
import { ClosetItem, Player, TextureType } from '@/scripts/types'
import Closet from '@/views/user/Closet'
jest.mock('@/scripts/net')
@ -12,7 +12,7 @@ jest.mock('@/scripts/net')
const fixtureSkin: Readonly<ClosetItem> = Object.freeze<ClosetItem>({
tid: 1,
name: 'skin',
type: 'steve',
type: TextureType.Steve,
hash: 'abc',
size: 2,
uploader: 1,
@ -29,7 +29,7 @@ const fixtureSkin: Readonly<ClosetItem> = Object.freeze<ClosetItem>({
const fixtureCape: Readonly<ClosetItem> = Object.freeze<ClosetItem>({
tid: 2,
name: 'cape',
type: 'cape',
type: TextureType.Cape,
hash: 'def',
size: 2,
uploader: 1,

20
resources/assets/tests/views/user/Players.test.tsx
View File

@ -2,7 +2,7 @@ import React from 'react'
import { render, fireEvent, waitFor } from '@testing-library/react'
import { t } from '@/scripts/i18n'
import * as fetch from '@/scripts/net'
import { Player } from '@/scripts/types'
import { Player, TextureType } from '@/scripts/types'
import Players from '@/views/user/Players'
jest.mock('@/scripts/net')
@ -65,8 +65,8 @@ describe('select player automatically', () => {
it('only one player', async () => {
fetch.get
.mockResolvedValueOnce([fixture])
.mockResolvedValueOnce({ data: { hash: '', type: 'steve' } })
.mockResolvedValueOnce({ data: { hash: '', type: 'cape' } })
.mockResolvedValueOnce({ data: { hash: '', type: TextureType.Steve } })
.mockResolvedValueOnce({ data: { hash: '', type: TextureType.Cape } })
render(<Players />)
await waitFor(() => expect(fetch.get).toBeCalledTimes(1))
@ -96,8 +96,8 @@ describe('2d preview', () => {
it('skin and cape', async () => {
fetch.get
.mockResolvedValueOnce([fixture])
.mockResolvedValueOnce({ data: { hash: 'a', type: 'steve' } })
.mockResolvedValueOnce({ data: { hash: 'b', type: 'cape' } })
.mockResolvedValueOnce({ data: { hash: 'a', type: TextureType.Steve } })
.mockResolvedValueOnce({ data: { hash: 'b', type: TextureType.Cape } })
const { getByAltText, getByText } = render(<Players />)
await waitFor(() => expect(fetch.get).toBeCalledTimes(1))
@ -117,7 +117,7 @@ describe('2d preview', () => {
it('skin only', async () => {
fetch.get
.mockResolvedValueOnce([{ ...fixture, tid_cape: 0 }])
.mockResolvedValueOnce({ data: { hash: 'a', type: 'steve' } })
.mockResolvedValueOnce({ data: { hash: 'a', type: TextureType.Steve } })
const { getByAltText, queryByAltText, getByText, queryByText } = render(
<Players />,
@ -137,7 +137,7 @@ describe('2d preview', () => {
it('cape only', async () => {
fetch.get
.mockResolvedValueOnce([{ ...fixture, tid_skin: 0 }])
.mockResolvedValueOnce({ data: { hash: 'a', type: 'cape' } })
.mockResolvedValueOnce({ data: { hash: 'a', type: TextureType.Cape } })
const { getByAltText, queryByAltText, getByText, queryByText } = render(
<Players />,
@ -265,7 +265,7 @@ describe('edit player name', () => {
fetch.get
.mockResolvedValueOnce([fixture])
.mockResolvedValueOnce({ data: { hash: 'a', type: 'skin' } })
.mockResolvedValueOnce({ data: { hash: 'b', type: 'cape' } })
.mockResolvedValueOnce({ data: { hash: 'b', type: TextureType.Cape } })
})
it('succeeded', async () => {
@ -360,7 +360,7 @@ describe('reset texture', () => {
fetch.get
.mockResolvedValueOnce([fixture])
.mockResolvedValueOnce({ data: { hash: 'a', type: 'skin' } })
.mockResolvedValueOnce({ data: { hash: 'b', type: 'cape' } })
.mockResolvedValueOnce({ data: { hash: 'b', type: TextureType.Cape } })
})
it('clear skin and cape', async () => {
@ -483,7 +483,7 @@ describe('delete player', () => {
fetch.get
.mockResolvedValueOnce([fixture])
.mockResolvedValueOnce({ data: { hash: 'a', type: 'skin' } })
.mockResolvedValueOnce({ data: { hash: 'b', type: 'cape' } })
.mockResolvedValueOnce({ data: { hash: 'b', type: TextureType.Cape } })
})
it('succeeded', async () => {