hotfix: query tag in showcase page cause error

packages/web/src/components/card-edit-dialog.tsx

@@ -16,7 +16,7 @@ import AutoCompleteTagInput from '@web-archive/shared/components/auto-complete-t
 import LoadingWrapper from '~/components/loading-wrapper'
 import { getPageDetail, updatePage } from '~/data/page'
 import { getAllFolder } from '~/data/folder'
-import AppContext from '~/store/app'
+import TagContext from '~/store/tag'
 
 interface CardEditDialogProps {
   open: boolean
@@ -67,7 +67,7 @@ function Comp({ open, onOpenChange, pageId }: CardEditDialogProps) {
     },
   )
 
-  const { tagCache, refreshTagCache } = useContext(AppContext)
+  const { tagCache, refreshTagCache } = useContext(TagContext)
   const selectTags = tagCache?.filter(tag => tag.pageIds.includes(pageId))
   const handleTagChange = ({
     bindTags,

packages/web/src/components/edit-tag-dialog.tsx

@@ -6,7 +6,7 @@ import { useRequest } from 'ahooks'
 import { useContext, useEffect, useState } from 'react'
 import toast from 'react-hot-toast'
 import { updateTag } from '~/data/tag'
-import AppContext from '~/store/app'
+import TagContext from '~/store/tag'
 
 interface EditTagProps {
   afterSubmit: () => void
@@ -19,7 +19,7 @@ interface EditTagProps {
 }
 
 function EditTagDialog({ afterSubmit, open, setOpen, editTag }: EditTagProps) {
-  const { tagCache } = useContext(AppContext)
+  const { tagCache } = useContext(TagContext)
   const [tagName, setTagName] = useState(editTag?.name ?? '')
   useEffect(() => {
     setTagName(editTag?.name ?? '')

packages/web/src/components/page-card.tsx

@@ -12,12 +12,12 @@ import ScreenshotView from './screenshot-view'
 import { useNavigate } from '~/router'
 import { updatePageShowcase } from '~/data/page'
 import CardEditDialog from '~/components/card-edit-dialog'
-import AppContext from '~/store/app'
+import TagContext from '~/store/tag'
 
 function Comp({ page, onPageDelete }: { page: Page, onPageDelete?: (page: Page) => void }) {
   const navigate = useNavigate()
 
-  const { tagCache, refreshTagCache } = useContext(AppContext)
+  const { tagCache, refreshTagCache } = useContext(TagContext)
   const bindTags = tagCache?.filter(tag => tag.pageIds.includes(page.id)) ?? []
   const tagBadgeList = bindTags.map((tag) => {
     return (<Badge key={tag.id} variant="outline" className="select-none">{tag.name}</Badge>)

packages/web/src/components/side-bar-tag-menu.tsx

@@ -10,7 +10,7 @@ import { useContext, useState } from 'react'
 import toast from 'react-hot-toast'
 import EditTagDialog from './edit-tag-dialog'
 import { deleteTag } from '~/data/tag'
-import AppContext from '~/store/app'
+import TagContext from '~/store/tag'
 
 interface SidebarTagMenuProps {
   selectedTag: number | null
@@ -59,7 +59,7 @@ function TagBadge({ tag, isSelected, onClick, onDelete, onEdit }: TagBadgeProps)
 }
 
 function SidebarTagMenu({ selectedTag, setSelectedTag }: SidebarTagMenuProps) {
-  const { tagCache: tags, refreshTagCache } = useContext(AppContext)
+  const { tagCache: tags, refreshTagCache } = useContext(TagContext)
   const [isTagsCollapseOpen, setIsTagsCollapseOpen] = useState(false)
 
   const handleClickTag = (tagId: number) => {

packages/web/src/index.tsx

@@ -1,12 +1,11 @@
 import { createRoot } from 'react-dom/client'
 import { RouterProvider } from 'react-router-dom'
 import '@web-archive/shared/global.css'
-import { useLocalStorageState, useRequest } from 'ahooks'
+import { useLocalStorageState } from 'ahooks'
 import { useMemo } from 'react'
 import { ThemeProvider } from '@web-archive/shared/components/theme-provider'
 import AppContext from './store/app'
 import router from './utils/router'
-import { getAllTag } from './data/tag'
 
 function Routes() {
   const [view, setView] = useLocalStorageState('view', {
@@ -15,20 +14,15 @@ function Routes() {
   const [readMode, setReadMode] = useLocalStorageState('readMode', {
     defaultValue: false,
   })
-  const {
-    data: tagCache,
-    runAsync: refreshTagCache,
-  } = useRequest(getAllTag)
+
   return (
     <AppContext.Provider value={
       useMemo(() => ({
         view: view as 'card' | 'list',
         setView,
-        tagCache,
-        refreshTagCache,
         readMode: readMode as boolean,
         setReadMode,
-      }), [view, setView, tagCache, refreshTagCache, readMode, setReadMode])
+      }), [view, setView, readMode, setReadMode])
 }
     >
       <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">

packages/web/src/pages/(layout)/_layout.tsx

@@ -1,9 +1,12 @@
 import { Toaster } from 'react-hot-toast'
 import { Outlet } from 'react-router-dom'
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 import { SidebarProvider } from '@web-archive/shared/components/side-bar'
+import { useRequest } from 'ahooks'
 import SideBar from '~/components/side-bar'
 import Hamburger from '~/components/hamburger'
+import { getAllTag } from '~/data/tag'
+import TagContext from '~/store/tag'
 
 function Layout() {
   const [keyword, setKeyword] = useState('')
@@ -13,31 +16,42 @@ function Layout() {
   const handleSearch = () => {
     setSearchTrigger(prev => !prev)
   }
-
+  const {
+    data: tagCache,
+    runAsync: refreshTagCache,
+  } = useRequest(getAllTag)
   const [selectedTag, setSelectedTag] = useState<number | null>(null)
   const setSelectedTagAndReload = (tag: number | null) => {
     setSelectedTag(tag)
     handleSearch()
   }
   return (
-    <main className="flex min-h-screen">
-      <Toaster
-        position="top-center"
-        reverseOrder={false}
-      />
-      <SidebarProvider>
-        <div className="flex-1 flex">
-          <SideBar
-            selectedTag={selectedTag}
-            setSelectedTag={setSelectedTagAndReload}
-          />
-          <div className="flex-1">
-            <Hamburger className="lg:hidden block fixed top-[50%] left-0 cursor-pointer z-50" />
-            <Outlet context={{ keyword, searchTrigger, handleSearch, setKeyword, selectedTag }} />
+    <TagContext.Provider value={
+      useMemo(() => ({
+        tagCache: tagCache || [],
+        refreshTagCache,
+      }), [tagCache, refreshTagCache])
+    }
+    >
+      <main className="flex min-h-screen">
+        <Toaster
+          position="top-center"
+          reverseOrder={false}
+        />
+        <SidebarProvider>
+          <div className="flex-1 flex">
+            <SideBar
+              selectedTag={selectedTag}
+              setSelectedTag={setSelectedTagAndReload}
+            />
+            <div className="flex-1">
+              <Hamburger className="lg:hidden block fixed top-[50%] left-0 cursor-pointer z-50" />
+              <Outlet context={{ keyword, searchTrigger, handleSearch, setKeyword, selectedTag }} />
+            </div>
           </div>
-        </div>
-      </SidebarProvider>
-    </main>
+        </SidebarProvider>
+      </main>
+    </TagContext.Provider>
   )
 }
 

packages/web/src/store/app.ts

@@ -1,18 +1,13 @@
-import type { Tag } from '@web-archive/shared/types'
 import { createContext } from 'react'
 
 const AppContext = createContext<{
   view: 'card' | 'list'
   setView: (view: 'card' | 'list') => void
-  tagCache?: Array<Tag>
-  refreshTagCache: () => Promise<Array<Tag>>
   readMode: boolean
   setReadMode: (readMode: boolean) => void
 }>({
       view: 'card',
       setView: () => { },
-      tagCache: [],
-      refreshTagCache: async () => { return [] },
       readMode: false,
       setReadMode: (value: boolean) => { },
     })

packages/web/src/store/tag.ts

@@ -0,0 +1,12 @@
+import type { Tag } from '@web-archive/shared/types'
+import { createContext } from 'react'
+
+const TagContext = createContext<{
+  tagCache: Tag[]
+  refreshTagCache: () => Promise<Tag[]>
+}>({
+      tagCache: [],
+      refreshTagCache: async () => [],
+    })
+
+export default TagContext