fix: local cache

src/GZCTF/ClientApp/src/App.tsx

@@ -15,7 +15,7 @@ import { useRoutes } from 'react-router-dom'
 import { SWRConfig } from 'swr'
 import routes from '~react-pages'
 import { ThemeOverride } from '@Utils/ThemeOverride'
-import { useBanner, useLocalStorageCache } from '@Utils/useConfig'
+import { useBanner, localCacheProvider } from '@Utils/useConfig'
 import { fetcher } from '@Api'
 
 export const App: FC = () => {
@@ -31,7 +31,6 @@ export const App: FC = () => {
   useBanner()
 
   const { t } = useTranslation()
-  const { localCacheProvider } = useLocalStorageCache()
 
   return (
     <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>

src/GZCTF/ClientApp/src/components/AppHeader.tsx

@@ -13,7 +13,7 @@ import { useTranslation } from 'react-i18next'
 import { Link, useLocation, useNavigate } from 'react-router-dom'
 import LogoHeader from '@Components/LogoHeader'
 import { useIsMobile } from '@Utils/ThemeOverride'
-import { useLocalStorageCache } from '@Utils/useConfig'
+import { clearLocalCache } from '@Utils/useConfig'
 import { useLoginOut, useUser } from '@Utils/useUser'
 
 const useHeaderStyles = createStyles((theme) => ({
@@ -34,7 +34,6 @@ const AppHeader: FC = () => {
   const navigate = useNavigate()
 
   const { colorScheme, toggleColorScheme } = useMantineColorScheme()
-  const { clearLocalCache } = useLocalStorageCache()
   const { user, error } = useUser()
 
   const logout = useLoginOut()

src/GZCTF/ClientApp/src/components/AppNavbar.tsx

@@ -30,7 +30,7 @@ import { useTranslation } from 'react-i18next'
 import { Link, useLocation, useNavigate } from 'react-router-dom'
 import MainIcon from '@Components/icon/MainIcon'
 import { LanguageMap, SupportedLanguages, useLanguage } from '@Utils/I18n'
-import { useLocalStorageCache } from '@Utils/useConfig'
+import { clearLocalCache } from '@Utils/useConfig'
 import { useLoginOut, useUser } from '@Utils/useUser'
 import { Role } from '@Api'
 
@@ -123,7 +123,6 @@ const AppNavbar: FC = () => {
   const { colorScheme, toggleColorScheme } = useMantineColorScheme()
 
   const logout = useLoginOut()
-  const { clearLocalCache } = useLocalStorageCache()
   const { user, error } = useUser()
   const { t } = useTranslation()
   const { setLanguage, supportedLanguages } = useLanguage()

src/GZCTF/ClientApp/src/utils/useConfig.ts

@@ -102,28 +102,24 @@ export const useBanner = () => {
   }, [])
 }
 
-export const useLocalStorageCache = () => {
-  const cacheKey = 'gzctf-cache'
-
-  const mapRef = useRef(
-    new Map(JSON.parse(LZString.decompress(localStorage.getItem(cacheKey) || '') || '[]'))
-  )
-
-  const saveCache = () => {
-    const appCache = LZString.compress(JSON.stringify(Array.from(mapRef.current.entries())))
-    localStorage.setItem(cacheKey, appCache)
-  }
-
-  const localCacheProvider = () => {
-    window.addEventListener('beforeunload', saveCache)
-    return mapRef.current as Cache
-  }
+const cacheKey = 'gzctf-cache'
+const cacheMap = new Map(
+  JSON.parse(LZString.decompress(localStorage.getItem(cacheKey) || '') || '[]')
+)
+
+const saveCache = () => {
+  const appCache = LZString.compress(JSON.stringify(Array.from(cacheMap.entries())))
+  localStorage.setItem(cacheKey, appCache)
+}
 
-  const clearLocalCache = () => {
-    window.removeEventListener('beforeunload', saveCache)
-    localStorage.removeItem('gzctf-cache')
-    window.location.reload()
-  }
+export const localCacheProvider = () => {
+  window.addEventListener('beforeunload', saveCache, true)
+  return cacheMap as Cache
+}
 
-  return { localCacheProvider, clearLocalCache }
+export const clearLocalCache = () => {
+  window.removeEventListener('beforeunload', saveCache, true)
+  localStorage.removeItem('gzctf-cache')
+  cacheMap.clear()
+  window.location.reload()
 }