Fixed modal with tables application crash

morpheus65535 · Jan 16, 2025 · 4f77710 · 4f77710
1 parent e17bad6
commit 4f77710
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/frontend/src/components/tables/PageControl.tsx b/frontend/src/components/tables/PageControl.tsx
@@ -1,5 +1,4 @@
 import { FunctionComponent } from "react";
-import { useSearchParams } from "react-router";
 import { Group, Pagination, Text } from "@mantine/core";
 import { useIsLoading } from "@/contexts";
 
@@ -23,7 +22,6 @@ const PageControl: FunctionComponent<Props> = ({
   const end = Math.min(size * (index + 1), total);
 
   const isLoading = useIsLoading();
-  const [searchParams, setSearchParams] = useSearchParams();
 
   return (
     <Group p={16} justify="space-between">
@@ -35,10 +33,6 @@ const PageControl: FunctionComponent<Props> = ({
         color={isLoading ? "gray" : "primary"}
         value={index + 1}
         onChange={(page) => {
-          searchParams.set("page", page.toString());
-
-          setSearchParams(searchParams, { replace: true });
-
           return goto(page - 1);
         }}
         hidden={count <= 1}

diff --git a/frontend/src/components/tables/QueryPageTable.tsx b/frontend/src/components/tables/QueryPageTable.tsx
@@ -1,4 +1,5 @@
 import { useEffect } from "react";
+import { useSearchParams } from "react-router";
 import { UsePaginationQueryResult } from "@/apis/queries/hooks";
 import SimpleTable, { SimpleTableProps } from "@/components/tables/SimpleTable";
 import { LoadingProvider } from "@/contexts";
@@ -18,6 +19,8 @@ export default function QueryPageTable<T extends object>(props: Props<T>) {
     controls: { gotoPage },
   } = query;
 
+  const [searchParams, setSearchParams] = useSearchParams();
+
   useEffect(() => {
     ScrollToTop();
   }, [page]);
@@ -30,7 +33,13 @@ export default function QueryPageTable<T extends object>(props: Props<T>) {
         index={page}
         size={pageSize}
         total={totalCount}
-        goto={gotoPage}
+        goto={(page) => {
+          searchParams.set("page", (page + 1).toString());
+
+          setSearchParams(searchParams, { replace: true });
+
+          gotoPage(page);
+        }}
       ></PageControl>
     </LoadingProvider>
   );