feat(user): add cache cleanup

GZTimeWalker · Jul 4, 2023 · 05f930b · 05f930b
1 parent eb4ebda
commit 05f930b
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 9 deletions.
diff --git a/src/GZCTF/ClientApp/src/App.tsx b/src/GZCTF/ClientApp/src/App.tsx
@@ -14,7 +14,7 @@ import { useLocalStorage } from '@mantine/hooks'
 import { ModalsProvider } from '@mantine/modals'
 import { Notifications } from '@mantine/notifications'
 import { ThemeOverride } from '@Utils/ThemeOverride'
-import { localStorageProvider, useBanner } from '@Utils/useConfig'
+import { useLocalStorageCache, useBanner } from '@Utils/useConfig'
 import { fetcher } from '@Api'
 
 export const App: FC = () => {
@@ -29,6 +29,8 @@ export const App: FC = () => {
 
   useBanner()
 
+  const { localCacheProvider } = useLocalStorageCache()
+
   return (
     <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
       <MantineProvider withGlobalStyles withCSSVariables theme={{ ...ThemeOverride, colorScheme }}>
@@ -38,7 +40,7 @@ export const App: FC = () => {
           <SWRConfig
             value={{
               refreshInterval: 10000,
-              provider: localStorageProvider,
+              provider: localCacheProvider,
               fetcher,
             }}
           >

diff --git a/src/GZCTF/ClientApp/src/components/AppHeader.tsx b/src/GZCTF/ClientApp/src/components/AppHeader.tsx
@@ -7,9 +7,11 @@ import {
   mdiAccountCircleOutline,
   mdiLogout,
   mdiAccountGroupOutline,
+  mdiCached,
 } from '@mdi/js'
 import { Icon } from '@mdi/react'
 import { useIsMobile } from '@Utils/ThemeOverride'
+import { useLocalStorageCache } from '@Utils/useConfig'
 import { useLoginOut, useUser } from '@Utils/useUser'
 import LogoHeader from './LogoHeader'
 
@@ -31,6 +33,7 @@ const AppHeader: FC = () => {
   const navigate = useNavigate()
 
   const { colorScheme, toggleColorScheme } = useMantineColorScheme()
+  const { clearLocalCache } = useLocalStorageCache()
   const { user, error } = useUser()
 
   const logout = useLoginOut()
@@ -61,6 +64,9 @@ const AppHeader: FC = () => {
                 >
                   用户信息
                 </Menu.Item>
+                <Menu.Item onClick={clearLocalCache} icon={<Icon path={mdiCached} size={1} />}>
+                  清除缓存
+                </Menu.Item>
                 <Menu.Item color="red" onClick={logout} icon={<Icon path={mdiLogout} size={1} />}>
                   登出
                 </Menu.Item>

diff --git a/src/GZCTF/ClientApp/src/components/AppNavbar.tsx b/src/GZCTF/ClientApp/src/components/AppNavbar.tsx
@@ -23,8 +23,10 @@ import {
   mdiLogout,
   mdiWrenchOutline,
   mdiNoteTextOutline,
+  mdiCached,
 } from '@mdi/js'
 import { Icon } from '@mdi/react'
+import { useLocalStorageCache } from '@Utils/useConfig'
 import { useLoginOut, useUser } from '@Utils/useUser'
 import { Role } from '@Api'
 import MainIcon from './icon/MainIcon'
@@ -137,7 +139,7 @@ const AppNavbar: FC = () => {
   const { colorScheme, toggleColorScheme } = useMantineColorScheme()
 
   const logout = useLoginOut()
-
+  const { clearLocalCache } = useLocalStorageCache()
   const { user, error } = useUser()
 
   useEffect(() => {
@@ -214,6 +216,9 @@ const AppNavbar: FC = () => {
                 >
                   用户信息
                 </Menu.Item>
+                <Menu.Item onClick={clearLocalCache} icon={<Icon path={mdiCached} size={1} />}>
+                  清除缓存
+                </Menu.Item>
                 <Menu.Item color="red" onClick={logout} icon={<Icon path={mdiLogout} size={1} />}>
                   登出
                 </Menu.Item>

diff --git a/src/GZCTF/ClientApp/src/utils/useConfig.ts b/src/GZCTF/ClientApp/src/utils/useConfig.ts
@@ -94,14 +94,28 @@ export const useBanner = () => {
   }, [])
 }
 
-export const localStorageProvider = () => {
+export const useLocalStorageCache = () => {
   const cacheKey = 'gzctf-cache'
-  const map = new Map(JSON.parse(LZString.decompress(localStorage.getItem(cacheKey) || '') || '[]'))
 
-  window.addEventListener('beforeunload', () => {
-    const appCache = LZString.compress(JSON.stringify(Array.from(map.entries())))
+  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 clearLocalCache = () => {
+    window.removeEventListener('beforeunload', saveCache)
+    localStorage.removeItem('gzctf-cache')
+    window.location.reload()
+  }
 
-  return map as Cache
+  return { localCacheProvider, clearLocalCache }
 }