OHRI-2295 Update OHRI endpoints to use SWR

packages/esm-commons-lib/src/api.resource.ts

@@ -1,4 +1,4 @@
-import { openmrsFetch } from '@openmrs/esm-framework';
+import { fhirBaseUrl, openmrsFetch } from '@openmrs/esm-framework';
 import dayjs from 'dayjs';
 import {
   finalHIVCodeConcept,
@@ -358,12 +358,11 @@ export async function getCohortList(
           `/ws/rest/v1/encounter?encounterType=${encounterType}&patient=${member.patient.uuid}&v=${encounterRepresentation}`,
         ).then(({ data }) => {
           if (data.results.length) {
-            const sortedEncounters = data.results
-              .sort(
-                (firstEncounter, secondEncounter) =>
-                  new Date(secondEncounter.encounterDatetime).getTime() -
-                  new Date(firstEncounter.encounterDatetime).getTime(),
-              );
+            const sortedEncounters = data.results.sort(
+              (firstEncounter, secondEncounter) =>
+                new Date(secondEncounter.encounterDatetime).getTime() -
+                new Date(firstEncounter.encounterDatetime).getTime(),
+            );
             return sortedEncounters[0];
           }
           return null;

packages/esm-commons-lib/src/components/banner-tags/patient-status-tag.component.tsx

@@ -1,18 +1,24 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { Tag } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import { isPatientHivPositive } from './patientHivStatus';
+import { finalHIVCodeConcept, finalPositiveHIVValueConcept } from '../../constants';
+import { usePatientsFinalHIVStatus } from './usePatientHivStatus';
 
 export function PatientStatusBannerTag({ patientUuid }) {
   const { t } = useTranslation();
-  const [hivPositive, setHivPositive] = useState(false);
+  const { isLoading, hivStatus, error } = usePatientsFinalHIVStatus(
+    patientUuid,
+    finalHIVCodeConcept,
+    finalPositiveHIVValueConcept,
+  );
 
-  useEffect(() => {
-    isPatientHivPositive(patientUuid).then((result) => setHivPositive(result));
-  }, [hivPositive, patientUuid]);
+  if (isLoading) {
+    return <p>{t('loading', 'Loading...')}</p>;
+  }
 
-  //TODO: Improve refresh time
-  // forceRerender();
+  if (error) {
+    return <p>{t('error', 'Error...')}</p>;
+  }
 
-  return <>{hivPositive && <Tag type="red">{t('hivPositive', 'HIV Positive')}</Tag>}</>;
+  return <>{hivStatus && <Tag type="red">{t('hivPositive', 'HIV Positive')}</Tag>}</>;
 }

packages/esm-commons-lib/src/components/banner-tags/patient-status-tag.test.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { PatientStatusBannerTag } from './patient-status-tag.component';
+import { usePatientsFinalHIVStatus } from './usePatientHivStatus';
+
+const mockedUsePatientsFinalHIVStatus = jest.mocked(usePatientsFinalHIVStatus);
+
+jest.mock('./usePatientHivStatus', () => {
+  const originalModule = jest.requireActual('./usePatientHivStatus');
+
+  return {
+    ...originalModule,
+    usePatientsFinalHIVStatus: jest.fn().mockImplementation(() => ({
+      hivStatus: true,
+      isLoading: false,
+    })),
+  };
+});
+
+describe('PatientStatusBannerTag', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const samplePatientUuid = '703AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
+
+  it('renders red tag when patient is HIV positive', async () => {
+    render(<PatientStatusBannerTag patientUuid={samplePatientUuid} />);
+    expect(screen.getByText(/HIV Positive/i)).toBeInTheDocument();
+  });
+
+  it('does not render red tag when patient is not HIV positive', async () => {
+    mockedUsePatientsFinalHIVStatus.mockReturnValue({ hivStatus: false, isLoading: false, error: null });
+    render(<PatientStatusBannerTag patientUuid={samplePatientUuid} />);
+    expect(screen.queryByText('HIV Positive')).not.toBeInTheDocument();
+  });
+});

packages/esm-commons-lib/src/components/banner-tags/usePatientHivStatus.ts

@@ -0,0 +1,16 @@
+import { fhirBaseUrl, openmrsFetch } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+
+export function usePatientsFinalHIVStatus(
+  patientUuid: string,
+  finalHIVCodeConcept: string,
+  finalPositiveHIVValueConcept: string,
+) {
+  const url = `${fhirBaseUrl}/Observation?code=${finalHIVCodeConcept}&value-concept=${finalPositiveHIVValueConcept}&patient=${patientUuid}&_sort=-date&_count=1`;
+  const { data, error, isLoading, mutate } = useSWR<{ data: any }, Error>(url, openmrsFetch);
+
+  const hivStatusResult = data?.data?.entry[0].resource.valueCodeableConcept.coding[0].display;
+  const hivStatus = hivStatusResult.toLowerCase().includes('positive') ? true : false;
+
+  return { hivStatus: hivStatus, isLoading: isLoading, error: error };
+}

packages/esm-commons-lib/src/components/cohort-patient-list/helpers.tsx

@@ -5,9 +5,9 @@ import dayjs from 'dayjs';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { AddPatientToListOverflowMenuItem } from '../modals/add-patient-to-list-modal.component';
-import { fetchPatientLastEncounter } from '../../api.resource';
 import { launchForm } from '../../utils/ohri-forms-commons';
 import { navigate, WorkspaceContainer } from '@openmrs/esm-framework';
+import { useLastEncounter } from '../../hooks/useLastEncounter';
 
 interface PatientMetaConfig {
   location: { name: string };
@@ -38,23 +38,25 @@ export const LaunchableFormMenuItem = ({
 }) => {
   const [actionText, setActionText] = useState(launchableForm.actionText);
   const [encounterUuid, setEncounterUuid] = useState(null);
-  const [isLoading, setIsLoading] = useState(false);
   const continueEncounterActionText = launchableForm.actionText || 'Continue encounter ';
+  const { lastEncounter, isLoading } = useLastEncounter(patientUuid, encounterType);
 
   useEffect(() => {
     if (launchableForm.editLatestEncounter && encounterType && !encounterUuid) {
-      setIsLoading(true);
-      fetchPatientLastEncounter(patientUuid, encounterType).then((latestEncounter) => {
-        if (latestEncounter) {
-          setActionText(continueEncounterActionText);
-          setEncounterUuid(latestEncounter.uuid);
-        }
-        setIsLoading(false);
-      });
-    } else {
-      setIsLoading(false);
+      if (!isLoading && lastEncounter) {
+        setActionText(continueEncounterActionText);
+        setEncounterUuid(lastEncounter.uuid);
+      }
     }
-  }, [continueEncounterActionText, encounterType, encounterUuid, launchableForm.editLatestEncounter, patientUuid]);
+  }, [
+    continueEncounterActionText,
+    encounterType,
+    encounterUuid,
+    launchableForm.editLatestEncounter,
+    patientUuid,
+    lastEncounter,
+    isLoading,
+  ]);
 
   return (
     <>
@@ -79,21 +81,15 @@ export const LaunchableFormMenuItem = ({
 export const ViewSummaryMenuItem = ({ patientUuid, ViewSummary, encounterType }) => {
   const [actionText, setActionText] = useState(ViewSummary.actionText);
   const [encounterUuid, setEncounterUuid] = useState(null);
-  const [isLoading, setIsLoading] = useState(false);
   const viewSummaryActionText = ViewSummary.actionText || 'View Summary ';
+  const { lastEncounter, isLoading } = useLastEncounter(patientUuid, encounterType);
 
   useEffect(() => {
     if (ViewSummary.editLatestEncounter && encounterType && !encounterUuid) {
-      setIsLoading(true);
-      fetchPatientLastEncounter(patientUuid, encounterType).then((latestEncounter) => {
-        if (latestEncounter) {
-          setActionText(viewSummaryActionText);
-          setEncounterUuid(latestEncounter.uuid);
-        }
-        setIsLoading(false);
-      });
-    } else {
-      setIsLoading(false);
+      if (!isLoading && lastEncounter) {
+        setActionText(viewSummaryActionText);
+        setEncounterUuid(lastEncounter.uuid);
+      }
     }
   }, [ViewSummary.editLatestEncounter, encounterType, encounterUuid, patientUuid, viewSummaryActionText]);
 
@@ -114,24 +110,19 @@ export const ViewSummaryMenuItem = ({ patientUuid, ViewSummary, encounterType })
     </>
   );
 };
+
 export const ViewTptSummaryMenuItem = ({ patientUuid, ViewTptSummary, encounterType }) => {
   const [actionText, setActionText] = useState(ViewTptSummary.actionText);
   const [encounterUuid, setEncounterUuid] = useState(null);
-  const [isLoading, setIsLoading] = useState(false);
   const viewTptSummaryActionText = ViewTptSummary.actionText || 'View Summary ';
+  const { lastEncounter, isLoading } = useLastEncounter(patientUuid, encounterType);
 
   useEffect(() => {
     if (ViewTptSummary.editLatestEncounter && encounterType && !encounterUuid) {
-      setIsLoading(true);
-      fetchPatientLastEncounter(patientUuid, encounterType).then((latestEncounter) => {
-        if (latestEncounter) {
-          setActionText(viewTptSummaryActionText);
-          setEncounterUuid(latestEncounter.uuid);
-        }
-        setIsLoading(false);
-      });
-    } else {
-      setIsLoading(false);
+      if (!isLoading && lastEncounter) {
+        setActionText(viewTptSummaryActionText);
+        setEncounterUuid(lastEncounter.uuid);
+      }
     }
   }, [ViewTptSummary.editLatestEncounter, encounterType, patientUuid, encounterUuid, viewTptSummaryActionText]);
 
@@ -152,6 +143,7 @@ export const ViewTptSummaryMenuItem = ({ patientUuid, ViewTptSummary, encounterT
     </>
   );
 };
+
 export function consolidatatePatientMeta(rawPatientMeta, form, config: PatientMetaConfig) {
   const {
     isDynamicCohort,

packages/esm-commons-lib/src/index.ts

@@ -5,7 +5,7 @@ export * from './constants';
 export * from './api.resource';
 export * from './types';
 export * from './components/banner-tags/patient-status-tag.component';
-export * from './components/banner-tags/patientHivStatus';
+export * from './components/banner-tags/usePatientHivStatus';
 export * from './components/data-table/o-table.component';
 export * from './components/empty-state/empty-data-illustration.component';
 export * from './components/empty-state/empty-state-comingsoon.component';