perf(history): cache history objs to improve performance (#226)

Co-authored-by: Andy Hsu <[email protected]>

src/hooks/usePath.ts

@@ -6,8 +6,9 @@ import {
   State,
   getPagination,
   objStore,
-  recordScroll,
-  recoverScroll,
+  hasHistory,
+  recoverHistory,
+  clearHistory,
   me,
 } from "~/store"
 import {
@@ -71,13 +72,16 @@ let globalPage = 1
 export const getGlobalPage = () => {
   return globalPage
 }
-export const resetGlobalPage = () => {
+export const setGlobalPage = (page: number) => {
   const pagination = getPagination()
-  globalPage = 1
+  globalPage = page
   if (pagination.type === "pagination") {
-    addOrUpdateQuery("page", 1)
+    addOrUpdateQuery("page", page)
   }
-  console.log("resetGlobalPage", globalPage)
+  console.log("setGlobalPage", globalPage)
+}
+export const resetGlobalPage = () => {
+  setGlobalPage(1)
 }
 export const usePath = () => {
   const { pathname, to } = useRouter()
@@ -141,7 +145,9 @@ export const usePath = () => {
     cancelList?.()
     retry_pass = rp ?? false
     handleErr("")
-    if (IsDirRecord[path]) {
+    if (hasHistory(path)) {
+      return recoverHistory(path)
+    } else if (IsDirRecord[path]) {
       return handleFolder(path, globalPage, undefined, undefined, force)
     } else {
       return handleObj(path)
@@ -186,12 +192,12 @@ export const usePath = () => {
     if (size !== undefined && pagination.type === "all") {
       size = undefined
     }
-    globalPage = index ?? 1
     ObjStore.setState(append ? State.FetchingMore : State.FetchingObjs)
     const resp = await getObjs({ path, index, size, force })
     handleRespWithoutNotify(
       resp,
       (data) => {
+        globalPage = index ?? 1
         if (append) {
           appendObjs(data.content)
         } else {
@@ -203,9 +209,6 @@ export const usePath = () => {
         ObjStore.setWrite(data.write)
         ObjStore.setProvider(data.provider)
         ObjStore.setState(State.Folder)
-        if (!(append && (index ?? 1) > 1)) {
-          recoverScroll(path)
-        }
       },
       handleErr,
     )
@@ -239,7 +242,8 @@ export const usePath = () => {
     setPathAs: setPathAs,
     refresh: async (retry_pass?: boolean, force?: boolean) => {
       const path = pathname()
-      recordScroll(path)
+      const scroll = window.scrollY
+      clearHistory(path)
       if (
         pagination.type === "load_more" ||
         pagination.type === "auto_load_more"
@@ -253,7 +257,7 @@ export const usePath = () => {
       } else {
         await handlePathChange(path, retry_pass, force)
       }
-      recoverScroll(path)
+      window.scroll({ top: scroll, behavior: "smooth" })
     },
     pageChange: pageChange,
     loadMore: loadMore,

src/hooks/useRouter.ts

@@ -7,6 +7,7 @@ import {
 } from "@solidjs/router"
 import { createMemo } from "solid-js"
 import { encodePath, joinBase, log, pathDir, pathJoin, trimBase } from "~/utils"
+import { clearHistory } from "~/store"
 
 const useRouter = () => {
   const navigate = useNavigate()
@@ -26,14 +27,14 @@ const useRouter = () => {
         path = joinBase(path)
       }
       log("to:", path)
+      clearHistory(decodeURIComponent(path))
       navigate(path, options)
     },
     replace: (to: string) => {
       navigate(encodePath(pathJoin(pathDir(location.pathname), to), true))
     },
     pushHref: (to: string): string => {
-      const href = encodePath(pathJoin(pathname(), to))
-      return href
+      return encodePath(pathJoin(pathname(), to))
     },
     back: () => {
       navigate(-1)

src/pages/home/Obj.tsx

@@ -1,21 +1,21 @@
 import { Text, useColorModeValue, VStack } from "@hope-ui/solid"
 import {
-  Suspense,
-  Switch,
-  Match,
-  lazy,
   createEffect,
-  on,
   createSignal,
+  lazy,
+  Match,
+  on,
+  Suspense,
+  Switch,
 } from "solid-js"
-import { FullLoading, Error, LinkWithBase } from "~/components"
+import { Error, FullLoading, LinkWithBase } from "~/components"
 import { resetGlobalPage, useObjTitle, usePath, useRouter, useT } from "~/hooks"
 import {
   objStore,
-  recordScroll,
-  /*layout,*/ State,
   password,
+  recordHistory,
   setPassword,
+  /*layout,*/ State,
 } from "~/store"
 
 const Folder = lazy(() => import("./folder/Folder"))
@@ -38,10 +38,10 @@ export const Obj = () => {
     on(pathname, (pathname) => {
       useObjTitle()
       if (!first) {
+        recordHistory(lastPathname)
         resetGlobalPage()
       }
       first = false
-      recordScroll(lastPathname, window.scrollY)
       handlePathChange(pathname)
       lastPathname = pathname
     }),

src/pages/home/Readme.tsx

@@ -2,7 +2,7 @@ import { Box, useColorModeValue } from "@hope-ui/solid"
 import { createMemo, Show, createResource, on } from "solid-js"
 import { Markdown, MaybeLoading } from "~/components"
 import { useLink, useRouter } from "~/hooks"
-import { objStore, recoverScroll, State } from "~/store"
+import { objStore, State } from "~/store"
 import { fetchText } from "~/utils"
 
 export function Readme(props: {
@@ -50,9 +50,6 @@ export function Readme(props: {
     if (/^https?:\/\//g.test(readme)) {
       res = await fetchText(readme)
     }
-    setTimeout(() => {
-      recoverScroll(pathname())
-    })
     return res
   }
   const [content] = createResource(readme, fetchContent)

src/store/history.ts

@@ -0,0 +1,51 @@
+import { ObjStore, objStore, State } from "~/store/obj"
+import { getGlobalPage, setGlobalPage } from "~/hooks"
+
+interface History {
+  obj: object
+  page: number
+  scroll: number
+}
+
+export const HistoryMap = new Map<string, History>()
+
+const waitForNextFrame = () => {
+  return new Promise((resolve) => setTimeout(resolve))
+}
+
+export const recordHistory = (path: string) => {
+  const obj = JSON.parse(JSON.stringify(objStore))
+  if (
+    ![State.FetchingMore, State.Folder, State.File].includes(objStore.state)
+  ) {
+    return
+  }
+  if (objStore.state === State.FetchingMore) {
+    obj.state = State.Folder
+  }
+  const history = {
+    obj,
+    page: getGlobalPage(),
+    scroll: window.scrollY,
+  }
+  HistoryMap.set(path, history)
+}
+
+export const recoverHistory = async (path: string) => {
+  if (!HistoryMap.has(path)) return
+  const history = HistoryMap.get(path)!
+  setGlobalPage(history.page)
+  ObjStore.setState(State.Initial)
+  await waitForNextFrame()
+  ObjStore.set(history.obj)
+  await waitForNextFrame()
+  window.scroll({ top: history.scroll, behavior: "smooth" })
+}
+
+export const hasHistory = (path: string) => {
+  return HistoryMap.has(path)
+}
+
+export const clearHistory = (path: string) => {
+  HistoryMap.delete(path)
+}

src/store/index.ts

@@ -2,4 +2,4 @@ export * from "./obj"
 export * from "./settings"
 export * from "./user"
 export * from "./local_settings"
-export * from "./scroll"
+export * from "./history"

src/store/obj.ts

@@ -60,6 +60,10 @@ const setObjs = (objs: Obj[]) => {
 }
 
 export const ObjStore = {
+  set: (data: object) => {
+    setObjStore(data)
+    setSelectedNum(selectedObjs().length)
+  },
   setObj: (obj: Obj) => {
     setObjStore("obj", obj)
   },