Provide pagination to user pages

The route should be adapted to manage the pagination numbers for the user main pages. Signed-off-by: Carla Martinez <[email protected]>
carma12 · Jun 4, 2024 · 7735501 · 7735501
1 parent 1123a5c
commit 7735501
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 6 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -34,11 +34,10 @@ import {
   updateBrowserTitle,
 } from "src/store/Global/routes-slice";
 // Router DOM
-import { useLocation, useNavigate } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 
 const App: React.FunctionComponent = () => {
   const dispatch = useAppDispatch();
-  const navigate = useNavigate();
   const { pathname } = useLocation();
 
   // When accessing to a given URL directly from the browser, the routing data is loaded
@@ -70,7 +69,6 @@ const App: React.FunctionComponent = () => {
     if (currentTitle) {
       dispatch(updateBrowserTitle(currentTitle));
     }
-    navigate(pathname);
   }, []);
 
   // [API Call] Get initial data

diff --git a/src/pages/ActiveUsers/ActiveUsers.tsx b/src/pages/ActiveUsers/ActiveUsers.tsx
@@ -56,8 +56,12 @@ import { SerializedError } from "@reduxjs/toolkit";
 import useApiError from "src/hooks/useApiError";
 import GlobalErrors from "src/components/errors/GlobalErrors";
 import ModalErrors from "src/components/errors/ModalErrors";
+// Navigation
+import { useSearchParams } from "react-router-dom";
 
 const ActiveUsers = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+
   // Dispatch (Redux)
   const dispatch = useAppDispatch();
 
@@ -80,7 +84,9 @@ const ActiveUsers = () => {
 
   // Main states - what user can define / what we could use in page URL
   const [searchValue, setSearchValue] = React.useState("");
-  const [page, setPage] = useState<number>(1);
+  const [page, setPage] = useState<number>(
+    parseInt(searchParams.get("p") || "1")
+  );
   const [perPage, setPerPage] = useState<number>(10);
   const [totalCount, setUsersTotalCount] = useState<number>(0);
   const [searchDisabled, setSearchIsDisabled] = useState<boolean>(false);
@@ -157,6 +163,20 @@ const ActiveUsers = () => {
     }
   }, [userDataResponse]);
 
+  // Handle URLs with pagination
+  React.useEffect(() => {
+    let searchParamsNew = {};
+
+    if (page > 1) {
+      searchParamsNew = {
+        ...searchParamsNew,
+        p: page.toString(),
+      };
+    }
+
+    setSearchParams(searchParamsNew, { replace: true });
+  }, [page]);
+
   // Refresh button handling
   const refreshUsersData = () => {
     // Hide table

diff --git a/src/pages/PreservedUsers/PreservedUsers.tsx b/src/pages/PreservedUsers/PreservedUsers.tsx
@@ -47,8 +47,12 @@ import { useGettingPreservedUserQuery } from "../../services/rpcUsers";
 import useApiError from "src/hooks/useApiError";
 import GlobalErrors from "src/components/errors/GlobalErrors";
 import ModalErrors from "src/components/errors/ModalErrors";
+// Navigation
+import { useSearchParams } from "react-router-dom";
 
 const PreservedUsers = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+
   // Initialize stage users list (Redux)
   const dispatch = useAppDispatch();
 
@@ -69,7 +73,9 @@ const PreservedUsers = () => {
 
   // Main states - what user can define / what we could use in page URL
   const [searchValue, setSearchValue] = React.useState("");
-  const [page, setPage] = useState<number>(1);
+  const [page, setPage] = useState<number>(
+    parseInt(searchParams.get("p") || "1")
+  );
   const [perPage, setPerPage] = useState<number>(10);
   const [totalCount, setUsersTotalCount] = useState<number>(0);
   const [searchDisabled, setSearchIsDisabled] = useState<boolean>(false);
@@ -141,6 +147,20 @@ const PreservedUsers = () => {
     }
   }, [userDataResponse]);
 
+  // Handle URLs with pagination
+  React.useEffect(() => {
+    let searchParamsNew = {};
+
+    if (page > 1) {
+      searchParamsNew = {
+        ...searchParamsNew,
+        p: page.toString(),
+      };
+    }
+
+    setSearchParams(searchParamsNew, { replace: true });
+  }, [page]);
+
   // Refresh button handling
   const refreshUsersData = () => {
     // Hide table

diff --git a/src/pages/StageUsers/StageUsers.tsx b/src/pages/StageUsers/StageUsers.tsx
@@ -48,8 +48,12 @@ import { useGettingStageUserQuery } from "../../services/rpcUsers";
 import useApiError from "src/hooks/useApiError";
 import GlobalErrors from "src/components/errors/GlobalErrors";
 import ModalErrors from "src/components/errors/ModalErrors";
+// Navigation
+import { useSearchParams } from "react-router-dom";
 
 const StageUsers = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+
   // Initialize stage users list (Redux)
   const dispatch = useAppDispatch();
 
@@ -70,7 +74,9 @@ const StageUsers = () => {
 
   // Main states - what user can define / what we could use in page URL
   const [searchValue, setSearchValue] = React.useState("");
-  const [page, setPage] = useState<number>(1);
+  const [page, setPage] = useState<number>(
+    parseInt(searchParams.get("p") || "1")
+  );
   const [perPage, setPerPage] = useState<number>(10);
   const [totalCount, setUsersTotalCount] = useState<number>(0);
   const [searchDisabled, setSearchIsDisabled] = useState<boolean>(false);
@@ -142,6 +148,20 @@ const StageUsers = () => {
     }
   }, [userDataResponse]);
 
+  // Handle URLs with pagination
+  React.useEffect(() => {
+    let searchParamsNew = {};
+
+    if (page > 1) {
+      searchParamsNew = {
+        ...searchParamsNew,
+        p: page.toString(),
+      };
+    }
+
+    setSearchParams(searchParamsNew, { replace: true });
+  }, [page]);
+
   // Refresh button handling
   const refreshUsersData = () => {
     // Hide table