feat(directory): fetch optimization

directory/src/routes/path/operator.css

@@ -215,7 +215,7 @@
   opacity: 0.3;
 }
 
-@media (max-width: 1024px) {
+@media (max-width: 1280px) {
   .operator .spine-container {
     width: 100%;
     position: relative;

directory/src/routes/root.jsx

@@ -18,6 +18,7 @@ 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';
@@ -34,11 +35,12 @@ export default function Root(props) {
     appbarExtraArea,
     headerIcon
   } = useHeader()
-  const { version } = useConfig()
+  const { version, fetchConfig, fetchVersion } = useConfig()
   const [drawerDestinations, setDrawerDestinations] = useState(null)
   const currentYear = useMemo(() => new Date().getFullYear(), [])
   const [headerTabs, setHeaderTabs] = useState(null)
   const { i18n } = useI18n()
+  const { fetchBackgrounds } = useBackgrounds()
 
   const renderHeaderTabs = (tabs) => {
     setHeaderTabs(tabs?.map((item) => {
@@ -120,6 +122,12 @@ export default function Root(props) {
     }
   }, [tabs])
 
+  useEffect(() => {
+    fetchConfig()
+    fetchVersion()
+    fetchBackgrounds()
+  }, [])
+
   return (
     <>
       <header className='header'>
@@ -209,6 +217,8 @@ function LanguageDropdown() {
   const { language, setLanguage } = useLanguage()
   const { i18n, i18nValues } = useI18n()
 
+
+
   return (
     <Dropdown
       text={i18n(language)}

directory/src/state/background.js

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useCallback } from 'react';
 import { atom, useAtom } from 'jotai';
 
 const fetcher = (...args) => fetch(...args).then(res => res.json())
@@ -9,12 +9,17 @@ export function useBackgrounds() {
   const [backgrounds, setBackgrounds] = useAtom(backgroundsAtom);
   const [currentBackground, setCurrentBackground] = useAtom(currentBackgroundAtom)
 
-  useEffect(() => {
-    fetcher('/_assets/backgrounds.json').then(data => {
-      setBackgrounds(data)
-      setCurrentBackground(data[0])
-    })
-  }, []);
+  const fetchBackgrounds = useCallback(async () => {
+    const res = await fetch('/_assets/backgrounds.json')
+    const data = await res.json()
+    setBackgrounds(data)
+    setCurrentBackground(data[0])
+  }, [])
 
-  return { backgrounds, currentBackground, setCurrentBackground };
+  return {
+    backgrounds,
+    currentBackground,
+    setCurrentBackground,
+    fetchBackgrounds
+  };
 }

directory/src/state/config.js

@@ -1,7 +1,6 @@
-import { useEffect } from 'react';
+import { useCallback } from 'react';
 import { atom, useAtom } from 'jotai';
 
-const fetcher = (...args) => fetch(...args).then(res => res.json())
 const configAtom = atom([]);
 const operatorsAtom = atom([]);
 const versionAtom = atom({});
@@ -11,19 +10,22 @@ export function useConfig() {
   const [version, setVersion] = useAtom(versionAtom);
   const [operators, setOperators] = useAtom(operatorsAtom);
 
-  useEffect(() => {
-    fetcher('/_assets/directory.json').then(data => {
-      setConfig(data);
-      let operatorsList = []
-      data.operators.forEach((item) => {
-        operatorsList = [...operatorsList, ...item]
-      })
-      setOperators(operatorsList)
+  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]
     })
-    fetcher('/_assets/version.json').then(data => {
-      setVersion(data);
-    })
-  }, []);
+    setOperators(operatorsList)
+  }, [])
 
-  return { config, version, operators };
+  const fetchVersion = useCallback(async () => {
+    const res = await fetch('/_assets/version.json')
+    const data = await res.json()
+    setVersion(data);
+  }, [])
+
+  return { config, version, operators, fetchConfig, fetchVersion };
 }