feat: use listingSize param in tree and hardware

- receive param from url and pass to Pagination component - create function to navigate with the selected pageSize Close #860
kernelci · Feb 4, 2025 · d09dc2c · d09dc2c
1 parent 541254d
commit d09dc2c
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 12 deletions.
diff --git a/dashboard/src/components/TreeListingPage/TreeTable.tsx b/dashboard/src/components/TreeListingPage/TreeTable.tsx
@@ -13,12 +13,12 @@ import {
   useReactTable,
 } from '@tanstack/react-table';
 
-import { memo, useMemo, useState } from 'react';
+import { memo, useCallback, useMemo, useState } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
 import type { LinkProps } from '@tanstack/react-router';
-import { Link, useSearch } from '@tanstack/react-router';
+import { Link, useNavigate, useSearch } from '@tanstack/react-router';
 
 import { TooltipDateTime } from '@/components/TooltipDateTime';
 
@@ -322,11 +322,16 @@ interface ITreeTable {
 }
 
 export function TreeTable({ treeTableRows }: ITreeTable): JSX.Element {
+  const { origin: unsafeOrigin, listingSize } = useSearch({ strict: false });
+  const navigate = useNavigate({ from: '/tree' });
+
   const [sorting, setSorting] = useState<SortingState>([]);
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-  const { pagination, paginationUpdater } = usePaginationState('treeListing');
+  const { pagination, paginationUpdater } = usePaginationState(
+    'treeListing',
+    listingSize,
+  );
 
-  const { origin: unsafeOrigin } = useSearch({ strict: false });
   const origin = zOrigin.parse(unsafeOrigin);
 
   const columns = useMemo(() => getColumns(origin), [origin]);
@@ -422,6 +427,15 @@ export function TreeTable({ treeTableRows }: ITreeTable): JSX.Element {
     );
   }, [modelRows, columns.length, origin]);
 
+  const navigateWithPageSize = useCallback(
+    (pageSize: number) => {
+      navigate({
+        search: s => ({ ...s, listingSize: pageSize }),
+      });
+    },
+    [navigate],
+  );
+
   return (
     <div className="flex flex-col gap-6 pb-4">
       <div className="flex items-center justify-between gap-4">
@@ -433,13 +447,21 @@ export function TreeTable({ treeTableRows }: ITreeTable): JSX.Element {
         </span>
         <div className="flex items-center justify-between gap-10">
           <MemoizedInputTime />
-          <PaginationInfo table={table} intlLabel="global.trees" />
+          <PaginationInfo
+            table={table}
+            intlLabel="global.trees"
+            onPaginationChange={navigateWithPageSize}
+          />
         </div>
       </div>
       <BaseTable headerComponents={tableHeaders}>
         <TableBody>{tableBody}</TableBody>
       </BaseTable>
-      <PaginationInfo table={table} intlLabel="global.trees" />
+      <PaginationInfo
+        table={table}
+        intlLabel="global.trees"
+        onPaginationChange={navigateWithPageSize}
+      />
     </div>
   );
 }
diff --git a/dashboard/src/pages/Hardware/HardwareTable.tsx b/dashboard/src/pages/Hardware/HardwareTable.tsx
@@ -14,11 +14,11 @@ import {
   useReactTable,
 } from '@tanstack/react-table';
 
-import { memo, useMemo, useState } from 'react';
+import { memo, useCallback, useMemo, useState } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
-import type { LinkProps } from '@tanstack/react-router';
+import { useNavigate, useSearch, type LinkProps } from '@tanstack/react-router';
 
 import BaseTable, { TableHead } from '@/components/Table/BaseTable';
 
@@ -302,10 +302,15 @@ export function HardwareTable({
   startTimestampInSeconds,
   endTimestampInSeconds,
 }: ITreeTable): JSX.Element {
+  const { listingSize } = useSearch({ strict: false });
+  const navigate = useNavigate({ from: '/hardware' });
+
   const [sorting, setSorting] = useState<SortingState>([]);
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-  const { pagination, paginationUpdater } =
-    usePaginationState('hardwareListing');
+  const { pagination, paginationUpdater } = usePaginationState(
+    'hardwareListing',
+    listingSize,
+  );
 
   const data = useMemo(() => {
     return treeTableRows;
@@ -394,6 +399,15 @@ export function HardwareTable({
 
   const MemoizedInputTime = memo(InputTime);
 
+  const navigateWithPageSize = useCallback(
+    (pageSize: number) => {
+      navigate({
+        search: s => ({ ...s, listingSize: pageSize }),
+      });
+    },
+    [navigate],
+  );
+
   return (
     <div className="flex flex-col gap-6 pb-4">
       <div className="flex items-center justify-between gap-4">
@@ -405,13 +419,21 @@ export function HardwareTable({
         </span>
         <div className="flex items-center justify-between gap-10">
           <MemoizedInputTime />
-          <PaginationInfo table={table} intlLabel="global.hardwares" />
+          <PaginationInfo
+            table={table}
+            intlLabel="global.hardwares"
+            onPaginationChange={navigateWithPageSize}
+          />
         </div>
       </div>
       <BaseTable headerComponents={tableHeaders}>
         <TableBody>{tableBody}</TableBody>
       </BaseTable>
-      <PaginationInfo table={table} intlLabel="global.hardwares" />
+      <PaginationInfo
+        table={table}
+        intlLabel="global.hardwares"
+        onPaginationChange={navigateWithPageSize}
+      />
     </div>
   );
 }