Persist pages on url and hydrate on page load (#2826)

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(
+    searchParams.get("page") ? Number(searchParams.get("page")) - 1 : 0,
+  );
+
   const pageSize = usePageSize();
 
   const start = page * pageSize;
@@ -62,7 +68,14 @@ export function usePaginationQuery<
         }
       });
     }
-  }, [results.isSuccess, results.data, client, cacheIndividual, queryKey]);
+  }, [
+    results.isSuccess,
+    results.data,
+    client,
+    cacheIndividual,
+    queryKey,
+    page,
+  ]);
 
   const totalCount = data?.total ?? 0;
   const pageCount = Math.ceil(totalCount / pageSize);

frontend/src/components/tables/PageControl.tsx

@@ -1,4 +1,5 @@
-import { FunctionComponent, useEffect } from "react";
+import { FunctionComponent } from "react";
+import { useSearchParams } 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 [searchParams, setSearchParams] = useSearchParams();
 
   return (
     <Group p={16} justify="space-between">
@@ -37,7 +34,13 @@ const PageControl: FunctionComponent<Props> = ({
         size="sm"
         color={isLoading ? "gray" : "primary"}
         value={index + 1}
-        onChange={(page) => goto(page - 1)}
+        onChange={(page) => {
+          searchParams.set("page", page.toString());
+
+          setSearchParams(searchParams, { replace: true });
+
+          return goto(page - 1);
+        }}
         hidden={count <= 1}
         total={count}
       ></Pagination>