From a8a31dac517a25141cc6f1b802ae26b573dfda04 Mon Sep 17 00:00:00 2001
From: Haoyu Xu <i@halyul.dev>
Date: Thu, 2 Mar 2023 18:42:14 -0500
Subject: [PATCH] perf(directory): home.jsx performance optimization

---
 directory/src/routes/path/home.jsx | 197 +++++++++++++++++------------
 directory/src/routes/root.jsx      |  69 +++++-----
 directory/src/state/appbar.js      |  10 ++
 3 files changed, 168 insertions(+), 108 deletions(-)
 create mode 100644 directory/src/state/appbar.js

diff --git a/directory/src/routes/path/home.jsx b/directory/src/routes/path/home.jsx
index 3296ce7..0a163fe 100644
--- a/directory/src/routes/path/home.jsx
+++ b/directory/src/routes/path/home.jsx
@@ -1,7 +1,8 @@
 import {
   useState,
   useEffect,
-  useCallback
+  useCallback,
+  useMemo
 } from 'react'
 import {
   NavLink,
@@ -13,8 +14,9 @@ import {
   useI18n
 } from '@/state/language'
 import { useHeader } from '@/state/header';
+import { useAppbar } from '@/state/appbar';
 import { useAtom } from 'jotai'
-import { atomWithStorage } from 'jotai/utils';
+import { atom } from 'jotai';
 import CharIcon from '@/component/char_icon';
 import MainBorder from '@/component/main_border';
 import useUmami from '@parcellab/react-use-umami';
@@ -22,7 +24,38 @@ import Switch from '@/component/switch';
 
 const audioEl = new Audio()
 let isPlaying = false
-const voiceOnAtom = atomWithStorage('voiceOn', false)
+let voiceOnState = false
+const voiceOnStateAtom = atom(voiceOnState)
+const voiceOnAtom = atom(
+  (get) => get(voiceOnStateAtom),
+  (get, set, newState) => {
+    voiceOnState = newState
+    set(voiceOnStateAtom, voiceOnState)
+    // you can set as many atoms as you want at the same time
+  }
+)
+
+const playVoice = (link) => {
+  const audioUrl = `/${link}/assets/${JSON.parse(import.meta.env.VITE_VOICE_FOLDERS).main}/${import.meta.env.VITE_APP_VOICE_URL}`
+  if (!voiceOnState || (audioEl.src === (window.location.href.replace(/\/$/g, '') + audioUrl) && isPlaying)) return
+  audioEl.src = audioUrl
+  let startPlayPromise = audioEl.play()
+  if (startPlayPromise !== undefined) {
+    startPlayPromise
+      .then(() => {
+        isPlaying = true
+        const audioEndedFunc = () => {
+          audioEl.removeEventListener('ended', audioEndedFunc)
+          isPlaying = false
+        }
+        audioEl.addEventListener('ended', audioEndedFunc)
+      })
+      .catch((e) => {
+        console.log(e)
+        return
+      })
+  }
+}
 
 export default function Home() {
   const _trackEvt = useUmami('/')
@@ -30,14 +63,10 @@ export default function Home() {
     setTitle,
     setTabs,
     currentTab,
-    setAppbarExtraArea,
     setHeaderIcon
   } = useHeader()
   const { config } = useConfig()
-  const { textDefaultLang, language, alternateLang } = useLanguage()
   const [content, setContent] = useState([])
-  const [voiceOn, setVoiceOn] = useAtom(voiceOnAtom)
-  const { i18n } = useI18n()
 
   useEffect(() => {
     setTitle('dynamic_compile')
@@ -55,47 +84,8 @@ export default function Home() {
     setContent(config?.operators || [])
   }, [config])
 
-  const toggleVoice = useCallback(() => {
-    setVoiceOn(!voiceOn)
-  }, [voiceOn])
-
-  useEffect(() => {
-    setAppbarExtraArea([
-      (
-        <Switch
-          key="voice"
-          text={i18n('voice')}
-          on={voiceOn}
-          handleOnClick={() => toggleVoice()}
-        />
-      )
-    ])
-  }, [voiceOn, language])
-
   const isShown = useCallback((type) => currentTab === 'all' || currentTab === type, [currentTab])
 
-  const playVoice = useCallback((link) => {
-    const audioUrl = `/${link}/assets/${JSON.parse(import.meta.env.VITE_VOICE_FOLDERS).main}/${import.meta.env.VITE_APP_VOICE_URL}`
-    if (!voiceOn || (audioEl.src === (window.location.href.replace(/\/$/g, '') + audioUrl) && isPlaying)) return
-    audioEl.src = audioUrl
-    let startPlayPromise = audioEl.play()
-    if (startPlayPromise !== undefined) {
-      startPlayPromise
-        .then(() => {
-          isPlaying = true
-          const audioEndedFunc = () => {
-            audioEl.removeEventListener('ended', audioEndedFunc)
-            isPlaying = false
-          }
-          audioEl.addEventListener('ended', audioEndedFunc)
-        })
-        .catch((e) => {
-          console.log(e)
-          return
-        })
-    }
-  }, [voiceOn])
-
   return (
     <section className="home">
       {
@@ -106,40 +96,12 @@ export default function Home() {
               <section className="item-group">
                 {v.map(item => {
                   return (
-                    <NavLink
-                      to={`/${item.link}`}
-                      className="item"
+                    <OperatorElement
                       key={item.link}
+                      item={item}
+                      handleOnMouseEnter={playVoice}
                       hidden={!isShown(item.type)}
-                      onMouseEnter={() => playVoice(item.link)}
-                    >
-                      <section className="item-background-filler" />
-                      <section className="item-outline" />
-                      <section className="item-img">
-                        <ImageElement
-                          item={item}
-                          language={language}
-                        />
-                      </section>
-                      <section className="item-info">
-                        <section className="item-title-container">
-                          <section className="item-title">{item.codename[language]}</section>
-                          <section className="item-type">
-                            <CharIcon
-                              type={item.type}
-                              viewBox={
-                                item.type === 'operator' ? '0 0 88.969 71.469' : '0 0 94.563 67.437'
-                              } />
-                          </section>
-                        </section>
-                        <section className="item-text-wrapper">
-                          <span className='item-text'>{item.codename[language.startsWith("en") ? alternateLang : textDefaultLang]}</span>
-                        </section>
-                        <section className="item-info-background" style={{
-                          color: item.color
-                        }} />
-                      </section>
-                    </NavLink>
+                    />
                   )
                 })}
                 <section className='item-group-date'>{v[0].date}</section>
@@ -149,10 +111,87 @@ export default function Home() {
           )
         })
       }
+      <VoiceSwitchElement />
     </section>
   )
 }
 
-function ImageElement({ item, language }) {
+function OperatorElement({ item, hidden }) {
+  const { textDefaultLang, language, alternateLang } = useLanguage()
+
+  return useMemo(() => {
+    return (
+      <NavLink
+        to={`/${item.link}`}
+        className="item"
+        hidden={hidden}
+      >
+        <section
+          onMouseEnter={() => playVoice(item.link)}
+        >
+          <section className="item-background-filler" />
+          <section className="item-outline" />
+          <section className="item-img">
+            <ImageElement
+              item={item}
+            />
+          </section>
+          <section className="item-info">
+            <section className="item-title-container">
+              <section className="item-title">{item.codename[language]}</section>
+              <section className="item-type">
+                <CharIcon
+                  type={item.type}
+                  viewBox={
+                    item.type === 'operator' ? '0 0 88.969 71.469' : '0 0 94.563 67.437'
+                  } />
+              </section>
+            </section>
+            <section className="item-text-wrapper">
+              <span className='item-text'>{item.codename[language.startsWith("en") ? alternateLang : textDefaultLang]}</span>
+            </section>
+            <section className="item-info-background" style={{
+              color: item.color
+            }} />
+          </section>
+        </section>
+      </NavLink>
+    )
+  }, [language, alternateLang, hidden])
+}
+
+function VoiceSwitchElement() {
+  const [voiceOn, setVoiceOn] = useAtom(voiceOnAtom)
+  const {
+    setExtraArea,
+  } = useAppbar()
+  const { i18n } = useI18n()
+
+  const toggleVoice = useCallback(() => {
+    setVoiceOn(!voiceOn)
+  }, [voiceOn])
+
+  const appbarSwitch = useMemo(() => {
+    return [
+      (
+        <Switch
+          key="voice"
+          text={i18n('voice')}
+          on={voiceOn}
+          handleOnClick={() => toggleVoice()}
+        />
+      )
+    ]
+  }, [voiceOn])
+
+  useEffect(() => {
+    setExtraArea(appbarSwitch)
+  }, [voiceOn])
+
+  return null
+}
+
+function ImageElement({ item }) {
+  const { language } = useLanguage()
   return <img src={`/${item.link}/assets/${item.fallback_name.replace("#", "%23")}_portrait.png`} alt={item.codename[language]} />
 }
\ No newline at end of file
diff --git a/directory/src/routes/root.jsx b/directory/src/routes/root.jsx
index 00d8861..e0d09e5 100644
--- a/directory/src/routes/root.jsx
+++ b/directory/src/routes/root.jsx
@@ -14,6 +14,7 @@ import './root.css'
 import routes from '@/routes'
 import { useConfig } from '@/state/config';
 import { useHeader } from '@/state/header';
+import { useAppbar } from '@/state/appbar';
 import {
   useI18n,
   useLanguage,
@@ -32,36 +33,29 @@ export default function Root(props) {
     title,
     tabs,
     currentTab, setCurrentTab,
-    appbarExtraArea,
     headerIcon
   } = useHeader()
+  const {
+    extraArea,
+  } = useAppbar()
   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) => {
-      return (
-        <section
-          key={item.key}
-          className={`main-tab-item ${currentTab === item.key ? 'active' : ''}`}
-          onClick={(e) => {
-            setCurrentTab(item.key)
-            item.onClick && item.onClick(e, currentTab)
-          }}
-          style={item.style}
-        >
-          <section className='main-tab-text-wrapper'>
-            <span className='text'>{i18n(item.key)}</span>
-          </section>
-
-        </section>
-      )
-    }))
-  }
+  const headerTabs = useMemo(() => {
+    return (
+      tabs?.map((item) => {
+        return (
+          <HeaderTabsElement
+            key={item.key}
+            item={item}
+          />
+        )
+      })
+    )
+  }, [tabs])
 
   const toggleDrawer = useCallback((value) => {
     setDrawerHidden(value || !drawerHidden)
@@ -110,10 +104,6 @@ export default function Root(props) {
     setDrawerDestinations(renderDrawerDestinations())
   }, [alternateLang])
 
-  useEffect(() => {
-    renderHeaderTabs(tabs)
-  }, [tabs, currentTab, language])
-
   useEffect(() => {
     if (tabs.length > 0) {
       setCurrentTab(tabs[0].key)
@@ -140,7 +130,7 @@ export default function Root(props) {
           <section className='bar'></section>
         </section>
         <section className='spacer' />
-        {appbarExtraArea}
+        {extraArea}
         <LanguageDropdown />
       </header>
       <nav className={`drawer ${drawerHidden ? '' : 'active'}`}>
@@ -217,8 +207,6 @@ function LanguageDropdown() {
   const { language, setLanguage } = useLanguage()
   const { i18n, i18nValues } = useI18n()
 
-
-
   return (
     <Dropdown
       text={i18n(language)}
@@ -235,6 +223,29 @@ function LanguageDropdown() {
   )
 }
 
+function HeaderTabsElement({ item }) {
+  const {
+    currentTab, setCurrentTab,
+  } = useHeader()
+  const { i18n } = useI18n()
+
+  return (
+    <section
+      className={`main-tab-item ${currentTab === item.key ? 'active' : ''}`}
+      onClick={(e) => {
+        setCurrentTab(item.key)
+        item.onClick && item.onClick(e, currentTab)
+      }}
+      style={item.style}
+    >
+      <section className='main-tab-text-wrapper'>
+        <span className='text'>{i18n(item.key)}</span>
+      </section>
+
+    </section>
+  )
+}
+
 function HeaderReturnButton() {
   const navigate = useNavigate()
 
diff --git a/directory/src/state/appbar.js b/directory/src/state/appbar.js
new file mode 100644
index 0000000..630d390
--- /dev/null
+++ b/directory/src/state/appbar.js
@@ -0,0 +1,10 @@
+import { atom, useAtom } from 'jotai';
+
+const extraAreaAtom = atom([]);
+
+export function useAppbar() {
+    const [extraArea, setExtraArea] = useAtom(extraAreaAtom);
+    return {
+        extraArea, setExtraArea
+    }
+}