To display HIV Status badge appear on the Infant banner

UCSF-IGHS · Oct 18, 2024 · 9d1efa3 · 9d1efa3
1 parent cb86c63
commit 9d1efa3
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 7 deletions.
diff --git a/packages/esm-commons-lib/src/components/banner-tags/.patient-status-tag.test.tsx b/packages/esm-commons-lib/src/components/banner-tags/.patient-status-tag.test.tsx
@@ -3,12 +3,17 @@ import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { PatientStatusBannerTag } from './patient-status-tag.component';
 import { usePatientHivStatus } from './patientHivStatus';
+import { usePatientOutcome } from './useInfantFinalOutcome';
 import { usePatientFamilyNames } from './usePatientFamilyNames';
 
 jest.mock('./patientHivStatus', () => ({
   usePatientHivStatus: jest.fn(),
 }));
 
+jest.mock('./useInfantFinalOutcome', () => ({
+  usePatientOutcome: jest.fn(),
+}));
+
 jest.mock('./usePatientFamilyNames', () => ({
   usePatientFamilyNames: jest.fn(),
 }));
@@ -27,6 +32,10 @@ describe('PatientStatusBannerTag', () => {
       isError: false,
     });
 
+    (usePatientOutcome as jest.Mock).mockReturnValue({
+      patientOutcome: null,
+    });
+
     (usePatientFamilyNames as jest.Mock).mockReturnValue({
       childrenNames: [],
       motherName: null,
@@ -37,7 +46,6 @@ describe('PatientStatusBannerTag', () => {
     });
 
     const { container } = render(<PatientStatusBannerTag patientUuid={hivPositiveSampleUuid} />);
-
     expect(container.firstChild).toBeNull();
   });
 
@@ -48,6 +56,10 @@ describe('PatientStatusBannerTag', () => {
       isError: false,
     });
 
