fix: fix typo and remove localstorage event listener for config/shoul…

…d_show_recent
Ray-D-Song · Dec 3, 2024 · 89b8787 · 89b8787
1 parent d69b0f9
commit 89b8787
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 23 deletions.
diff --git a/packages/server/src/api/config.ts b/packages/server/src/api/config.ts
@@ -6,7 +6,7 @@ import result from '~/utils/result'
 
 const app = new Hono<HonoTypeUserInformation>()
 
-app.get('/should_show_rencent', async (c) => {
+app.get('/should_show_recent', async (c) => {
   try {
     const shouldShowRecent = await getShouldShowRecent(c.env.DB)
     return c.json(result.success(shouldShowRecent))
@@ -18,7 +18,7 @@ app.get('/should_show_rencent', async (c) => {
 })
 
 app.post(
-  '/should_show_rencent',
+  '/should_show_recent',
   validator('json', (value, c) => {
     if (typeof value.shouldShowRecent !== 'boolean') {
       return c.json(result.error(400, 'shouldShowRecent is required'))

diff --git a/packages/web/src/components/setting-dialog.tsx b/packages/web/src/components/setting-dialog.tsx
@@ -9,7 +9,7 @@ import { useShouldShowRecent } from '~/hooks/useShouldShowRecent'
 
 function SettingDialog({ open, setOpen }: { open: boolean, setOpen: (open: boolean) => void }) {
   const { theme, setTheme } = useTheme()
-  const { shouldShowRencent, updateShouldShowRecent } = useShouldShowRecent()
+  const { shouldShowRecent, updateShouldShowRecent } = useShouldShowRecent()
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
@@ -39,7 +39,7 @@ function SettingDialog({ open, setOpen }: { open: boolean, setOpen: (open: boole
           <div className="flex items-center space-x-6">
             <Label className="font-bold">Show Recent Save Page: </Label>
             <Switch
-              checked={shouldShowRencent}
+              checked={shouldShowRecent}
               onCheckedChange={updateShouldShowRecent}
             >
             </Switch>

diff --git a/packages/web/src/data/config.ts b/packages/web/src/data/config.ts
@@ -1,13 +1,13 @@
 import fetcher from '~/utils/fetcher'
 
 async function getShouldShowRecent(): Promise<boolean> {
-  return fetcher('/config/should_show_rencent', {
+  return fetcher('/config/should_show_recent', {
     method: 'GET',
   })
 }
 
 async function setShouldShowRecent(shouldShowRecent: boolean) {
-  return fetcher('/config/should_show_rencent', {
+  return fetcher('/config/should_show_recent', {
     method: 'POST',
     body: { shouldShowRecent },
   })

diff --git a/packages/web/src/hooks/useShouldShowRecent.ts b/packages/web/src/hooks/useShouldShowRecent.ts
@@ -1,31 +1,25 @@
-import { useEventListener, useRequest } from 'ahooks'
+import { useRequest } from 'ahooks'
 import toast from 'react-hot-toast'
 import { getShouldShowRecent, setShouldShowRecent } from '~/data/config'
 
 export function useShouldShowRecent() {
-  const { data: shouldShowRencent, mutate } = useRequest(
+  const cachedKey = 'config/should_show_recent'
+  const { data: shouldShowRecent, mutate } = useRequest(
     getShouldShowRecent,
     {
-      cacheKey: 'config/should_show_rencent',
+      cacheKey: cachedKey,
       setCache: (data) => {
         console.log('update cache', data)
-        localStorage.setItem('config/should_show_rencent', JSON.stringify(data))
+        localStorage.setItem(cachedKey, JSON.stringify(data))
       },
       getCache: () => {
-        return JSON.parse(localStorage.getItem('config/should_show_rencent') ?? 'true')
+        return JSON.parse(localStorage.getItem(cachedKey) ?? 'true')
       },
     },
   )
 
-  useEventListener('storage', (e) => {
-    if (e.key === 'config/should_show_rencent') {
-      const newValue = JSON.parse(e.newValue ?? 'true')
-      mutate(newValue)
-    }
-  })
-
   const updateShouldShowRecent = async (newValue: boolean) => {
-    const previousValue = shouldShowRencent
+    const previousValue = shouldShowRecent
     mutate(newValue)
     try {
       await setShouldShowRecent(newValue)
@@ -36,5 +30,5 @@ export function useShouldShowRecent() {
     }
   }
 
-  return { shouldShowRencent, updateShouldShowRecent }
+  return { shouldShowRecent, updateShouldShowRecent }
 }
diff --git a/packages/web/src/pages/(layout)/index.tsx b/packages/web/src/pages/(layout)/index.tsx
@@ -20,13 +20,13 @@ import { useShouldShowRecent } from '~/hooks/useShouldShowRecent'
 function RecentSavePageView() {
   const { data: r2Data, loading: r2Loading } = useRequest(getR2Usage)
 
-  const { shouldShowRencent } = useShouldShowRecent()
+  const { shouldShowRecent } = useShouldShowRecent()
   const [pages, setPages] = useState<Page[]>([])
   useRequest(getRecentSavePage, {
     onSuccess: (data) => {
       setPages(data ?? [])
     },
-    ready: shouldShowRencent,
+    ready: shouldShowRecent,
   })
   const { '2xl': is2xlScreen, xl: isXlScreen, md: isMdScreen } = useMediaQuery()
 
@@ -61,7 +61,7 @@ function RecentSavePageView() {
     <ScrollArea className="p-4 overflow-auto  h-[calc(100vh-58px)]">
       <div className="p-4 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-4">
         {
-          shouldShowRencent
+          shouldShowRecent
             ? reorganizedPages.map((item, idx) => (
               <div key={idx} className="flex flex-col gap-4">
                 {idx === 0 && <PageDataPieCard />}