Merge pull request #64 from Samstar10/fix-pagination-bug

Fix pagination bug
IntelliSOFT-Consulting · Aug 21, 2024 · 9e1058a · 9e1058a
2 parents b465eda + 26ea1c1
commit 9e1058a
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 46 deletions.
diff --git a/packages/esm-patient-list-app/package.json b/packages/esm-patient-list-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sjthc/esm-patient-list-app",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "license": "MPL-2.0",
   "description": "Custom Patient list microfrontend for the OpenMRS SPA",
   "browser": "dist/sjthc-esm-patient-list-app.js",
@@ -60,5 +60,5 @@
     "@types/uuid": "^9.0.4",
     "webpack": "^5.88.2"
   },
-  "gitHead": "dc93f7cfebbe379ad5b7f10b2aaab622e78f9b53"
+  "gitHead": "321c1823661c7acbaa32332828674f6c9e795e0c"
 }
diff --git a/packages/esm-patient-list-app/src/home-dashboard/home-dashboard.component.tsx b/packages/esm-patient-list-app/src/home-dashboard/home-dashboard.component.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import styles from "./home-dashboard.scss";
 import {useTranslation} from "react-i18next";
 import PatientQueueIllustration from "./patient-queue-illustration.component";
@@ -36,6 +36,7 @@ const PatientListHome: React.FC<PatientListHomeProps> = () => {
 
   const {
     isLoading,
+    backgroundLoading,
     data,
     setDateRange,
     dateRange,

diff --git a/packages/esm-patient-list-app/src/hooks/usePatientList.tsx b/packages/esm-patient-list-app/src/hooks/usePatientList.tsx
@@ -5,8 +5,9 @@ import {getPaddedDateString} from "../helpers/dateOps";
 export function usePatientList() {
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(false);
+  const [backgroundLoading, setBackgroundLoading] = useState(false);
   const [currentPaginationState, setCurrentPaginationState] = useState({
-    size: 100,
+    size: 50,
     page: 0
   });
   const [dateRange, setDateRange] = React.useState({
@@ -15,63 +16,96 @@ export function usePatientList() {
   });
   const [totalPatients, setTotalPatients] = useState(0);
 
-  const getAllClients = async ({page, size}) => {
+  const getAllClients = async () => {
     try {
-      if (page === 0) setLoading(true);
-
-      let startString =dateRange.start;
-      let endString =dateRange.end;
-
-      if(typeof dateRange.start === "object"){
+      let startString = dateRange.start;
+      let endString = dateRange.end;
+
+      if (typeof dateRange.start === "object") {
         const dateObject = new Date(dateRange.start);
         startString = getPaddedDateString(dateObject);
       }
-
-      if(typeof dateRange.end === "object"){
+  
+      if (typeof dateRange.end === "object") {
         const dateObject = new Date(dateRange.end);
-        endString = getPaddedDateString(dateObject)
+        endString = getPaddedDateString(dateObject);
       }
-
-
-      const url = `/ws/rest/v1/ehospital/allClients?startDate=${startString}&endDate=${endString}&page=${page}&size=${size}`;
-      const { data } = await openmrsFetch(url);
-
-      setData([])
-      if (data.results.length > 0) {
-        setData(prev => [...prev, ...data.results.map(result => ({
-          ...result,
-          fullName: result?.name,
-          age: result?.age,
-          gender: result?.sex,
-          openmrsID: result.identifiers.find(item =>  item.identifierType.toLowerCase()?.includes("openmrs"))?.identifier,
-          opdNumber: result.identifiers.find(item =>  item.identifierType.toLowerCase()?.includes("opd"))?.identifier,
-        }))]);
-        setTotalPatients(data.totalPatients);
+
+      let currentPage = 0;
+      let allData = [];
+      let hasMoreData = true;
+      let totalFetchedPatients = 0;
+
+      setLoading(true);
+
+      const firstBatchUrl = `/ws/rest/v1/ehospital/allClients?startDate=${startString}&endDate=${endString}&page=0&size=50`;
+      const firstBatchResponse = await openmrsFetch(firstBatchUrl);
+
+      const firstBatchData = firstBatchResponse.data.results.map(result => ({
+        ...result,
+        fullName: result?.name,
+        age: result?.age,
+        gender: result?.sex,
+        openmrsID: result.identifiers.find(item => item.identifierType.toLowerCase()?.includes("openmrs"))?.identifier,
+        opdNumber: result.identifiers.find(item => item.identifierType.toLowerCase()?.includes("opd"))?.identifier,
+      }));
+
+      setData(firstBatchData);
+      totalFetchedPatients += firstBatchData.length;
+      if (firstBatchData.length < 50) {
+        setTotalPatients(firstBatchResponse.data.totalPatients);
       }
-
-      if (data.results.length === size)
-        setCurrentPaginationState(prev => ({
-          ...prev,
-          page: ++prev.page
-        }))
-
+      setLoading(false);
+
+      if (firstBatchData.length === 50) {
+        setBackgroundLoading(true);
+        currentPage += 1;
+
+        while (hasMoreData) {
+          const url = `/ws/rest/v1/ehospital/allClients?startDate=${startString}&endDate=${endString}&page=${currentPage}&size=50`;
+          const response = await openmrsFetch(url);
+
+          const fetchedData = response.data.results.map(result => ({
+            ...result,
+            fullName: result?.name,
+            age: result?.age,
+            gender: result?.sex,
+            openmrsID: result.identifiers.find(item => item.identifierType.toLowerCase()?.includes("openmrs"))?.identifier,
+            opdNumber: result.identifiers.find(item => item.identifierType.toLowerCase()?.includes("opd"))?.identifier,
+          }));
+
+          allData = [...allData, ...fetchedData];
+          totalFetchedPatients += fetchedData.length;
+          setData(prevData => [...prevData, ...fetchedData]);
+          currentPage += 1;
+
+          if (fetchedData.length < 50) {
+            hasMoreData = false;
+          }
+        }
+
+        setTotalPatients(totalFetchedPatients);
+        setBackgroundLoading(false);
+      }
+
     } catch (e) {
-      return e
-    } finally {
+      console.error(e);
       setLoading(false);
+      setBackgroundLoading(false);
     }
-  }
+  };
 
   useEffect(() => {
     setCurrentPaginationState(prev => ({...prev, page: 0}))
-    getAllClients({...currentPaginationState})
+    getAllClients();
   }, [dateRange]);
 
 
   return {
     data,
     patient: data,
     isLoading: loading,
+    backgroundLoading,
     dateRange,
     setDateRange,
     getAllClients,

diff --git a/packages/esm-patient-visits-report-app/package.json b/packages/esm-patient-visits-report-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sjthc/esm-patient-visits-report-app",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "license": "MPL-2.0",
   "description": "Custom Patient Visits Reports microfrontend for the OpenMRS SPA",
   "browser": "dist/sjthc-esm-patient-visits-report-app.js",
@@ -60,5 +60,5 @@
     "@types/uuid": "^9.0.4",
     "webpack": "^5.88.2"
   },
-  "gitHead": "81ac4421d6e276613f81e351c9f0512c27d26d20"
+  "gitHead": "837fc06789dabccc8bbc80af708c504fd6008f1f"
 }
diff --git a/packages/esm-patient-visits-report-app/src/components/reports-table.component.tsx b/packages/esm-patient-visits-report-app/src/components/reports-table.component.tsx
@@ -23,13 +23,24 @@ interface tableProps {
     end: Date,
   },
   rowData: any;
+  currentPage: number;
+  itemsPerPage: number;
+  setCurrentPage: Dispatch<SetStateAction<number>>;
+  setItemsPerPage: Dispatch<SetStateAction<number>>
 }
 
 
-const ReportsTableComponent: React.FC<tableProps> = ({paginatedData, tableData, dateRange, rowData}) => {
+const ReportsTableComponent: React.FC<tableProps> = ({
+  paginatedData, 
+  tableData, 
+  dateRange, 
+  rowData,
+  currentPage,
+  itemsPerPage,
+  setCurrentPage,
+  setItemsPerPage
+}) => {
   const {t} = useTranslation();
-  const [currentPage, setCurrentPage] = useState(1);
-  const [itemsPerPage, setItemsPerPage] = useState(10);
 
   return (
     <div className={styles.datatable}>

diff --git a/packages/esm-patient-visits-report-app/src/home-dashboard/home-dashboard.component.tsx b/packages/esm-patient-visits-report-app/src/home-dashboard/home-dashboard.component.tsx
@@ -327,6 +327,10 @@ const PatientVisitsReportHome: React.FC<PatientVisistsReportHomeProps> = () => {
                       tableData={tableData}
                       paginatedData={paginatedData}
                       rowData={rowData}
+                      currentPage={currentPage}
+                      itemsPerPage={itemsPerPage}
+                      setCurrentPage={setCurrentPage}
+                      setItemsPerPage={setItemsPerPage}
                     />
                   ) : (
                     <ReportsGraphicalChartComponent chartData={chartData} />