Contd Changes for ESLint react-hooks/exhaustive-deps

UCSF-IGHS · Jun 12, 2024 · 502779e · 502779e
1 parent 1da182d
commit 502779e
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 76 deletions.
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -7,5 +7,5 @@ set -e # die on error
 # yarn turbo run extract-translations // commented because it creates new translations files that are not related to the commit
 # yarn pretty-quick --staged
 
-#npx lint-staged
-yarn turbo run extract-translations
+npx lint-staged
+#yarn turbo run extract-translations
diff --git a/...-treatment-app/src/views/home-dashboard/lab-results/tabs/viral-load-results.component.tsx b/...-treatment-app/src/views/home-dashboard/lab-results/tabs/viral-load-results.component.tsx
@@ -52,7 +52,7 @@ const ViralLoadResultsList: React.FC<ViralLoadResultsListProps> = () => {
       setPatientCount(data.total);
       setIsLoading(false);
     });
-  }, [page, pageSize]);
+  }, [nextOffSet, page, pageSize]);
 
   useEffect(() => {
     let rows = [];
@@ -92,6 +92,36 @@ const ViralLoadResultsList: React.FC<ViralLoadResultsListProps> = () => {
     setAllRows(rows);
   }, [patients, patientToViralLoadMap]);
 
+  const fetchPatientLastViralEncounters = useCallback(
+    async (patientUuid) => {
+      let latestViralEncounter = {
+        result: '--',
+        date: '--',
+        encounterUuid: '',
+      };
+      const query = `encounterType=${encounterTypes.ViralLoadResultsEncounter_UUID}&patient=${patientUuid}`;
+      const viralResults = await openmrsFetch(`/ws/rest/v1/encounter?${query}&v=${encounterRepresentation}`);
+      if (viralResults.data.results?.length > 0) {
+        const sortedEncounters = viralResults.data.results.sort(
+          (firstEncounter, secondEncounter) =>
+            new Date(secondEncounter.encounterDatetime).getTime() -
+            new Date(firstEncounter.encounterDatetime).getTime(),
+        );
+        const lastEncounter = sortedEncounters[0];
+
+        latestViralEncounter.result = getObsFromEncounter(lastEncounter, obsConcepts.ViralLoadResult_UUID);
+        latestViralEncounter.date = getObsFromEncounter(lastEncounter, obsConcepts.ViralLoadResultDate_UUID, true);
+        latestViralEncounter.encounterUuid = lastEncounter.uuid;
+      }
+      return latestViralEncounter;
+    },
+    [
+      encounterTypes.ViralLoadResultsEncounter_UUID,
+      obsConcepts.ViralLoadResult_UUID,
+      obsConcepts.ViralLoadResultDate_UUID,
+    ],
+  );
+
   useEffect(() => {
     const patientToviralLoadResultsPromises = patients.map((patient) =>
       fetchPatientLastViralEncounters(patient.resource.id),
@@ -106,7 +136,7 @@ const ViralLoadResultsList: React.FC<ViralLoadResultsListProps> = () => {
         })),
       );
     });
