Added useTablePaginationReset hook for consistent search behavior

Vizzuality · Dec 18, 2024 · 8373eb6 · 8373eb6
1 parent be3da98
commit 8373eb6
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 0 deletions.
diff --git a/client/src/containers/overview/table/view/key-costs/index.tsx b/client/src/containers/overview/table/view/key-costs/index.tsx
@@ -20,6 +20,8 @@ import { cn } from "@/lib/utils";
 
 import { useGlobalFilters, useTableView } from "@/app/(overview)/url-store";
 
+import { useTablePaginationReset } from "@/hooks/use-table-pagination-reset";
+
 import {
   filtersToQueryParams,
   NO_DATA,
@@ -51,6 +53,7 @@ export function KeyCostsTable() {
     pageIndex: 0,
     pageSize: Number.parseInt(PAGINATION_SIZE_OPTIONS[0]),
   });
+  useTablePaginationReset(filters.keyword, setPagination);
 
   const queryKey = queryKeys.tables.all(tableView, projectsQuerySchema, {
     ...filters,

diff --git a/client/src/containers/overview/table/view/overview/index.tsx b/client/src/containers/overview/table/view/overview/index.tsx
@@ -23,6 +23,8 @@ import { cn } from "@/lib/utils";
 import { projectDetailsAtom } from "@/app/(overview)/store";
 import { useGlobalFilters, useTableView } from "@/app/(overview)/url-store";
 
+import { useTablePaginationReset } from "@/hooks/use-table-pagination-reset";
+
 import ProjectDetails from "@/containers/overview/project-details";
 import {
   filtersToQueryParams,
@@ -55,10 +57,12 @@ export function OverviewTable() {
       desc: true,
     },
   ]);
+
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
     pageSize: Number.parseInt(PAGINATION_SIZE_OPTIONS[0]),
   });
+  useTablePaginationReset(filters.keyword, setPagination);
 
   const queryKey = queryKeys.tables.all(tableView, projectsQuerySchema, {
     ...filters,

diff --git a/client/src/containers/overview/table/view/scorecard-prioritization/index.tsx b/client/src/containers/overview/table/view/scorecard-prioritization/index.tsx
@@ -22,6 +22,8 @@ import { cn } from "@/lib/utils";
 import { projectDetailsAtom } from "@/app/(overview)/store";
 import { useGlobalFilters, useTableView } from "@/app/(overview)/url-store";
 
+import { useTablePaginationReset } from "@/hooks/use-table-pagination-reset";
+
 import ProjectDetails from "@/containers/overview/project-details";
 import {
   filtersToQueryParams,
@@ -62,6 +64,7 @@ export function ScoredCardPrioritizationTable() {
     sorting,
     pagination,
   }).queryKey;
+  useTablePaginationReset(filters.keyword, setPagination);
 
   const { data, isSuccess } = client.projects.getProjectsScorecard.useQuery(
     queryKey,

diff --git a/client/src/hooks/use-table-pagination-reset.ts b/client/src/hooks/use-table-pagination-reset.ts
@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+
+import { PaginationState } from "@tanstack/react-table";
+
+export function useTablePaginationReset(
+  keyword: string | undefined,
+  setPagination: (updater: (prev: PaginationState) => PaginationState) => void,
+) {
+  useEffect(() => {
+    setPagination((prev) => ({
+      ...prev,
+      pageIndex: 0,
+    }));
+  }, [keyword, setPagination]);
+}