fix(pagination): added page query parameter to the url for pagination

ohcnetwork · Mar 9, 2025 · 4bde3e5 · 4bde3e5
1 parent 57ed304
commit 4bde3e5
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 37 deletions.
diff --git a/src/Routers/routes/OrganizationRoutes.tsx b/src/Routers/routes/OrganizationRoutes.tsx
@@ -7,29 +7,61 @@ import OrganizationView from "@/pages/Organization/OrganizationView";
 
 const OrganizationRoutes: AppRoutes = {
   "/organization": () => <OrganizationIndex />,
-  "/organization/:id": ({ id }) => <OrganizationView id={id} />,
-  "/organization/:id/users": ({ id }) => <OrganizationUsers id={id} />,
-  "/organization/:id/patients": ({ id }) => <OrganizationPatients id={id} />,
-  "/organization/:id/facilities": ({ id }) => (
-    <OrganizationFacilities id={id} />
+  "/organization/:id/:page": ({ id, page }) => (
+    <OrganizationView id={id} page={Number(page || 1)} />
   ),
-  "/organization/:navOrganizationId/children/:id": ({
+  "/organization/:id/:page/users": ({ id, page }) => (
+    <OrganizationUsers id={id} page={Number(page || 1)} />
+  ),
+  "/organization/:id/:page/patients": ({ id, page }) => (
+    <OrganizationPatients id={id} page={Number(page || 1)} />
+  ),
+  "/organization/:id/:page/facilities": ({ id, page }) => (
+    <OrganizationFacilities id={id} page={Number(page || 1)} />
+  ),
+  "/organization/:navOrganizationId/children/:id/:page": ({
     navOrganizationId,
     id,
-  }) => <OrganizationView id={id} navOrganizationId={navOrganizationId} />,
-  "/organization/:navOrganizationId/children/:id/users": ({
+    page,
+  }) => (
+    <OrganizationView
+      navOrganizationId={navOrganizationId}
+      id={id}
+      page={Number(page || 1)}
+    />
+  ),
+  "/organization/:navOrganizationId/children/:id/:page/users": ({
     navOrganizationId,
     id,
-  }) => <OrganizationUsers id={id} navOrganizationId={navOrganizationId} />,
-  "/organization/:navOrganizationId/children/:id/patients": ({
+    page,
+  }) => (
+    <OrganizationUsers
+      id={id}
+      navOrganizationId={navOrganizationId}
+      page={Number(page || 1)}
+    />
+  ),
+  "/organization/:navOrganizationId/children/:id/:page/patients": ({
     navOrganizationId,
     id,
-  }) => <OrganizationPatients id={id} navOrganizationId={navOrganizationId} />,
-  "/organization/:navOrganizationId/children/:id/facilities": ({
+    page,
+  }) => (
+    <OrganizationPatients
+      id={id}
+      navOrganizationId={navOrganizationId}
+      page={Number(page || 1)}
+    />
+  ),
+  "/organization/:navOrganizationId/children/:id/:page/facilities": ({
     navOrganizationId,
     id,
+    page,
   }) => (
-    <OrganizationFacilities id={id} navOrganizationId={navOrganizationId} />
+    <OrganizationFacilities
+      id={id}
+      navOrganizationId={navOrganizationId}
+      page={Number(page || 1)}
+    />
   ),
 };
 

diff --git a/src/pages/Organization/OrganizationFacilities.tsx b/src/pages/Organization/OrganizationFacilities.tsx
@@ -25,11 +25,13 @@ import OrganizationLayout from "./components/OrganizationLayout";
 interface Props {
   id: string;
   navOrganizationId?: string;
+  page: number;
 }
 
 export default function OrganizationFacilities({
   id,
   navOrganizationId,
+  page,
 }: Props) {
   const { t } = useTranslation();
 
@@ -56,7 +58,11 @@ export default function OrganizationFacilities({
   }
 
   return (
-    <OrganizationLayout id={id} navOrganizationId={navOrganizationId}>
+    <OrganizationLayout
+      id={id}
+      navOrganizationId={navOrganizationId}
+      page={page}
+    >
       <div className="space-y-6">
         <div className="flex justify-between items-center">
           <div className="mt-1 flex flex-col justify-start space-y-2 md:flex-row md:justify-between md:space-y-0">

diff --git a/src/pages/Organization/OrganizationPatients.tsx b/src/pages/Organization/OrganizationPatients.tsx
@@ -26,9 +26,14 @@ import OrganizationLayout from "./components/OrganizationLayout";
 interface Props {
   id: string;
   navOrganizationId?: string;
+  page: number;
 }
 
-export default function OrganizationPatients({ id, navOrganizationId }: Props) {
+export default function OrganizationPatients({
+  id,
+  navOrganizationId,
+  page,
+}: Props) {
   const { t } = useTranslation();
 
   const { qParams, Pagination, advancedFilter, resultsPerPage, updateQuery } =
@@ -95,6 +100,7 @@ export default function OrganizationPatients({ id, navOrganizationId }: Props) {
       id={id}
       navOrganizationId={navOrganizationId}
       setOrganization={setOrganization}
+      page={page}
     >
       <div className="space-y-6">
         <div className="flex justify-between items-center">

diff --git a/src/pages/Organization/OrganizationUsers.tsx b/src/pages/Organization/OrganizationUsers.tsx
@@ -29,9 +29,14 @@ import OrganizationLayout from "./components/OrganizationLayout";
 interface Props {
   id: string;
   navOrganizationId?: string;
+  page: number;
 }
 
-export default function OrganizationUsers({ id, navOrganizationId }: Props) {
+export default function OrganizationUsers({
+  id,
+  navOrganizationId,
+  page,
+}: Props) {
   const { qParams, updateQuery, Pagination, resultsPerPage } = useFilters({
     limit: 15,
     cacheBlacklist: ["name", "phone_number"],
@@ -102,7 +107,11 @@ export default function OrganizationUsers({ id, navOrganizationId }: Props) {
   }
 
   return (
-    <OrganizationLayout id={id} navOrganizationId={navOrganizationId}>
+    <OrganizationLayout
+      id={id}
+      navOrganizationId={navOrganizationId}
+      page={page}
+    >
       <div className="space-y-6">
         <div className="justify-between items-center flex flex-wrap">
           <div className="mt-1 flex flex-col justify-start space-y-2 md:flex-row md:justify-between md:space-y-0">

diff --git a/src/pages/Organization/OrganizationView.tsx b/src/pages/Organization/OrganizationView.tsx
@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
-import { Link } from "raviger";
-import { useEffect, useState } from "react";
+import { Link, navigate } from "raviger";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
@@ -23,12 +23,15 @@ import OrganizationLayout from "./components/OrganizationLayout";
 interface Props {
   id: string;
   navOrganizationId?: string;
+  page: number;
 }
 
-export default function OrganizationView({ id, navOrganizationId }: Props) {
+export default function OrganizationView({
+  id,
+  navOrganizationId,
+  page,
+}: Props) {
   const { t } = useTranslation();
-
-  const [page, setPage] = useState(1);
   const [searchQuery, setSearchQuery] = useState("");
   const limit = 12; // 3x4 grid
 
@@ -44,17 +47,17 @@ export default function OrganizationView({ id, navOrganizationId }: Props) {
     }),
   });
 
-  useEffect(() => {
-    setPage(1);
-  }, [id]);
-
   // Hack for the sidebar to work
   const baseUrl = navOrganizationId
-    ? `/organization/${navOrganizationId}`
+    ? `/organization/${id}`
     : `/organization/${id}`;
 
   return (
-    <OrganizationLayout id={id} navOrganizationId={navOrganizationId}>
+    <OrganizationLayout
+      id={id}
+      navOrganizationId={navOrganizationId}
+      page={page}
+    >
       <div className="space-y-6">
         <div className="flex flex-col justify-between items-start gap-4">
           <div className="mt-1 flex flex-col justify-start space-y-2 md:flex-row md:justify-between md:space-y-0">
@@ -70,8 +73,7 @@ export default function OrganizationView({ id, navOrganizationId }: Props) {
               placeholder="Search by name..."
               value={searchQuery}
               onChange={(e) => {
-                setSearchQuery(e.target.value);
-                setPage(1); // Reset to first page on search
+                setSearchQuery(e.target.value); // Reset to first page on search
               }}
               className="w-full"
             />
@@ -110,7 +112,7 @@ export default function OrganizationView({ id, navOrganizationId }: Props) {
                             </div>
                           </div>
                           <Button variant="link" asChild>
-                            <Link href={`${baseUrl}/children/${orgChild.id}`}>
+                            <Link href={`${baseUrl}/children/${orgChild.id}/1`}>
                               {t("view_details")}
                               <CareIcon
                                 icon="l-arrow-right"
@@ -142,7 +144,7 @@ export default function OrganizationView({ id, navOrganizationId }: Props) {
               <div className="flex justify-center">
                 <Pagination
                   data={{ totalCount: children.count }}
-                  onChange={(page, _) => setPage(page)}
+                  onChange={(page, _) => navigate(`${baseUrl}/${page}`)}
                   defaultPerPage={limit}
                   cPage={page}
                 />

diff --git a/src/pages/Organization/components/OrganizationLayout.tsx b/src/pages/Organization/components/OrganizationLayout.tsx
@@ -23,6 +23,7 @@ interface Props {
   navOrganizationId?: string;
   id: string;
   children: React.ReactNode;
+  page: number;
   setOrganization?: (org: Organization) => void;
 }
 
@@ -36,6 +37,7 @@ interface NavItem {
 export default function OrganizationLayout({
   id,
   navOrganizationId,
+  page,
   children,
   setOrganization,
 }: Props) {
@@ -71,25 +73,25 @@ export default function OrganizationLayout({
 
   const navItems: NavItem[] = [
     {
-      path: `${baseUrl}/${id}`,
+      path: `${baseUrl}/${id}/${page}`,
       title: "Organizations",
       icon: "d-hospital",
       visibility: hasPermission("can_view_organization", org.permissions),
     },
     {
-      path: `${baseUrl}/${id}/users`,
+      path: `${baseUrl}/${id}/${page}/users`,
       title: "Users",
       icon: "d-people",
       visibility: hasPermission("can_list_organization_users", org.permissions),
     },
     {
-      path: `${baseUrl}/${id}/patients`,
+      path: `${baseUrl}/${id}/${page}/patients`,
       title: "Patients",
       icon: "d-patient",
       visibility: hasPermission("can_list_patients", org.permissions),
     },
     {
-      path: `${baseUrl}/${id}/facilities`,
+      path: `${baseUrl}/${id}/${page}/facilities`,
       title: "Facilities",
       icon: "d-hospital",
       visibility: hasPermission("can_read_facility", org.permissions),

diff --git a/src/pages/UserDashboard.tsx b/src/pages/UserDashboard.tsx
@@ -126,7 +126,7 @@ export default function UserDashboard() {
             data-cy="organization-list"
           >
             {organizations.map((org) => (
-              <Link key={org.id} href={`/organization/${org.id}`}>
+              <Link key={org.id} href={`/organization/${org.id}/1`}>
                 <Card className="transition-all hover:shadow-md hover:border-primary/20">
                   <CardContent className="flex items-center gap-3 p-3 md:p-4">
                     <Avatar