diff --git a/frontend/src/apis/queries/hooks.ts b/frontend/src/apis/queries/hooks.ts index 2f17b5efe..40a7d69ee 100644 --- a/frontend/src/apis/queries/hooks.ts +++ b/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 { 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); diff --git a/frontend/src/components/tables/PageControl.tsx b/frontend/src/components/tables/PageControl.tsx index bcdf290e3..317b4a3c3 100644 --- a/frontend/src/components/tables/PageControl.tsx +++ b/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 = ({ 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 ( @@ -37,7 +34,13 @@ const PageControl: FunctionComponent = ({ 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} >