Fixes-pagination

src/CAREUI/misc/PaginatedList.tsx

@@ -50,6 +50,11 @@ export default function PaginatedList<TItem extends object>({
   ...queryOptions
 }: Props<TItem>) {
   const [currentPage, setPage] = useState(1);
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const page = parseInt(urlParams.get("page") || "1", 10);
+    setPage(page);
+  }, []);
   const query = useQuery(route, {
     ...queryOptions,
     query: {
@@ -61,6 +66,29 @@ export default function PaginatedList<TItem extends object>({
 
   const items = query.data?.results ?? [];
 
+  const setQueryParams = (
+    params: Record<string, any>,
+    options?: { replace?: boolean },
+  ) => {
+    const url = new URL(window.location.href);
+
+    Object.keys(params).forEach((key) => {
+      if (params[key] === undefined || params[key] === null) {
+        url.searchParams.delete(key);
+      } else {
+        url.searchParams.set(key, params[key]);
+      }
+    });
+
+    if (options?.replace) {
+      window.history.replaceState({}, "", url.toString());
+    } else {
+      window.history.pushState({}, "", url.toString());
+    }
+  };
+  useEffect(() => {
+    setQueryParams({ page: currentPage }, { replace: true });
+  }, [currentPage]);
   useEffect(() => {
     if (queryCB) {
       queryCB(query);

src/Components/Common/Pagination.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import { useAbortableEffect, statusType } from "../../Common/utils";
 import ButtonV2 from "./components/ButtonV2";
@@ -33,14 +33,7 @@ const Pagination = ({
     },
     [defaultPerPage, cPage],
   );
-  useEffect(() => {
-    const urlParams = new URLSearchParams(window.location.search);
-    const pageFromUrl = parseInt(urlParams.get("page") || "1", 10);
-    if (pageFromUrl !== currentPage) {
-      setCurrentPage(pageFromUrl);
-      onChange(pageFromUrl, rowsPerPage);
-    }
-  }, [onChange, rowsPerPage, currentPage]);
+
   const getPageNumbers = () => {
     const totalPage = Math.ceil(data.totalCount / rowsPerPage);
     if (totalPage === 0) return [1];
@@ -84,17 +77,12 @@ const Pagination = ({
   const goToPage = (page: number) => {
     setCurrentPage(page);
     onChange(page, rowsPerPage);
-    const url = new URL(window.location.href);
-    url.searchParams.set("page", page.toString());
-    window.history.pushState({}, "", url.toString());
     const pageContainer = window.document.getElementById("pages");
-    if (pageContainer) {
-      pageContainer.scroll({
-        top: 0,
-        left: 0,
-        behavior: "smooth",
-      });
-    }
+    pageContainer?.scroll({
+      top: 0,
+      left: 0,
+      behavior: "smooth",
+    });
   };
 
   return (