Bindu | Fix pagination issue with Vitals display control in IPD dashb…

…oard (#252)
Bahmni · Dec 16, 2024 · 73528c5 · 73528c5
1 parent 531425f
commit 73528c5
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 8 deletions.
diff --git a/src/features/DisplayControls/Vitals/components/BiometricsHistory.jsx b/src/features/DisplayControls/Vitals/components/BiometricsHistory.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
   DataTable,
   Table,
@@ -14,6 +14,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { abnormalHeader } from "../utils/VitalsUtils";
 
 const BiometricsHistory = ({ biometricsHistory, biometricsHistoryHeaders }) => {
+  const [rows, setRows] = useState([]);
   const [biometricsHistoryPage, setBiometricsHistoryPage] = useState(1);
   const [biometricsHistoryPageSize, setBiometricsHistoryPageSize] = useState(5);
   const biometricsTitle = (
@@ -25,19 +26,26 @@ const BiometricsHistory = ({ biometricsHistory, biometricsHistoryHeaders }) => {
   const intl = useIntl();
 
   const changeBiometricsPaginationState = (pageInfo) => {
-    if (biometricsHistoryPage != pageInfo.page) {
+    if (biometricsHistoryPage !== pageInfo.page) {
       setBiometricsHistoryPage(pageInfo.page);
     }
-    if (biometricsHistoryPageSize != pageInfo.pageSize) {
+    if (biometricsHistoryPageSize !== pageInfo.pageSize) {
       setBiometricsHistoryPageSize(pageInfo.pageSize);
     }
   };
 
+  useEffect(() => {
+    const start = (biometricsHistoryPage - 1) * biometricsHistoryPageSize;
+    const end = start + biometricsHistoryPageSize;
+    const data = biometricsHistory.slice(start, end);
+    setRows(data);
+  }, [biometricsHistoryPage, biometricsHistoryPageSize]);
+
   return (
     <>
       <div className="biometrics-history-title">{biometricsTitle}</div>
       <DataTable
-        rows={biometricsHistory}
+        rows={rows}
         headers={biometricsHistoryHeaders}
         useZebraStyles={true}
       >

diff --git a/src/features/DisplayControls/Vitals/components/VitalsHistory.jsx b/src/features/DisplayControls/Vitals/components/VitalsHistory.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState} from "react";
 import {
   DataTable,
   Table,
@@ -14,6 +14,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { abnormalHeader } from "../utils/VitalsUtils";
 
 const VitalsHistory = ({ vitalsHistory, vitalsHistoryHeaders }) => {
+  const [rows, setRows] = useState([]);
   const [vitalsHistoryPage, setVitalsHistoryPage] = useState(1);
   const [vitalsHistoryPageSize, setVitalsHistoryPageSize] = useState(5);
   const vitalsTitle = (
@@ -22,19 +23,25 @@ const VitalsHistory = ({ vitalsHistory, vitalsHistoryHeaders }) => {
   const intl = useIntl();
 
   const changeVitalsPaginationState = (pageInfo) => {
-    if (vitalsHistoryPage != pageInfo.page) {
+    if (vitalsHistoryPage !== pageInfo.page) {
       setVitalsHistoryPage(pageInfo.page);
     }
-    if (vitalsHistoryPageSize != pageInfo.pageSize) {
+    if (vitalsHistoryPageSize !== pageInfo.pageSize) {
       setVitalsHistoryPageSize(pageInfo.pageSize);
     }
   };
+  useEffect(() => {
+    const start = (vitalsHistoryPage - 1) * vitalsHistoryPageSize;
+    const end = start + vitalsHistoryPageSize;
+    const data = vitalsHistory.slice(start, end);
+    setRows(data);
+  }, [vitalsHistoryPage, vitalsHistoryPageSize]);
 
   return (
     <>
       <div className="vitals-history-title">{vitalsTitle}</div>
       <DataTable
-        rows={vitalsHistory}
+        rows={rows}
         headers={vitalsHistoryHeaders}
         useZebraStyles={true}
       >