code review

openmrs · Jun 15, 2023 · 7d7151a · 7d7151a
1 parent 1798576
commit 7d7151a
Show file tree

Hide file tree

Showing 6 changed files with 122 additions and 31 deletions.
diff --git a/packages/esm-patient-banner-app/src/banner/patient-banner.component.tsx b/packages/esm-patient-banner-app/src/banner/patient-banner.component.tsx
@@ -6,6 +6,7 @@ import { ExtensionSlot, age, formatDate, parseDate, useConfig } from '@openmrs/e
 import ContactDetails from '../contact-details/contact-details.component';
 import CustomOverflowMenuComponent from '../ui-components/overflow-menu.component';
 import styles from './patient-banner.scss';
+import { Breakpoint } from '@openmrs/esm-framework/src/internal';
 
 interface PatientBannerProps {
   patient: fhir.Patient;
@@ -32,12 +33,14 @@ const PatientBanner: React.FC<PatientBannerProps> = ({
     const currentRef = patientBannerRef.current;
     const resizeObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
-        setIsPatientBannerSmallSize(entry.contentRect.width < 1023);
+        setIsPatientBannerSmallSize(entry.contentRect.width < Breakpoint.TABLET_MAX);
       }
     });
     resizeObserver.observe(patientBannerRef.current);
     return () => {
-      if (currentRef) resizeObserver.unobserve(currentRef);
+      if (currentRef) {
+        resizeObserver.unobserve(currentRef);
+      }
     };
   }, [patientBannerRef, setIsPatientBannerSmallSize]);
 

