refactor(directory): use constants to adapt github actions

directory/src/routes/Error.jsx

@@ -75,7 +75,7 @@ export default function Error() {
         spinePlayer.animationState.addAnimation(0, "Relax", true, 0);
       }
     }
-  }, [voiceOn])
+  }, [spinePlayer, voiceOn])
 
   useEffect(() => {
     voiceOnRef.current = voiceOn

directory/src/routes/Root.jsx

@@ -11,27 +11,25 @@ import {
   NavLink,
   useNavigate,
   ScrollRestoration,
-  useLocation,
 } from "react-router-dom";
 import classes from '@/scss/root/Root.module.scss'
 import header from '@/scss/root/header.module.scss'
 import footer from '@/scss/root/footer.module.scss'
 import drawer from '@/scss/root/drawer.module.scss'
 import routes from '@/routes'
-import { useConfig } from '@/state/config';
 import { useHeader } from '@/state/header';
 import { useAppbar } from '@/state/appbar';
 import {
   useI18n,
   useLanguage,
 } from '@/state/language'
-import { useBackgrounds } from '@/state/background';
 import Dropdown from '@/component/dropdown';
 import Popup from '@/component/popup';
 import ReturnButton from '@/component/return_button';
 import Border from '@/component/border';
 import CharIcon from '@/component/char_icon';
 import ToTopButton from '@/component/totop_button';
+import VERSION from '#/version.json'
 
 const currentYear = new Date().getFullYear()
 
@@ -46,8 +44,6 @@ export default function Root() {
   const {
     extraArea,
   } = useAppbar()
-  const { fetchConfig, fetchVersion } = useConfig()
-  const { fetchBackgrounds } = useBackgrounds()
 
   const headerTabs = useMemo(() => {
     return (
@@ -74,12 +70,6 @@ export default function Root() {
     }
   }, [setCurrentTab, tabs])
 
-  useEffect(() => {
-    fetchConfig()
-    fetchVersion()
-    fetchBackgrounds()
-  }, [fetchBackgrounds, fetchConfig, fetchVersion])
-
   return (
     <>
       <header className={header.header}>
@@ -141,7 +131,6 @@ export default function Root() {
 
 function FooterElement() {
   const { i18n } = useI18n()
-  const { version } = useConfig()
   const navigate = useNavigate()
 
   return useMemo(() => {
@@ -177,12 +166,12 @@ function FooterElement() {
           <span>Spine Runtimes © 2013 - 2019 Esoteric Software LLC</span>
           <span>Assets © 2017 - {currentYear} Arknights/Hypergryph Co., Ltd</span>
           <span>Source Code © 2021 - {currentYear} Halyul</span>
-          <span>Directory @ {version.directory}</span>
+          <span>Directory @ {VERSION.directory}</span>
-          <span>Showcase @ {version.showcase}</span>
+          <span>Showcase @ {VERSION.showcase}</span>
         </section>
       </footer>
     )
-  }, [i18n, navigate, version.directory, version.showcase])
+  }, [i18n, navigate])
 }
 
 function DrawerDestinations({ toggleDrawer }) {

directory/src/routes/path/Changelogs.jsx

@@ -1,5 +1,4 @@
 import React, {
-  useState,
   useEffect,
   useMemo
 } from 'react'
@@ -8,6 +7,7 @@ import { useHeader } from '@/state/header';
 import { useAppbar } from '@/state/appbar';
 import useUmami from '@/state/insights'
 import Border from '@/component/border';
+import CHANGELOGS from '#/changelogs.json'
 
 export default function Changelogs() {
   // eslint-disable-next-line no-unused-vars
@@ -22,29 +22,25 @@ export default function Changelogs() {
   const {
     setExtraArea,
   } = useAppbar()
-  const [changelogs, setChangelogs] = useState([])
 
   useEffect(() => {
     setTitle('changelogs')
     setExtraArea([])
     setFastNavigation([])
     setHeaderIcon(null)
-    fetch('/_assets/changelogs.json').then(res => res.json()).then(data => {
-      setChangelogs(data)
-    })
   }, [setExtraArea, setFastNavigation, setHeaderIcon, setTitle])
 
   useEffect(() => {
-    setTabs(changelogs.map((item) => {
+    setTabs(CHANGELOGS.map((item) => {
       return {
         key: item[0].key
       }
     }))
-  }, [changelogs, setTabs])
+  }, [setTabs])
 
   const content = useMemo(() => {
     return (
-      changelogs.map((v) => {
+      CHANGELOGS.map((v) => {
         return (
           v.map((item) => {
             return (
@@ -68,7 +64,7 @@ export default function Changelogs() {
         )
       })
     )
-  }, [changelogs, currentTab])
+  }, [currentTab])
 
   return (
     <section>

directory/src/routes/path/Operator.jsx

@@ -17,7 +17,6 @@ import {
 } from '@/state/language'
 import { useHeader } from '@/state/header';
 import { useAppbar } from '@/state/appbar';
-import { useBackgrounds } from '@/state/background';
 import VoiceElement from '@/component/voice';
 import useUmami from '@/state/insights'
 import spine from '!/libs/spine-player'
@@ -26,6 +25,7 @@ import Border from '@/component/border';
 import { useI18n } from '@/state/language';
 import Switch from '@/component/switch';
 import { atom, useAtom } from 'jotai'
+import BACKGROUNDS from '#/backgrounds.json';
 
 const musicMapping = JSON.parse(import.meta.env.VITE_MUSIC_MAPPING)
 const getVoiceFoler = (lang) => {
@@ -34,7 +34,7 @@ const getVoiceFoler = (lang) => {
   return `${folderObject.main}/${voiceFolder.name}`
 }
 const defaultSpineAnimation = 'Idle'
-const backgroundAtom = atom(null)
+const backgroundAtom = atom(BACKGROUNDS[0])
 
 const getPartialName = (type, input) => {
   let part;
@@ -80,7 +80,6 @@ export default function Operator() {
   const { i18n } = useI18n()
   const [spinePlayer, setSpinePlayer] = useState(null)
   const [voiceLang, _setVoiceLang] = useState(null)
-  const { backgrounds } = useBackgrounds()
   const [currentBackground, setCurrentBackground] = useAtom(backgroundAtom)
   const [voiceConfig, setVoiceConfig] = useState(null)
   const [subtitleLang, setSubtitleLang] = useState(null)
@@ -114,10 +113,6 @@ export default function Operator() {
     setFastNavigation([])
   }, [setExtraArea, setFastNavigation])
 
-  useEffect(() => {
-    if (backgrounds.length > 0) setCurrentBackground(backgrounds[0])
-  }, [backgrounds, setCurrentBackground])
-
   useEffect(() => {
     setSpineData(null)
     const config = operators.find((item) => item.link === key)
@@ -374,7 +369,7 @@ export default function Operator() {
       el: <MusicElement />
     }, {
       name: 'backgrounds',
-      options: backgrounds.map((item) => {
+      options: BACKGROUNDS.map((item) => {
         return {
           name: item,
           onClick: () => {

directory/src/state/background.js

@@ -1,19 +0,0 @@
-import { useCallback } from 'react';
-import { atom, useAtom } from 'jotai';
-
-const backgroundsAtom = atom([]);
-
-export function useBackgrounds() {
-  const [backgrounds, setBackgrounds] = useAtom(backgroundsAtom);
-
-  const fetchBackgrounds = useCallback(async () => {
-    const res = await fetch('/_assets/backgrounds.json')
-    const data = await res.json()
-    setBackgrounds(data)
-  }, [setBackgrounds])
-
-  return {
-    backgrounds,
-    fetchBackgrounds
-  };
-}

directory/src/state/config.js

@@ -1,31 +1,14 @@
-import { useCallback } from 'react';
+import CONFIG from '#/directory.json';
-import { atom, useAtom } from 'jotai';
 
-const configAtom = atom([]);
+let operators = []
-const operatorsAtom = atom([]);
+CONFIG.operators.forEach((item) => {
-const versionAtom = atom({});
+  operators = [...operators, ...item]
+});
+const OPERATORS = operators;
 
 export function useConfig() {
-  const [config, setConfig] = useAtom(configAtom);
+  const config = CONFIG;
-  const [version, setVersion] = useAtom(versionAtom);
+  const operators = OPERATORS;
-  const [operators, setOperators] = useAtom(operatorsAtom);
+  
-
+  return { config, operators };
-  const fetchConfig = useCallback(async () => {
-    const res = await fetch('/_assets/directory.json')
-    const data = await res.json()
-    setConfig(data);
-    let operatorsList = []
-    data.operators.forEach((item) => {
-      operatorsList = [...operatorsList, ...item]
-    })
-    setOperators(operatorsList)
-  }, [setConfig, setOperators])
-
-  const fetchVersion = useCallback(async () => {
-    const res = await fetch('/_assets/version.json')
-    const data = await res.json()
-    setVersion(data);
-  }, [setVersion])
-
-  return { config, version, operators, fetchConfig, fetchVersion };
 }