+    (usePatientOutcome as jest.Mock).mockReturnValue({
+      patientOutcome: 'Still in Care',
+    });
+
     (usePatientFamilyNames as jest.Mock).mockReturnValue({
       childrenNames: [],
       motherName: null,
@@ -59,6 +71,7 @@ describe('PatientStatusBannerTag', () => {
 
     render(<PatientStatusBannerTag patientUuid={hivPositiveSampleUuid} />);
     expect(screen.getByText('HIV Positive')).toBeInTheDocument();
+    expect(screen.getByText('Still in Care')).toBeInTheDocument();
   });
 
   it('should display the correct tag for HIV negative status', () => {
@@ -68,6 +81,10 @@ describe('PatientStatusBannerTag', () => {
       isError: false,
     });
 
+    (usePatientOutcome as jest.Mock).mockReturnValue({
+      patientOutcome: 'Confirmed HIV negative infant (discharged from PMTCT)',
+    });
+
     (usePatientFamilyNames as jest.Mock).mockReturnValue({
       childrenNames: [],
       motherName: null,
@@ -79,6 +96,7 @@ describe('PatientStatusBannerTag', () => {
 
     render(<PatientStatusBannerTag patientUuid={hivPositiveSampleUuid} />);
     expect(screen.getByText('HIV Negative')).toBeInTheDocument();
+    expect(screen.getByText('Confirmed HIV negative infant (discharged from PMTCT)')).toBeInTheDocument();
   });
 
   it('should display mother’s name on the Infant banner', () => {
@@ -88,6 +106,10 @@ describe('PatientStatusBannerTag', () => {
       isError: false,
     });
 
+    (usePatientOutcome as jest.Mock).mockReturnValue({
+      patientOutcome: 'Still in Care',
+    });
+
     (usePatientFamilyNames as jest.Mock).mockReturnValue({
       childrenNames: [],
       motherName: 'Jane Doe',
@@ -108,6 +130,10 @@ describe('PatientStatusBannerTag', () => {
       isError: false,
     });
 
+    (usePatientOutcome as jest.Mock).mockReturnValue({
+      patientOutcome: null,
+    });
+
     (usePatientFamilyNames as jest.Mock).mockReturnValue({
       childrenNames: [],
       motherName: null,

diff --git a/packages/esm-commons-lib/src/components/banner-tags/patient-status-tag.component.tsx b/packages/esm-commons-lib/src/components/banner-tags/patient-status-tag.component.tsx
@@ -2,11 +2,26 @@ import React from 'react';
 import { Tag } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { usePatientHivStatus } from './patientHivStatus';
+import { usePatientOutcome } from './useInfantFinalOutcome';
 import { usePatientFamilyNames } from './usePatientFamilyNames';
 
 export function PatientStatusBannerTag({ patientUuid }) {
   const { t } = useTranslation();
+
   const { hivStatus } = usePatientHivStatus(patientUuid);
+
+  const { patientOutcome } = usePatientOutcome(patientUuid);
+
+  const greenOutcomes = ['Still in Care', 'Confirmed HIV negative infant (discharged from PMTCT)', 'Missing'];
+  const redOutcomes = ['Confirmed HIV Positive', 'Lost to Follow Up', 'Dead', 'Transferred Out'];
+
+  let outcomeTagColor = '';
+  if (greenOutcomes.includes(patientOutcome)) {
+    outcomeTagColor = 'green';
+  } else if (redOutcomes.includes(patientOutcome)) {
+    outcomeTagColor = 'red';
+  }
+
   const { childrenNames, motherName, patientAge, patientGender, isLoading, isError } =
     usePatientFamilyNames(patientUuid);
 
@@ -17,22 +32,18 @@ export function PatientStatusBannerTag({ patientUuid }) {
   if (isError) {
     return <div>Error fetching family information</div>;
   }
-
   return (
     <>
-      {/* HIV Status Display */}
       {hivStatus === 'positive' && <Tag type="red">{t('hivPositive', 'HIV Positive')}</Tag>}
       {hivStatus === 'negative' && <Tag type="green">{t('hivNegative', 'HIV Negative')}</Tag>}
 
-      {/* Mother Name Display (if patient is under 10) */}
+      {patientOutcome && outcomeTagColor && <Tag type={outcomeTagColor}>{patientOutcome}</Tag>}
+
       {patientAge !== null && patientAge <= 14 && motherName && <Tag type="purple">Mother: {motherName}</Tag>}
 
-      {/* Children Names Display (if patient is female and over 10) */}
       {patientAge !== null && patientAge > 14 && patientGender === 'F' && childrenNames.length > 0 && (
         <Tag type="purple">Children: {childrenNames.join('     ||     ')}</Tag>
       )}
     </>
   );
 }
-
-export default PatientStatusBannerTag;
diff --git a/packages/esm-commons-lib/src/components/banner-tags/useInfantFinalOutcome.ts b/packages/esm-commons-lib/src/components/banner-tags/useInfantFinalOutcome.ts
@@ -0,0 +1,36 @@
+import { useState, useEffect } from 'react';
+import { openmrsFetch, useConfig } from '@openmrs/esm-framework';
+
+export const usePatientOutcome = (patientUuid: string) => {
+  const [patientOutcome, setPatientOutcome] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [isError, setIsError] = useState<boolean>(false);
+  const config = useConfig();
+
+  useEffect(() => {
+    const fetchPatientOutcome = async () => {
+      try {
+        const response = await fetch(
+          `/openmrs/ws/rest/v1/obs?patient=${patientUuid}&concept=${config.obsConcepts.outcomeStatus}&v=full`,
+        );
+        const data = await response.json();
+
+        if (data.results.length > 0) {
+          const outcome = data.results[0].value;
+          setPatientOutcome(outcome.display ?? null);
+        } else {
+          setPatientOutcome(null);
+        }
+      } catch (error) {
+        console.error('Failed to fetch patient outcome:', error);
+        setIsError(true);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchPatientOutcome();
+  }, [patientUuid, config.obsConcepts.outcomeStatus]);
+
+  return { patientOutcome, isLoading, isError };
+};