feat: persist pages

frontend/src/apis/queries/hooks.ts

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from "react";
+import { useSearchParams } from "react-router";
 import {
   QueryKey,
   useQuery,
@@ -34,7 +35,12 @@ export function usePaginationQuery<
 ): UsePaginationQueryResult<TObject> {
   const client = useQueryClient();
 
-  const [page, setIndex] = useState(0);
+  const [searchParams] = useSearchParams();
+
+  const [page, setIndex] = useState(
+    (Number(searchParams.get("page")) ?? 0) - 1,
+  );
+
   const pageSize = usePageSize();
 
   const start = page * pageSize;

frontend/src/components/tables/PageControl.tsx

@@ -1,4 +1,5 @@
-import { FunctionComponent, useEffect } from "react";
+import { FunctionComponent } from "react";
+import { useNavigate } from "react-router";
 import { Group, Pagination, Text } from "@mantine/core";
 import { useIsLoading } from "@/contexts";
 
@@ -22,11 +23,7 @@ const PageControl: FunctionComponent<Props> = ({
   const end = Math.min(size * (index + 1), total);
 
   const isLoading = useIsLoading();
-
-  // Jump to first page if total page count changes
-  useEffect(() => {
-    goto(0);
-  }, [total, goto]);
+  const navigate = useNavigate();
 
   return (
     <Group p={16} justify="space-between">
@@ -37,7 +34,11 @@ const PageControl: FunctionComponent<Props> = ({
         size="sm"
         color={isLoading ? "gray" : "primary"}
         value={index + 1}
-        onChange={(page) => goto(page - 1)}
+        onChange={(page) => {
+          navigate(`?page=${page}`, { replace: true });
+
+          return goto(page - 1);
+        }}
         hidden={count <= 1}
         total={count}
       ></Pagination>