fix(#20): set the start index correctly when some filter is applied

kernelci · Aug 19, 2024 · 0aac5ed · 0aac5ed
1 parent 82f83f6
commit 0aac5ed
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/dashboard/src/hooks/usePagination.tsx b/dashboard/src/hooks/usePagination.tsx
@@ -1,8 +1,12 @@
 import { useState, useEffect, useCallback } from 'react';
 
+import { TFilter, TableFilter } from '@/types/tree/TreeDetails';
+
 export const usePagination = (
   totalItems: number,
   itemsPerPage: number,
+  filters?: TFilter,
+  tableFilter?: TableFilter,
 ): {
   startIndex: number;
   endIndex: number;
@@ -13,8 +17,9 @@ export const usePagination = (
   const [endIndex, setEndIndex] = useState(0);
 
   useEffect(() => {
+    setStartIndex(0); //restart the index whenever there is a change in filters
     setEndIndex(totalItems > itemsPerPage ? itemsPerPage : totalItems);
-  }, [itemsPerPage, totalItems]);
+  }, [itemsPerPage, totalItems, filters, tableFilter]);
 
   const onClickGoForward = useCallback(() => {
     setStartIndex(endIndex);

diff --git a/dashboard/src/pages/TreeDetails/Tabs/Build/BuildTab.tsx b/dashboard/src/pages/TreeDetails/Tabs/Build/BuildTab.tsx
@@ -27,6 +27,7 @@ const BuildTab = ({ treeDetailsData }: BuildTab): JSX.Element => {
   const navigate = useNavigate({
     from: '/tree/$treeId',
   });
+  const { diffFilter } = useSearch({ from: '/tree/$treeId/' });
 
   const accordionContent = useMemo(() => {
     return treeDetailsData?.builds.map(row => ({
@@ -69,7 +70,12 @@ const BuildTab = ({ treeDetailsData }: BuildTab): JSX.Element => {
         : accordionContent;
 
   const { startIndex, endIndex, onClickGoForward, onClickGoBack } =
-    usePagination(filteredContent?.length ?? 0, ITEMS_PER_PAGE);
+    usePagination(
+      filteredContent?.length ?? 0,
+      ITEMS_PER_PAGE,
+      diffFilter,
+      filterBy,
+    );
   const cards = useMemo(
     () => [
       {