fix: reset page if path changed (close AlistGo/alist#1849)

AlistGo · Oct 2, 2022 · 7cd07d6 · 7cd07d6
1 parent d2df199
commit 7cd07d6
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 74 deletions.
diff --git a/src/hooks/usePath.ts b/src/hooks/usePath.ts
@@ -19,14 +19,66 @@ import { useFetch } from "./useFetch"
 import { useRouter } from "./useRouter"
 
 let cancelList: Canceler
+export function addOrUpdateQuery(
+  key: string,
+  value: any,
+  type = "replaceState"
+) {
+  let url = type === "location" ? location.href : location.hash
+
+  if (!url.includes("?")) {
+    url = `${url}?${key}=${value}`
+  } else {
+    if (!url.includes(key)) {
+      url = `${url}&${key}=${value}`
+    } else {
+      const re = `(\\?|&|\#)${key}([^&|^#]*)(&|$|#)`
+      url = url.replace(new RegExp(re), "$1" + key + "=" + value + "$3")
+    }
+  }
+
+  if (type === "location") {
+    location.href = url
+  }
+
+  if (type === "pushState") {
+    history.pushState({}, "", url)
+  }
+
+  if (type === "replaceState") {
+    history.replaceState({}, "", url)
+  }
+}
+function getQueryVariable(name: string): string {
+  var query = window.location.search.substring(1)
+  var vars = query.split("&")
+  for (var i = 0; i < vars.length; i++) {
+    var pair = vars[i].split("=")
+    if (pair[0] == name) {
+      return pair[1]
+    }
+  }
+  return ""
+}
 const IsDirRecord: Record<string, boolean> = {}
 let globalPage = 1
+export const getGlobalPage = () => {
+  return globalPage
+}
+export const resetGlobalPage = () => {
+  const pagination = getPagination()
+  globalPage = 1
+  if (pagination.type === "pagination") {
+    addOrUpdateQuery("page", 1)
+  }
+  console.log('resetGlobalPage', globalPage)
+}
 export const usePath = () => {
-  const { pathname, searchParams } = useRouter()
+  const { pathname } = useRouter()
   const [, getObj] = useFetch((path: string) => fsGet(path, password()))
   const pagination = getPagination()
-  if (pagination.type === "pagination" && searchParams.page) {
-    globalPage = parseInt(searchParams.page)
+  if (pagination.type === "pagination" && getQueryVariable("page")) {
+    globalPage = parseInt(getQueryVariable("page"))
   }
   const [, getObjs] = useFetch(
     (arg?: {
@@ -153,13 +205,12 @@ export const usePath = () => {
     handleFolder(pathname(), index, size, append)
   }
   return {
-    handlePathChange,
+    handlePathChange: handlePathChange,
     setPathAs: setPathAs,
     refresh: (retry_pass?: boolean, force?: boolean) => {
       handlePathChange(pathname(), retry_pass, force)
     },
     pageChange: pageChange,
-    page: globalPage,
     loadMore: () => {
       pageChange(globalPage + 1, undefined, true)
     },

diff --git a/src/pages/home/Obj.tsx b/src/pages/home/Obj.tsx
@@ -1,25 +1,30 @@
-import { useColorModeValue, VStack } from "@hope-ui/solid";
-import { Suspense, Switch, Match, lazy, createEffect, on } from "solid-js";
-import { FullLoading, Error } from "~/components";
-import { useObjTitle, usePath, useRouter } from "~/hooks";
-import { objStore, /*layout,*/ State } from "~/store";
+import { useColorModeValue, VStack } from "@hope-ui/solid"
+import { Suspense, Switch, Match, lazy, createEffect, on } from "solid-js"
+import { FullLoading, Error } from "~/components"
+import { resetGlobalPage, useObjTitle, usePath, useRouter } from "~/hooks"
+import { objStore, /*layout,*/ State } from "~/store"
 
-const Folder = lazy(() => import("./folder/Folder"));
-const File = lazy(() => import("./file/File"));
-const Password = lazy(() => import("./Password"));
+const Folder = lazy(() => import("./folder/Folder"))
+const File = lazy(() => import("./file/File"))
+const Password = lazy(() => import("./Password"))
 // const ListSkeleton = lazy(() => import("./Folder/ListSkeleton"));
 // const GridSkeleton = lazy(() => import("./Folder/GridSkeleton"));
 
+let first = true
 export const Obj = () => {
-  const cardBg = useColorModeValue("white", "$neutral3");
-  const { pathname } = useRouter();
-  const { handlePathChange } = usePath();
+  const cardBg = useColorModeValue("white", "$neutral3")
+  const { pathname } = useRouter()
+  const { handlePathChange } = usePath()
   createEffect(
     on(pathname, (pathname) => {
-      useObjTitle();
-      handlePathChange(pathname);
+      useObjTitle()
+      if (!first) {
+        resetGlobalPage()
+      }
+      first = false
+      handlePathChange(pathname)
     })
-  );
+  )
   return (
     <VStack
       class="obj-box"
@@ -59,5 +64,5 @@ export const Obj = () => {
         </Switch>
       </Suspense>
     </VStack>
-  );
-};
+  )
+}
diff --git a/src/pages/home/folder/Pager.tsx b/src/pages/home/folder/Pager.tsx
@@ -1,94 +1,71 @@
-import { Button, Text } from "@hope-ui/solid";
-import { Match, onCleanup, onMount, Show, Switch } from "solid-js";
-import { FullLoading, Paginator } from "~/components";
-import { usePath, useT } from "~/hooks";
-import { getPagination, objStore, State } from "~/store";
-
-function addOrUpdateQuery(key: string, value: any, type = "pushState") {
-  let url = type === "location" ? location.href : location.hash;
-
-  if (!url.includes("?")) {
-    url = `${url}?${key}=${value}`;
-  } else {
-    if (!url.includes(key)) {
-      url = `${url}&${key}=${value}`;
-    } else {
-      const re = `(\\?|&|\#)${key}([^&|^#]*)(&|$|#)`;
-      url = url.replace(new RegExp(re), "$1" + key + "=" + value + "$3");
-    }
-  }
-
-  if (type === "location") {
-    location.href = url;
-  }
-
-  if (type === "pushState") {
-    history.pushState({}, "", url);
-  }
-}
+import { Button, Text } from "@hope-ui/solid"
+import { Match, onCleanup, onMount, Show, Switch } from "solid-js"
+import { FullLoading, Paginator } from "~/components"
+import { addOrUpdateQuery, getGlobalPage, usePath, useT } from "~/hooks"
+import { getPagination, objStore, State } from "~/store"
 
 const Pagination = () => {
-  const pagination = getPagination();
-  const { pageChange, page } = usePath();
+  const pagination = getPagination()
+  const { pageChange } = usePath()
   return (
     <Paginator
       total={objStore.total}
-      defaultCurrent={page}
+      defaultCurrent={getGlobalPage()}
       defaultPageSize={pagination.size}
       onChange={(page) => {
-        addOrUpdateQuery("page", page);
-        pageChange(page);
+        addOrUpdateQuery("page", page)
+        pageChange(page)
       }}
     />
-  );
-};
+  )
+}
 const LoadMore = () => {
-  const { loadMore, allLoaded } = usePath();
-  const t = useT();
+  const { loadMore, allLoaded } = usePath()
+  const t = useT()
   return (
     <Show
       when={!allLoaded()}
       fallback={<Text fontStyle="italic">{t("home.no_more")}</Text>}
     >
       <Button onClick={loadMore}>{t("home.load_more")}</Button>
     </Show>
-  );
-};
+  )
+}
 
 const AutoLoadMore = () => {
-  const { loadMore, allLoaded } = usePath();
-  const t = useT();
+  const { loadMore, allLoaded } = usePath()
+  const t = useT()
   const ob = new IntersectionObserver(
     (entries) => {
       if (entries[0].isIntersecting) {
-        loadMore();
+        loadMore()
       }
     },
     {
       threshold: 0.1,
     }
-  );
-  let el: HTMLDivElement;
+  )
+  let el: HTMLDivElement
   onMount(() => {
     if (!allLoaded()) {
-      ob.observe(el);
+      ob.observe(el)
     }
-  });
+  })
   onCleanup(() => {
-    ob.disconnect();
-  });
+    ob.disconnect()
+  })
   return (
     <Show
       when={!allLoaded()}
       fallback={<Text fontStyle="italic">{t("home.no_more")}</Text>}
     >
       <FullLoading py="$2" size="md" thickness={3} ref={el!} />
     </Show>
-  );
-};
+  )
+}
 
 export const Pager = () => {
-  const pagination = getPagination();
+  const pagination = getPagination()
   return (
     <Switch>
       <Match when={objStore.state === State.FetchingMore}>
@@ -104,5 +81,5 @@ export const Pager = () => {
         <AutoLoadMore />
       </Match>
     </Switch>
-  );
-};
+  )
+}