diff --git a/packages/esm-patient-banner-app/src/banner/patient-banner.test.tsx b/packages/esm-patient-banner-app/src/banner/patient-banner.test.tsx
@@ -29,6 +29,7 @@ jest.mock('@openmrs/esm-framework', () => ({
   ...(jest.requireActual('@openmrs/esm-framework') as any),
   useVisit: jest.fn(),
   age: jest.fn(),
+  Breakpoint: { TABLET_MAX: 1023 },
 }));
 
 describe('PatientBanner: ', () => {

diff --git a/packages/esm-patient-banner-app/src/contact-details/contact-details.component.tsx b/packages/esm-patient-banner-app/src/contact-details/contact-details.component.tsx
@@ -199,7 +199,7 @@ const ContactDetails: React.FC<ContactDetailsProps> = ({
   deceased,
   isPatientBannerSmallSize,
 }) => {
-  const currentAddress = address ? address.find((a) => a.use === 'home') : undefined;
+  const currentAddress = address?.find((a) => a.use === 'home');
   const currentClass = `${styles[deceased && 'deceased']} ${
     styles[isPatientBannerSmallSize ? 'smallBannerSize' : 'contactDetailsContainer']
   }`;

diff --git a/packages/esm-patient-banner-app/src/contact-details/contact-details.test.tsx b/packages/esm-patient-banner-app/src/contact-details/contact-details.test.tsx
@@ -4,9 +4,11 @@ import { openmrsFetch } from '@openmrs/esm-framework';
 import { renderWithSwr, waitForLoadingToFinish } from '../../../../tools/test-helpers';
 import ContactDetails from './contact-details.component';
 import { usePatientAttributes, usePatientContactAttributes } from '../hooks/usePatientAttributes';
+import { usePatientListsForPatient } from '../hooks/usePatientListsForPatient';
 
 const mockedUsePatientAttributes = usePatientAttributes as jest.Mock;
 const mockedUsePatientContactAttributes = usePatientContactAttributes as jest.Mock;
+const mockUsePatientListsForPatient = usePatientListsForPatient as jest.Mock;
 
 const testProps = {
   address: [
@@ -21,6 +23,7 @@ const testProps = {
   ],
   telecom: [{ value: '+0123456789' }],
   patientId: '1111',
+  deceased: false,
 };
 
 const mockRelationships = [
@@ -59,15 +62,45 @@ const mockPersonAttributes = [
   },
 ];
 
+const mockCohorts = [
+  {
+    uuid: 'fdc95682-e206-421b-9534-e2a4010cc05d',
+    name: 'List three',
+    startDate: '2023-04-19T23:26:27.000+0000',
+    endDate: null,
+  },
+  {
+    uuid: '1d48bec7-6aab-464c-ac16-687ba46e7812',
+    name: ' Test patient List-47',
+    startDate: '2023-04-24T23:28:49.000+0000',
+    endDate: null,
+  },
+  {
+    uuid: '6ce81b61-387d-43ab-86fb-606fa16d39dd',
+    name: ' Test patient List-41',
+    startDate: '2023-04-24T23:28:49.000+0000',
+    endDate: null,
+  },
+  {
+    uuid: '1361caf0-b3c3-4937-88e3-40074f7f3320',
+    name: 'Potential Patients',
+    startDate: '2023-06-07T15:40:00.000+0000',
+    endDate: null,
+  },
+];
 const mockOpenmrsFetch = openmrsFetch as jest.Mock;
 
 jest.mock('../hooks/usePatientAttributes.tsx', () => ({
   usePatientAttributes: jest.fn(),
   usePatientContactAttributes: jest.fn(),
 }));
 
+jest.mock('../hooks/usePatientListsForPatient.tsx', () => ({
+  usePatientListsForPatient: jest.fn(),
+}));
+
 describe('ContactDetails', () => {
-  it('renders an empty state view when relationships data is not available', async () => {
+  it("renders the patient's address, contact details, patient lists, and relationships when available", async () => {
     mockedUsePatientAttributes.mockReturnValue({
       isLoading: false,
       attributes: [],
@@ -79,18 +112,31 @@ describe('ContactDetails', () => {
       contactAttributes: mockPersonAttributes,
     });
 
-    mockOpenmrsFetch.mockReturnValueOnce({ data: { results: [] } });
+    mockUsePatientListsForPatient.mockReturnValueOnce({
+      isLoading: false,
+      cohorts: mockCohorts,
+    });
+
+    mockOpenmrsFetch.mockReturnValueOnce({ data: { results: mockRelationships } });
 
     renderContactDetails();
 
     await waitForLoadingToFinish();
 
-    screen.findByText('Relationships');
+    expect(screen.getByText('Address')).toBeInTheDocument();
+    expect(screen.getByText('Contact Details')).toBeInTheDocument();
     expect(screen.getByText('Relationships')).toBeInTheDocument();
-    expect(screen.getByText('--')).toBeInTheDocument();
+    expect(screen.getByText(/Amanda Robinson/)).toBeInTheDocument();
+    expect(screen.getByText(/Sibling/i)).toBeInTheDocument();
+    expect(screen.getByText(/24 yrs/i)).toBeInTheDocument();
+    expect(screen.getByText(/Next of Kin Contact Phone Number/i)).toBeInTheDocument();
+    expect(screen.getByText(/0700-000-000/)).toBeInTheDocument();
+    expect(screen.getByText(/Patient Lists/)).toBeInTheDocument();
+    expect(screen.getByText(/Test patient List-47/)).toBeInTheDocument();
+    expect(screen.getByText(/List three/)).toBeInTheDocument();
   });
 
-  it("renders the patient's address, contact details and relationships when available", async () => {
+  it('renders the contact details with 2 columns if banner width is small', async () => {
     mockedUsePatientAttributes.mockReturnValue({
       isLoading: false,
       attributes: [],
@@ -104,10 +150,53 @@ describe('ContactDetails', () => {
 
     mockOpenmrsFetch.mockReturnValueOnce({ data: { results: mockRelationships } });
 
-    renderContactDetails();
+    mockUsePatientListsForPatient.mockReturnValueOnce({
+      isLoading: false,
+      cohorts: mockCohorts,
+    });
+    const props = { ...testProps, isPatientBannerSmallSize: true };
+
+    const { container } = renderWithSwr(<ContactDetails {...props} />);
+
+    await waitForLoadingToFinish();
+
+    expect(container.firstChild).toHaveClass('smallBannerSize');
+    expect(screen.getByText('Address')).toBeInTheDocument();
+    expect(screen.getByText('Contact Details')).toBeInTheDocument();
+    expect(screen.getByText('Relationships')).toBeInTheDocument();
+    expect(screen.getByText(/Amanda Robinson/)).toBeInTheDocument();
+    expect(screen.getByText(/Sibling/i)).toBeInTheDocument();
+    expect(screen.getByText(/24 yrs/i)).toBeInTheDocument();
+    expect(screen.getByText(/Next of Kin Contact Phone Number/i)).toBeInTheDocument();
+    expect(screen.getByText(/0700-000-000/)).toBeInTheDocument();
+    expect(screen.getByText(/Patient Lists/)).toBeInTheDocument();
+  });
+
+  it('renders the contact details with 4 colummns if banner width is large', async () => {
+    mockedUsePatientAttributes.mockReturnValue({
+      isLoading: false,
+      attributes: [],
+      error: null,
+    });
+
+    mockedUsePatientContactAttributes.mockReturnValueOnce({
+      isLoading: false,
+      contactAttributes: mockPersonAttributes,
+    });
+
+    mockUsePatientListsForPatient.mockReturnValueOnce({
+      isLoading: false,
+      cohorts: mockCohorts,
+    });
+
+    mockOpenmrsFetch.mockReturnValueOnce({ data: { results: mockRelationships } });
+    const props = { ...testProps, isPatientBannerSmallSize: false };
+
+    const { container } = renderWithSwr(<ContactDetails {...props} />);
 
     await waitForLoadingToFinish();
 
+    expect(container.firstChild).not.toHaveClass('smallBannerSize');
     expect(screen.getByText('Address')).toBeInTheDocument();
     expect(screen.getByText('Contact Details')).toBeInTheDocument();
     expect(screen.getByText('Relationships')).toBeInTheDocument();
@@ -118,7 +207,7 @@ describe('ContactDetails', () => {
     expect(screen.getByText(/0700-000-000/)).toBeInTheDocument();
   });
 
-  it('renders an empty state view when address and contact details are not available', async () => {
+  it('renders an empty state view when contact details, relations, patient lists and addresses are not available', async () => {
     mockedUsePatientAttributes.mockReturnValue({
       isLoading: false,
       attributes: [],
@@ -130,15 +219,22 @@ describe('ContactDetails', () => {
       contactAttributes: [],
     });
 
+    mockUsePatientListsForPatient.mockReturnValueOnce({
+      isLoading: false,
+      cohorts: [],
+    });
+
     mockOpenmrsFetch.mockReturnValueOnce({ data: { results: [] } });
 
     renderWithSwr(<ContactDetails address={null} telecom={null} patientId={'some-uuid'} />);
 
     await waitForLoadingToFinish();
 
     expect(screen.getByText('Address')).toBeInTheDocument();
+    expect(screen.getByText('Relationships')).toBeInTheDocument();
     expect(screen.getByText('Contact Details')).toBeInTheDocument();
-    expect(screen.getAllByText('--').length).toBe(3);
+    expect(screen.getByText(/Patient Lists/)).toBeInTheDocument();
+    expect(screen.getAllByText('--').length).toBe(4);
   });
 });
 

diff --git a/packages/esm-patient-banner-app/src/contact-details/relationships.resource.tsx b/packages/esm-patient-banner-app/src/contact-details/relationships.resource.tsx
@@ -66,8 +66,8 @@ interface ExtractedRelationship {
 export interface Relationship {
   display: string;
   uuid: string;
-  personA: PersonX;
-  personB: PersonX;
+  personA: Person;
+  personB: Person;
   relationshipType: {
     uuid: string;
     display: string;
@@ -76,7 +76,7 @@ export interface Relationship {
   };
 }
 
-interface PersonX {
+interface Person {
   uuid: string;
   age: number;
   display: string;

diff --git a/packages/esm-patient-banner-app/src/hooks/usePatientListsForPatient.tsx b/packages/esm-patient-banner-app/src/hooks/usePatientListsForPatient.tsx
@@ -6,23 +6,14 @@ import { useMemo } from 'react';
 export function usePatientListsForPatient(patientUuid: string) {
   const customRepresentation = 'custom:(uuid,patient:ref,cohort:(uuid,name,startDate,endDate))';
   const url = patientUuid ? `ws/rest/v1/cohortm/cohortmember?patient=${patientUuid}&v=${customRepresentation}` : null;
-  const { data, isLoading, mutate } = useSWR<FetchResponse<CohortMemberResponse>, Error>(url, openmrsFetch);
+  const { data, isLoading } = useSWR<FetchResponse<CohortMemberResponse>, Error>(url, openmrsFetch);
 
-  const cohorts = useMemo(
-    () =>
-      data
-        ? data?.data?.results.map((ref) => ({
-            uuid: ref.cohort.uuid,
-            name: ref.cohort.name,
-            startDate: ref.cohort.startDate,
-            endDate: ref.cohort.endDate,
-          }))
-        : null,
-    [data],
-  );
+  const cohorts = data?.data?.results.map((ref) => ({
+    uuid: ref.cohort.uuid,
+    name: ref.cohort.name,
+    startDate: ref.cohort.startDate,
+    endDate: ref.cohort.endDate,
+  }));
 
-  return {
-    cohorts,
-    isLoading,
-  };
+  return useMemo(() => ({ cohorts, isLoading }), [isLoading, cohorts]);
 }