refactor with const enum

resources/assets/src/scripts/hooks/useTexture.ts

@@ -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) {

resources/assets/src/scripts/types.ts

@@ -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 }

resources/assets/src/views/admin/PlayersManagement/ModalUpdateTexture.tsx

@@ -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')}

resources/assets/src/views/skinlib/Show/index.tsx

@@ -93,9 +93,9 @@ const Show: React.FC = () => {
         input: texture.type,
         inputType: 'radios',
         choices: [
-          { text: 'Steve', value: 'steve' },
+          { text: 'Steve', value: TextureType.Steve },
-          { text: 'Alex', value: 'alex' },
+          { text: 'Alex', value: TextureType.Alex },
-          { text: t('general.cape'), value: 'cape' },
+          { 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}
       />
     </>

resources/assets/src/views/skinlib/SkinLibrary/FilterSelector.tsx

@@ -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 handleSteveClick = () => onChange(TextureType.Steve)
-  const handleAlexClick = () => onChange('alex')
+  const handleAlexClick = () => onChange(TextureType.Alex)
-  const handleCapeClick = () => onChange('cape')
+  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')}

resources/assets/src/views/skinlib/SkinLibrary/index.tsx

@@ -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',
       )

resources/assets/src/views/skinlib/SkinLibrary/utils.ts

@@ -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}`)

resources/assets/src/views/skinlib/Upload.tsx

@@ -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') {
+      if (type !== TextureType.Cape) {
-        setType((await isAlex(texture)) ? 'alex' : 'steve')
+        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}
+            skin={type !== TextureType.Cape ? texture : undefined}
-            cape={type === 'cape' ? texture : undefined}
+            cape={type === TextureType.Cape ? texture : undefined}
-            isAlex={type === 'alex'}
+            isAlex={type === TextureType.Alex}
           />
         </React.Suspense>,
         container,

resources/assets/src/views/user/Closet/index.tsx

@@ -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}>

resources/assets/src/views/user/Players/index.tsx

@@ -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}

resources/assets/tests/views/skinlib/Show.test.tsx

@@ -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,

resources/assets/tests/views/skinlib/SkinLibrary.test.tsx

@@ -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,

resources/assets/tests/views/user/Closet.test.tsx

@@ -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,

resources/assets/tests/views/user/Players.test.tsx

@@ -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: TextureType.Steve } })
-      .mockResolvedValueOnce({ data: { hash: '', type: 'cape' } })
+      .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: 'a', type: TextureType.Steve } })
-      .mockResolvedValueOnce({ data: { hash: 'b', type: 'cape' } })
+      .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 () => {