-  }, [patients]);
+  }, [fetchPatientLastViralEncounters, patients]);
 
   const handleSearch = useCallback(
     (searchTerm) => {
@@ -115,34 +145,9 @@ const ViralLoadResultsList: React.FC<ViralLoadResultsListProps> = () => {
       setFilteredResults(filtrate);
       return true;
     },
-    [searchTerm],
+    [allRows],
   );
-
-  const addNewPatient = () => navigate({ to: '${openmrsSpaBase}/patient-registration' });
   const getPatientURL = (patientUuid) => `/openmrs/spa/patient/${patientUuid}/chart/hts-summary`;
-
-  async function fetchPatientLastViralEncounters(patientUuid: string) {
-    let latestViralEncounter = {
-      result: '--',
-      date: '--',
-      encounterUuid: '',
-    };
-    const query = `encounterType=${encounterTypes.ViralLoadResultsEncounter_UUID}&patient=${patientUuid}`;
-    const viralResults = await openmrsFetch(`/ws/rest/v1/encounter?${query}&v=${encounterRepresentation}`);
-    if (viralResults.data.results?.length > 0) {
-      const sortedEncounters = viralResults.data.results.sort(
-        (firstEncounter, secondEncounter) =>
-          new Date(secondEncounter.encounterDatetime).getTime() - new Date(firstEncounter.encounterDatetime).getTime(),
-      );
-      const lastEncounter = sortedEncounters[0];
-
-      latestViralEncounter.result = getObsFromEncounter(lastEncounter, obsConcepts.ViralLoadResult_UUID);
-      latestViralEncounter.date = getObsFromEncounter(lastEncounter, obsConcepts.ViralLoadResultDate_UUID, true);
-      latestViralEncounter.encounterUuid = lastEncounter.uuid;
-    }
-    return latestViralEncounter;
-  }
-
   return (
     <>
       {isLoading ? (

diff --git a/packages/esm-ohri-core-app/src/ohri-dashboard/ohri-dashboard.component.tsx b/packages/esm-ohri-core-app/src/ohri-dashboard/ohri-dashboard.component.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState, useCallback } from 'react';
 import { attach, detach, ExtensionSlot, isDesktop, useExtensionSlotMeta, useLayoutType } from '@openmrs/esm-framework';
 import styles from './ohri-dashboard.scss';
 import { useParams } from 'react-router-dom';
@@ -11,13 +11,17 @@ const OHRIDashboard = () => {
   const [currentDashboard, setCurrentDashboard] = useState(null);
   const layout = useLayoutType();
 
-  useEffect(() => {
+  const updateCurrentDashboard = useCallback(() => {
     if (view) {
       setCurrentDashboard(dashboards.find((db) => db.name == view));
     } else if (!currentDashboard) {
       setCurrentDashboard(dashboards[0]);
     }
-  }, [view, dashboards]);
+  }, [view, dashboards, currentDashboard]);
+
+  useEffect(() => {
+    updateCurrentDashboard();
+  }, [view, dashboards, currentDashboard, updateCurrentDashboard]);
 
   useEffect(() => {
     if (!isDesktop(layout)) {
@@ -26,7 +30,7 @@ const OHRIDashboard = () => {
     return () => detach('nav-menu-slot', 'ohri-nav-items-ext');
   }, [layout]);
 
-  useEffect(() => {
+  const updateDashboards = useCallback(() => {
     const programSpecificLinks = metaFolders ? Object.values(metaFolders).filter((link) => link.isLink) : [];
     const linksWithDashboardMeta = [
       ...Object.values(metaLinks).filter((link) => Object.keys(link).length),
@@ -35,7 +39,11 @@ const OHRIDashboard = () => {
     if (linksWithDashboardMeta.length) {
       setDashboards([...dashboards, ...linksWithDashboardMeta]);
     }
-  }, [metaLinks, metaFolders]);
+  }, [metaLinks, metaFolders, dashboards]);
+
+  useEffect(() => {
+    updateDashboards();
+  }, [metaLinks, metaFolders, updateDashboards]);
 
   const state = useMemo(() => {
     if (currentDashboard) {
@@ -46,17 +54,15 @@ const OHRIDashboard = () => {
 
   return (
     <div className={styles.dashboardContainer}>
-      {Object.values(metaFolders).map((f, index) => {
-        return (
-          <GroupAbleMenuItem
-            groupSlot={f.slot}
-            dashboards={dashboards}
-            setDashboards={setDashboards}
-            updateDashboardState={index == Object.keys(metaFolders).length - 1}
-            key={index}
-          />
-        );
-      })}
+      {Object.values(metaFolders).map((f, index) => (
+        <GroupAbleMenuItem
+          groupSlot={f.slot}
+          dashboards={dashboards}
+          setDashboards={setDashboards}
+          updateDashboardState={index === Object.keys(metaFolders).length - 1}
+          key={index}
+        />
+      ))}
       {isDesktop(layout) && <ExtensionSlot name="ohri-nav-items-slot" key={layout} />}
       <div className={` ${styles.dashboardContent}`}>
         {currentDashboard && <ExtensionSlot name={currentDashboard.slot} state={state} />}
@@ -67,14 +73,15 @@ const OHRIDashboard = () => {
 
 const GroupAbleMenuItem = ({ groupSlot, dashboards, setDashboards, updateDashboardState }) => {
   const meta = useExtensionSlotMeta(groupSlot);
+
   useEffect(() => {
     if (meta && Object.keys(meta).length) {
-      dashboards.push(...Object.values(meta).filter((entry) => Object.keys(entry).length));
-      updateDashboardState && setDashboards([...dashboards]);
+      const newDashboards = [...dashboards, ...Object.values(meta).filter((entry) => Object.keys(entry).length)];
+      updateDashboardState && setDashboards(newDashboards);
     }
-  }, [meta]);
+  }, [dashboards, meta, setDashboards, updateDashboardState]);
 
-  return <></>;
+  return null;
 };
 
 export default OHRIDashboard;
diff --git a/packages/esm-ohri-pmtct-app/src/views/mch-summary/tabs/hiv-exposed-infant.component.tsx b/packages/esm-ohri-pmtct-app/src/views/mch-summary/tabs/hiv-exposed-infant.component.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   ExpandableList,
@@ -25,6 +25,17 @@ const HivExposedInfant: React.FC<{
   const [relativeToIdentifierMap, setRelativeToIdentifierMap] = useState([]);
   const { formNames, formUuids, encounterTypes, obsConcepts } = useConfig();
 
+  const getParentRelationships = useCallback(async () => {
+    let relationships = [];
+    const relationshipsData = await fetchPatientRelationships(patientUuid);
+    if (relationshipsData?.length) {
+      relationshipsData.forEach((item) => {
+        relationships.push(item);
+      });
+    }
+    setRelatives(relationships);
+  }, [patientUuid]);
+
   useEffect(() => {
     getParentRelationships();
   }, [getParentRelationships]);
@@ -131,35 +142,28 @@ const HivExposedInfant: React.FC<{
     },
   ];
 
-  async function getParentRelationships() {
-    let relationships = [];
-    const relationshipsData = await fetchPatientRelationships(patientUuid);
-    if (relationshipsData?.length) {
-      relationshipsData.forEach((item) => {
-        relationships.push(item);
-      });
-    }
-    setRelatives(relationships);
-  }
+  const getChildPTracker = useCallback(
+    async (patientUuid) => {
+      let pTrackerMap = { patientId: '', pTrackerId: '--' };
+      const identifiers = await fetchPatientIdentifiers(patientUuid);
+      if (identifiers) {
+        pTrackerMap.pTrackerId = identifiers.find(
+          (id) => id.identifierType.uuid === encounterTypes.PTrackerIdentifierType,
+        ).identifier;
+        pTrackerMap.patientId = patientUuid;
+      }
+      return pTrackerMap;
+    },
+    [encounterTypes.PTrackerIdentifierType],
+  );
 
   useEffect(() => {
     const relativeToPtrackerPromises = relatives.map((relative) => getChildPTracker(relative.personA.uuid));
     Promise.all(relativeToPtrackerPromises).then((values) => {
       setRelativeToIdentifierMap(values.map((value) => ({ patientId: value.patientId, pTrackerId: value.pTrackerId })));
     });
-  }, [relatives]);
+  }, [getChildPTracker, relatives]);
 
-  async function getChildPTracker(patientUuid: string) {
-    let pTrackerMap = { patientId: '', pTrackerId: '--' };
-    const identifiers = await fetchPatientIdentifiers(patientUuid);
-    if (identifiers) {
-      pTrackerMap.pTrackerId = identifiers.find(
-        (id) => id.identifierType.uuid === encounterTypes.PTrackerIdentifierType,
-      ).identifier;
-      pTrackerMap.patientId = patientUuid;
-    }
-    return pTrackerMap;
-  }
   const parentRelationships: familyItemProps[] = useMemo(() => {
     let items = [];
     relatives.forEach((relative) => {

diff --git a/yarn.lock b/yarn.lock
@@ -6841,9 +6841,9 @@ __metadata:
   linkType: hard
 
 "caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001400, caniuse-lite@npm:^1.0.30001426":
-  version: 1.0.30001517
-  resolution: "caniuse-lite@npm:1.0.30001517"
-  checksum: 3b9aa01e5e1c112bbe15d653cf4f909748b3ede87613b4381306c3510dab1adb0b09594febdacdf0eb963d8f0d37dcb3b88cea12c579ed14a9ede4581544c7c4
+  version: 1.0.30001632
+  resolution: "caniuse-lite@npm:1.0.30001632"
+  checksum: 80b8b75007e525c30ec204adff4a16797a83ac9faeec33ed20ad14b55239c2721693f248389ee3bc9a76f8fd0182870872af7a9c80d48484a3eab7c5e8af173f
   languageName: node
   linkType: hard