From 4f77710f462ccd8765465b97ca7f5eac334c30cb Mon Sep 17 00:00:00 2001
From: Anderson Shindy Oki <anderson.vs.oki@gmail.com>
Date: Thu, 16 Jan 2025 23:33:31 +0900
Subject: [PATCH] Fixed modal with tables application crash

---
 frontend/src/components/tables/PageControl.tsx    |  6 ------
 frontend/src/components/tables/QueryPageTable.tsx | 11 ++++++++++-
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/tables/PageControl.tsx b/frontend/src/components/tables/PageControl.tsx
index 317b4a3c3..e328de7cf 100644
--- 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
index 797d7a08e..21889adf7 100644
--- 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>
   );