Refactor logic for handling page change (#439)

fiaisis · Feb 10, 2025 · e8b0daf · e8b0daf
1 parent 7cf65c4
commit e8b0daf
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/src/Jobs/JobsAll.tsx b/src/Jobs/JobsAll.tsx
@@ -51,8 +51,11 @@ const JobsAll: React.FC = () => {
       totalRows={totalRows}
       currentPage={currentPage}
       rowsPerPage={rowsPerPage}
-      handleChangePage={(_, newPage) => setCurrentPage(newPage)} // Update page number
-      handleChangeRowsPerPage={(e) => setRowsPerPage(parseInt(e.target.value, 10))} // Update rows per page based on what the user has selected (10 is the radix, do not confuse for number of rows)
+      handleChangePage={(_, newPage) => setCurrentPage(newPage)}
+      handleChangeRowsPerPage={(e) => {
+        setRowsPerPage(parseInt(e.target.value, 10));
+        setCurrentPage(Math.floor((currentPage * rowsPerPage) / parseInt(e.target.value, 10))); // Prevents the offset from going out of range (NOTE: 10 is the radix for the parseInt func, do not confuse for number of rows)
+      }}
       handleSort={(property) => {
         const isAsc = orderBy === property && orderDirection === 'asc';
         setOrderDirection(isAsc ? 'desc' : 'asc'); // Toggle sorting order

diff --git a/src/Jobs/JobsGeneral.tsx b/src/Jobs/JobsGeneral.tsx
@@ -52,8 +52,11 @@ const JobsGeneral: React.FC = () => {
       totalRows={totalRows}
       currentPage={currentPage}
       rowsPerPage={rowsPerPage}
-      handleChangePage={(_, newPage) => setCurrentPage(newPage)} // Update page number
-      handleChangeRowsPerPage={(e) => setRowsPerPage(parseInt(e.target.value, 10))} // Update rows per page based on what user has selected (10 is the radix, do not confuse for number of rows)
+      handleChangePage={(_, newPage) => setCurrentPage(newPage)}
+      handleChangeRowsPerPage={(e) => {
+        setRowsPerPage(parseInt(e.target.value, 10));
+        setCurrentPage(Math.floor((currentPage * rowsPerPage) / parseInt(e.target.value, 10))); // Prevents the offset from going out of range (NOTE: 10 is the radix for the parseInt func, do not confuse for number of rows)
+      }}
       handleSort={(property) => {
         const isAsc = orderBy === property && orderDirection === 'asc';
         setOrderDirection(isAsc ? 'desc' : 'asc'); // Toggle sorting order