make the pagination controls compatible with both react table props and local props criteria

CollinBeczak · CollinBeczak · commit ad5d5bc054fe · 2025-09-23T15:29:50.000-03:00
diff --git a/src/components/PaginationControl/PaginationControl.jsx b/src/components/PaginationControl/PaginationControl.jsx
@@ -1,27 +1,30 @@
 import { FormattedMessage, injectIntl } from "react-intl";
 import messages from "./Messages";
 
-function PaginationControl({ currentPage, totalPages, pageSize, gotoPage, setPageSize, intl }) {
-  const canPreviousPage = currentPage > 0;
-  const canNextPage = currentPage < totalPages - 1;
-
-  const previousPage = () => gotoPage(Math.max(currentPage - 1, 0));
-  const nextPage = () => gotoPage(Math.min(currentPage + 1, totalPages - 1));
-
+function PaginationControl({
+  currentPage,
+  pageCount,
+  pageSize,
+  gotoPage,
+  setPageSize,
+  previousPage,
+  nextPage,
+  intl,
+}) {
   return (
     <div className="mr-flex mr-flex-wrap mr-justify-center mr-items-center mr-gap-2 md:mr-gap-3 mr-mt-6 mr-text-white">
       <button
         className="mr-button mr-button--small mr-mb-2"
         onClick={() => gotoPage(0)}
-        disabled={!canPreviousPage}
+        disabled={!(currentPage > 0)}
       >
         {"<< "}
         <FormattedMessage {...messages.first} />
       </button>
       <button
         className="mr-button mr-button--small mr-mb-2"
-        onClick={() => previousPage()}
-        disabled={!canPreviousPage}
+        onClick={previousPage}
+        disabled={!(currentPage > 0)}
       >
         {"< "}
         <FormattedMessage {...messages.previous} />
@@ -32,24 +35,24 @@ function PaginationControl({ currentPage, totalPages, pageSize, gotoPage, setPag
           className="mr-input mr-px-1 mr-py-0 mr-w-12 md:mr-w-16"
           type="number"
           min={1}
-          max={totalPages}
+          max={pageCount}
           value={currentPage + 1}
           onChange={(e) => gotoPage(e.target.value ? Number(e.target.value) - 1 : 0)}
         />{" "}
-        <FormattedMessage {...messages.of} /> {totalPages}
+        <FormattedMessage {...messages.of} /> {pageCount}
       </span>
       <button
         className="mr-button mr-button--small mr-mb-2"
-        onClick={() => nextPage()}
-        disabled={!canNextPage}
+        onClick={nextPage}
+        disabled={!(currentPage < pageCount - 1)}
       >
         <FormattedMessage {...messages.next} />
         {" >"}
       </button>
       <button
         className="mr-button mr-button--small mr-mb-2"
-        onClick={() => gotoPage(totalPages - 1)}
-        disabled={!canNextPage}
+        onClick={() => gotoPage(pageCount - 1)}
+        disabled={!(currentPage < pageCount - 1)}
       >
         <FormattedMessage {...messages.last} />
         {" >>"}
@@ -72,4 +75,4 @@ function PaginationControl({ currentPage, totalPages, pageSize, gotoPage, setPag
   );
 }
 
-export default injectIntl(PaginationControl);
+export default injectIntl(PaginationControl);
diff --git a/src/components/SuperAdmin/MetricsTable.jsx b/src/components/SuperAdmin/MetricsTable.jsx
@@ -136,11 +136,14 @@ const MetricsTable = (props) => {
         </table>
       </TableWrapper>
       <PaginationControl
-        currentPage={pageIndex}
-        totalPages={Math.ceil(data.length / pageSize)}
-        pageSize={pageSize}
-        gotoPage={gotoPage}
-        setPageSize={setPageSize}
+      currentPage={pageIndex} 
+      pageCount={Math.ceil(data.length / pageSize)}
+      pageSize={pageSize}
+      gotoPage={gotoPage}
+      setPageSize={setPageSize}
+      previousPage={() => gotoPage(pageIndex - 1)}
+      nextPage={() => gotoPage(pageIndex + 1)}
+      intl={props.intl}
       />
     </section>
   );
diff --git a/src/components/TaskAnalysisTable/TaskAnalysisTable.jsx b/src/components/TaskAnalysisTable/TaskAnalysisTable.jsx
@@ -10,7 +10,6 @@ import { Link } from "react-router-dom";
 import {
   useExpanded,
   useFilters,
-  usePagination,
   useResizeColumns,
   useSortBy,
   useTable,
@@ -94,7 +93,7 @@ export const TaskAnalysisTableInternal = (props) => {
   const [showConfigureColumns, setShowConfigureColumns] = useState(false);
 
   const handleStateChange = useCallback(
-    ({ sortBy, filters, pageIndex }) => {
+    ({ sortBy, filters }) => {
       const newCriteria = {
         sortCriteria:
           sortBy.length > 0
@@ -124,7 +123,6 @@ export const TaskAnalysisTableInternal = (props) => {
             [filter.id]: value,
           };
         }, {}),
-        page: pageIndex,
       };
 
       const currentCriteria = _pick(props.criteria, Object.keys(newCriteria));
@@ -227,7 +225,7 @@ export const TaskAnalysisTableInternal = (props) => {
     getTableProps,
     getTableBodyProps,
     headerGroups,
-    page,
+    rows,
     prepareRow,
     state: { sortBy, filters },
   } = useTable(
@@ -257,7 +255,6 @@ export const TaskAnalysisTableInternal = (props) => {
               },
             ]
           : [],
-        pageIndex: props.page ?? 0,
       },
       disableResizing: false,
       disableMultiSort: true,
@@ -267,13 +264,12 @@ export const TaskAnalysisTableInternal = (props) => {
     useSortBy,
     useResizeColumns,
     useExpanded,
-    usePagination,
   );
 
   // Update parent when table state changes
   useEffect(() => {
-    handleStateChange({ sortBy, filters, pageIndex: props.page ?? 0 });
-  }, [sortBy, filters, props.page]);
+    handleStateChange({ sortBy, filters });
+  }, [sortBy, filters]);
 
   return (
     <Fragment>
@@ -297,7 +293,7 @@ export const TaskAnalysisTableInternal = (props) => {
           <table {...getTableProps()} className={tableStyles}>
             <thead>{renderTableHeader(headerGroups)}</thead>
             <tbody {...getTableBodyProps()}>
-              {page.map((row) => {
+              {rows.map((row) => {
                 prepareRow(row);
                 return (
                   <Fragment key={row.original.id}>
@@ -325,12 +321,20 @@ export const TaskAnalysisTableInternal = (props) => {
         </TableWrapper>
 
         <PaginationControl
-          currentPage={props.page ?? 0}
-          totalPages={Math.ceil((props.totalTaskCount ?? 0) / props.pageSize)}
-          pageSize={props.pageSize}
-          gotoPage={(page) => handleStateChange({ sortBy, filters, pageIndex: page })}
-          setPageSize={props.changePageSize}
-        />
+         currentPage={props.criteria?.page || 0}
+         pageCount={Math.ceil((props.totalTaskCount || 0) / (props.criteria?.pageSize || 20))}
+         pageSize={props.criteria?.pageSize || 20}
+         gotoPage={(page) => props.updateCriteria({ page })}
+         setPageSize={(pageSize) => props.updateCriteria({ pageSize, page: 0 })}
+         previousPage={() =>
+           props.updateCriteria({ page: Math.max(0, (props.criteria?.page || 0) - 1) })
+         }
+         nextPage={() => {
+           const maxPage =
+             Math.ceil((props.totalTaskCount || 0) / (props.criteria?.pageSize || 20)) - 1;
+           props.updateCriteria({ page: Math.min(maxPage, (props.criteria?.page || 0) + 1) });
+         }}
+       />
       </section>
 
       {Number.isFinite(openComments) && (
diff --git a/src/pages/Inbox/Inbox.jsx b/src/pages/Inbox/Inbox.jsx
@@ -479,11 +479,14 @@ const Inbox = (props) => {
           </table>
         </TableWrapper>
         <PaginationControl
-          currentPage={pageIndex}
-          totalPages={totalPages}
-          pageSize={pageSize}
-          gotoPage={gotoPage}
-          setPageSize={setPageSize}
+       currentPage= {pageIndex} 
+       pageCount={totalPages}
+       pageSize={pageSize}
+       gotoPage={gotoPage}
+       setPageSize={setPageSize}
+       previousPage={() => gotoPage(pageIndex - 1)}
+       nextPage={() => gotoPage(pageIndex + 1)}
+       intl={props.intl}
         />
       </section>
 
diff --git a/src/pages/Review/TasksReview/TasksReviewTable.jsx b/src/pages/Review/TasksReview/TasksReviewTable.jsx
@@ -11,7 +11,7 @@ import _pull from "lodash/pull";
 import { Fragment, useCallback, useEffect, useMemo, useState } from "react";
 import { FormattedDate, FormattedMessage, FormattedTime } from "react-intl";
 import { Link } from "react-router-dom";
-import { useFilters, usePagination, useResizeColumns, useSortBy, useTable } from "react-table";
+import { useFilters, useResizeColumns, useSortBy, useTable } from "react-table";
 import ConfigureColumnsModal from "../../../components/ConfigureColumnsModal/ConfigureColumnsModal";
 import Dropdown from "../../../components/Dropdown/Dropdown";
 import MapPane from "../../../components/EnhancedMap/MapPane/MapPane";
@@ -179,14 +179,12 @@ export const TaskReviewTable = (props) => {
         },
         (taskId) => setOpenComments(taskId),
         props.reviewCriteria,
-        props.pageSize,
       ),
     [
       updateChallengeFilterIds,
       updateProjectFilterIds,
       challengeFilterIds,
       projectFilterIds,
-      props.pageSize,
       invertFieldsOnLength,
     ],
   );
@@ -222,21 +220,17 @@ export const TaskReviewTable = (props) => {
                 filter.value !== null && filter.value !== undefined && filter.value !== "",
             )
         : [],
-      pageSize: props.pageSize,
-      pageIndex: props.reviewCriteria?.page || 0,
     }),
-    [initialSort, props.reviewCriteria?.filters, props.reviewCriteria?.page, props.pageSize],
+    [initialSort, props.reviewCriteria?.filters, props.reviewCriteria?.page],
   );
 
   const {
     getTableProps,
     getTableBodyProps,
     headerGroups,
-    page,
+    rows,
     prepareRow,
-    state: { sortBy, filters, pageIndex, pageSize },
-    gotoPage,
-    setPageSize,
+    state: { sortBy, filters },
     setAllFilters,
     setSortBy,
   } = useTable(
@@ -252,8 +246,6 @@ export const TaskReviewTable = (props) => {
       manualFilters: true,
       manualPagination: true,
       disableSortRemove: true,
-      pageCount: Math.ceil((props.reviewData?.totalCount ?? 0) / props.pageSize),
-      pageSize: props.pageSize,
       initialState,
       disableResizing: false,
       disableMultiSort: true,
@@ -262,7 +254,6 @@ export const TaskReviewTable = (props) => {
     useFilters,
     useSortBy,
     useResizeColumns,
-    usePagination,
   );
 
   const handleClearFilters = () => {
@@ -277,7 +268,6 @@ export const TaskReviewTable = (props) => {
 
     setChallengeFilterIds([FILTER_SEARCH_ALL]);
     setProjectFilterIds([FILTER_SEARCH_ALL]);
-    gotoPage(0);
 
     const defaultSort = {
       sortCriteria: {
@@ -362,29 +352,24 @@ export const TaskReviewTable = (props) => {
         sortCriteria,
         filters,
         page: tableState?.page || 0,
-        pageSize: tableState?.pageSize || pageSize,
         boundingBox: props.reviewCriteria?.boundingBox,
         includeTags: !!props.addedColumns?.tags,
         savedChallengesOnly: props.reviewCriteria?.savedChallengesOnly || false,
         excludeOtherReviewers: props.reviewCriteria?.excludeOtherReviewers || false,
         invertFields: props.reviewCriteria?.invertFields || {},
       });
     },
-    [challengeFilterIds, projectFilterIds, props.updateReviewTasks, props.addedColumns, pageSize],
+    [challengeFilterIds, projectFilterIds, props.updateReviewTasks, props.addedColumns],
   );
 
   useEffect(() => {
     handleTableStateUpdate({
       sorted: sortBy.map((sort) => ({ id: sort.id, desc: sort.desc })),
       filtered: filters.map((filter) => ({ id: filter.id, value: filter.value })),
-      page: pageIndex,
-      pageSize: pageSize,
     });
   }, [
     sortBy,
     filters,
-    pageIndex,
-    pageSize,
     challengeFilterIds,
     projectFilterIds,
     handleTableStateUpdate,
@@ -534,7 +519,7 @@ export const TaskReviewTable = (props) => {
             <table {...getTableProps()} className={tableStyles}>
               <thead>{renderTableHeader(headerGroups)}</thead>
               <tbody {...getTableBodyProps()}>
-                {page.map((row) => {
+                {rows.map((row) => {
                   prepareRow(row);
                   return (
                     <tr className={rowStyles} {...row.getRowProps()} key={row.id}>
@@ -562,21 +547,20 @@ export const TaskReviewTable = (props) => {
             </table>
           </TableWrapper>
           <PaginationControl
-            currentPage={pageIndex}
-            totalPages={Math.ceil((props.reviewData?.totalCount ?? 0) / props.pageSize)}
-            pageSize={pageSize}
-            gotoPage={gotoPage}
-            setPageSize={(size) => {
-              setPageSize(size);
-              gotoPage(0);
-              handleTableStateUpdate({
-                sorted: sortBy.map((sort) => ({ id: sort.id, desc: sort.desc })),
-                filtered: filters.map((filter) => ({ id: filter.id, value: filter.value })),
-                page: 0,
-                pageSize: size,
-              });
-            }}
-          />
+        currentPage={props.reviewCriteria?.page || 0}
+        pageCount={Math.ceil((props.reviewData?.totalCount || 0) / (props.reviewCriteria?.pageSize || 20))}
+        pageSize={props.reviewCriteria?.pageSize || 20}
+        gotoPage={(page) => props.updateReviewTasks({ page })}
+        setPageSize={(pageSize) => props.updateReviewTasks({ pageSize, page: 0 })}
+        previousPage={() =>
+          props.updateReviewTasks({ page: Math.max(0, (props.reviewCriteria?.page || 0) - 1) })
+        }
+        nextPage={() => {
+          const maxPage =
+            Math.ceil((props.reviewData?.totalCount || 0) / (props.reviewCriteria?.pageSize || 20)) - 1;
+          props.updateReviewTasks({ page: Math.min(maxPage, (props.reviewCriteria?.page || 0) + 1) });
+        }}
+      />
         </div>
       </div>
       {Number.isFinite(openComments) && (
diff --git a/src/pages/Sent/Sent.jsx b/src/pages/Sent/Sent.jsx
