feat: remove levels cache and built-in levels

No longer needed as the backend has been stable and fast for a while, and the frontend caching is quite problematic.

Author: guansss

public/levels.json

@@ -6,7 +6,6 @@ import { Effects } from 'components/Effects'
 import { GlobalErrorBoundary } from './components/GlobalErrorBoundary'
 import { FCC } from './types'
 import { request } from './utils/fetcher'
-import { localStorageProvider, swrCacheMiddleware } from './utils/swr-cache'
 
 export const App: FCC = ({ children }) => {
   return (
@@ -15,11 +14,9 @@ export const App: FCC = ({ children }) => {
       <SWRConfig
         value={{
           fetcher: request,
-          provider: localStorageProvider,
           focusThrottleInterval: 1000 * 60,
           errorRetryInterval: 1000 * 3,
           errorRetryCount: 3,
-          use: [swrCacheMiddleware],
         }}
       >
         <GlobalErrorBoundary>

src/App.tsx

@@ -6,7 +6,6 @@ import type { Level } from 'models/operation'
 
 import { withoutUnusedLevels } from '../models/level'
 import { request } from '../utils/fetcher'
-import { useSWRCache } from '../utils/swr-cache'
 
 const ONE_DAY = 1000 * 60 * 60 * 24
 
@@ -20,57 +19,18 @@ export const useLevels = ({ suspense }: { suspense?: boolean } = {}) => {
   const url = '/arknights/level'
   type LevelResponse = Response<Level[]>
 
-  useSWRCache(
-    url,
-    // discard the cache if the level data has no stageId
-    ({ data }) => {
-      const firstLevel = (data as LevelResponse)?.data?.[0]
-      return !!firstLevel && 'stageId' in firstLevel
-    },
-  )
-
-  const response = useSWR<LevelResponse>(url, {
+  return useSWR<LevelResponse>(url, {
     focusThrottleInterval: ONE_DAY,
     dedupingInterval: ONE_DAY,
     suspense,
     fetcher: async (input: string, init?: RequestInit) => {
-      let res: LevelResponse
-
-      try {
-        res = await request<LevelResponse>(input, init)
-      } catch (e) {
-        // fallback to built-in levels while retaining the error
-        res = await requestBuiltInLevels(init)
-        ;(res as any).__serverError = e
-      }
+      const res = await request<LevelResponse>(input, init)
 
       res.data = withoutUnusedLevels(res.data)
 
       return res
     },
   })
-
-  if ((response.data as any)?.__serverError) {
-    return {
-      ...response,
-      error: (response.data as any).__serverError,
-    }
-  }
-
-  return response
-}
-
-const requestBuiltInLevels = async (
-  init?: RequestInit,
-): Promise<Response<Level[]>> => {
-  const res = await fetch('/levels.json', init)
-  const data = await res.json()
-  return {
-    data,
-    statusCode: 200,
-    message: 'OK',
-    traceId: '',
-  }
 }
 
 export const useOperators = () => {

src/apis/arknights.ts

@@ -11,6 +11,7 @@ import ReactDOM from 'react-dom/client'
 import { Route, Routes } from 'react-router-dom'
 
 import { ViewPage } from 'pages/view'
+import { clearOutdatedSwrCache } from 'utils/swr-cache'
 
 import { App } from './App'
 import { AppLayout } from './layouts/AppLayout'
@@ -46,6 +47,8 @@ if (navigator.userAgent.includes('Win')) {
   document.documentElement.classList.add('platform--non-windows')
 }
 
+clearOutdatedSwrCache()
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App>

src/main.tsx

@@ -1,114 +1,7 @@
-import { useEffect, useRef } from 'react'
-import { Middleware, SWRHook, State, useSWRConfig } from 'swr'
-
-type SwrCache = [string, State][]
-
 const STORAGE_KEY = 'copilot-swr'
 
-const cachedKeys = new Set<string>()
-
-// keys that have been validated (even if no validator is provided for it)
-const validatedKeys = new Set<string>()
-
-/**
- * This hook should be used before the corresponding useSWR() call,
- * otherwise SWR will consider the fetched data stale and send a new request.
- *
- * @param key - **the key is not supposed to be dynamic.**
- * @param validate - validates the cached state, if it returns false, the state will be discarded.
- * This function will only run once for each key (because we want it to validate cached data, not fresh data).
- */
-export function useSWRCache(
-  key: string,
-  validate?: (state: State<unknown>) => boolean,
-) {
-  cachedKeys.add(key)
-
-  const { cache, mutate } = useSWRConfig()
-
-  const validated = useRef(false)
-
-  // Only run once. We cannot use useEffect() here because useSWR() fires request synchronously,
-  // if we mutate() the state in useEffect(), SWR will think the fetched data is stale,
-  // discard it, and attempt to fire a new request, which will be blocked if dedupingInterval is set.
-  if (!validated.current) {
-    validated.current = true
-
-    if (!validatedKeys.has(key)) {
-      validatedKeys.add(key)
-
-      if (validate) {
-        const state = cache.get(key)
-
-        if (state) {
-          let isValid: boolean
-
-          try {
-            isValid = validate(state)
-          } catch (e) {
-            isValid = false
-            console.warn(e)
-          }
-
-          if (!isValid) {
-            console.log('[SWR cache]: invalid cache, discarding:', key)
-
-            mutate(key, undefined, { revalidate: false })
-          }
-        }
-      }
-    }
-  }
-}
-
-/**
- * The only thing this middleware does is to borrow the <SWRConfig>'s lifecycle
- * and clear validatedKeys when it unmounts (happens during hot reload).
- * It should be used in the topmost <SWRConfig>.
- */
-export const swrCacheMiddleware: Middleware =
-  (useSWRNext: SWRHook) => (key, fetcher, config) => {
-    useEffect(
-      () => () => {
-        validatedKeys.clear()
-
-        // however, do not clear cachedKeys!!
-        // because this unmount callback also runs before the page unloads,
-        // and if there's no keys, no cache will be persisted.
-      },
-      [],
-    )
-
-    return useSWRNext(key, fetcher, config)
-  }
-
-// https://swr.vercel.app/docs/advanced/cache#localstorage-based-persistent-cache
-export function localStorageProvider() {
-  const map = new Map<string, any>(
-    JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'),
-  )
-
-  window.addEventListener('beforeunload', () => {
-    const cache = Object.fromEntries(
-      JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]') as SwrCache,
-    )
-
-    // overwrite cache with map entries
-    Array.from(map.entries())
-      .filter(
-        ([key, state]) => cachedKeys.has(key) && state.data && !state.error,
-      )
-      .forEach(([key, state]) => (cache[key] = state))
-
-    // remove entries that are no longer needed
-    Object.keys(cache).forEach((key) => {
-      if (!cachedKeys.has(key)) {
-        delete cache[key]
-      }
-    })
-
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(Object.entries(cache)))
-  })
-
-  return map
+// 清理旧版本留下的缓存数据
+// TODO: 等大部分用户都升级到新版本，就删除这个函数，大概在三个月之后？
+export function clearOutdatedSwrCache() {
+  localStorage.removeItem(STORAGE_KEY)
 }