Merge remote-tracking branch 'origin/main' into refactor-card

openmrs · Oct 15, 2024 · 4594fa4 · 4594fa4
2 parents d084ae7 + 210df65
commit 4594fa4
Show file tree

Hide file tree

Showing 5 changed files with 143 additions and 154 deletions.
diff --git a/...es/esm-patient-search-app/src/compact-patient-search/compact-patient-banner.component.tsx b/...es/esm-patient-search-app/src/compact-patient-search/compact-patient-banner.component.tsx
@@ -1,3 +1,7 @@
+import React, { forwardRef, useContext, useMemo } from 'react';
+import classNames from 'classnames';
+import { v4 as uuidv4 } from 'uuid';
+import { useTranslation } from 'react-i18next';
 import { Tag } from '@carbon/react';
 import {
   age,
@@ -8,35 +12,23 @@ import {
   PatientPhoto,
   useConfig,
 } from '@openmrs/esm-framework';
-import classNames from 'classnames';
-import React, { forwardRef, useContext, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { PatientSearchContext } from '../patient-search-context';
 import type { FHIRIdentifier, FHIRPatientType, Identifier, SearchedPatient } from '../types';
+import { PatientSearchContext } from '../patient-search-context';
 import styles from './compact-patient-banner.scss';
 
 interface ClickablePatientContainerProps {
-  patient: SearchedPatient;
   children: React.ReactNode;
+  patient: SearchedPatient;
 }
 
 interface CompactPatientBannerProps {
   patients: Array<SearchedPatient>;
 }
 
-interface CustomIdentifierProps {
-  patient: SearchedPatient;
-  identifierName: string;
-}
-
 interface IdentifierTagProps {
   identifier: Identifier;
 }
 
-interface IdentifiersProps {
-  identifiers: Array<Identifier>;
-}
-
 const CompactPatientBanner = forwardRef<HTMLDivElement, CompactPatientBannerProps>(({ patients }, ref) => {
   const config = useConfig();
   const { t } = useTranslation();
@@ -67,7 +59,7 @@ const CompactPatientBanner = forwardRef<HTMLDivElement, CompactPatientBannerProp
         id: patient.uuid,
         name: [
           {
-            id: String(Math.random()), // not used
+            id: uuidv4(), // not used
             given: [patient.person.personName.givenName, patient.person.personName.middleName],
             family: patient.person.personName.familyName,
             text: patient.person.personName.display,
@@ -81,7 +73,7 @@ const CompactPatientBanner = forwardRef<HTMLDivElement, CompactPatientBannerProp
         address: preferredAddress
           ? [
               {
-                id: String(Math.random()), // not used
+                id: uuidv4(), // not used
                 city: preferredAddress.cityVillage,
                 country: preferredAddress.country,
                 postalCode: preferredAddress.postalCode,

diff --git a/packages/esm-patient-search-app/src/compact-patient-search/patient-search.component.tsx b/packages/esm-patient-search-app/src/compact-patient-search/patient-search.component.tsx
@@ -1,10 +1,10 @@
 import React, { useRef, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Layer, Loading, Tile } from '@carbon/react';
-import EmptyDataIllustration from '../ui-components/empty-data-illustration.component';
+import type { PatientSearchResponse } from '../types';
 import CompactPatientBanner from './compact-patient-banner.component';
+import EmptyDataIllustration from '../ui-components/empty-data-illustration.component';
 import Loader from './loader.component';
-import type { PatientSearchResponse } from '../types';
 import styles from './patient-search.scss';
 
 interface PatientSearchProps extends PatientSearchResponse {

diff --git a/...ent-search-app/src/patient-search-page/patient-banner/banner/patient-banner.component.tsx b/...ent-search-app/src/patient-search-page/patient-banner/banner/patient-banner.component.tsx
@@ -1,23 +1,29 @@
-import React, { type MouseEvent, useContext, useCallback } from 'react';
+import React, { type MouseEvent, useContext, useCallback, useState } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { ButtonSkeleton, SkeletonIcon, SkeletonText } from '@carbon/react';
 import {
-  ExtensionSlot,
   age,
+  ConfigurableLink,
+  ExtensionSlot,
   formatDate,
   parseDate,
-  useVisit,
-  useConfig,
-  ConfigurableLink,
-  PatientPhoto,
   PatientBannerActionsMenu,
-  PatientBannerToggleContactDetailsButton,
   PatientBannerContactDetails,
+  PatientBannerToggleContactDetailsButton,
+  PatientPhoto,
+  useConfig,
+  usePatient,
+  useVisit,
 } from '@openmrs/esm-framework';
 import { type SearchedPatient } from '../../../types';
-import styles from './patient-banner.scss';
 import { PatientSearchContext } from '../../../patient-search-context';
+import styles from './patient-banner.scss';
+
+interface ClickablePatientContainerProps {
+  patientUuid: string;
+  children: React.ReactNode;
+}
 
 interface PatientBannerProps {
   patient: SearchedPatient;
@@ -28,11 +34,11 @@ interface PatientBannerProps {
 const PatientBanner: React.FC<PatientBannerProps> = ({ patient, patientUuid, hideActionsOverflow }) => {
   const { t } = useTranslation();
   const { currentVisit } = useVisit(patientUuid);
+  const { patient: fhirPatient, isLoading } = usePatient(patientUuid);
   const { nonNavigationSelectPatientAction } = useContext(PatientSearchContext);
-
   const patientName = patient.person.personName.display;
 
-  const [showContactDetails, setShowContactDetails] = React.useState(false);
+  const [showContactDetails, setShowContactDetails] = useState(false);
   const toggleContactDetails = useCallback((e: MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
@@ -56,12 +62,6 @@ const PatientBanner: React.FC<PatientBannerProps> = ({ patient, patientUuid, hid
 
   const isDeceased = !!patient.person.deathDate;
 
-  const fhirPatient = React.useMemo(() => {
-    return {
-      deceasedDateTime: patient.person.deathDate,
-    };
-  }, [patient]);
-
   return (
     <>
       <div
@@ -80,9 +80,9 @@ const PatientBanner: React.FC<PatientBannerProps> = ({ patient, patientUuid, hid
             <div className={styles.flexRow}>
               <span className={styles.patientName}>{patientName}</span>
               <ExtensionSlot
+                className={styles.flexRow}
                 name="patient-banner-tags-slot"
                 state={{ patientUuid, patient: fhirPatient }}
-                className={styles.flexRow}
               />
             </div>
             <div className={styles.demographics}>
@@ -108,13 +108,14 @@ const PatientBanner: React.FC<PatientBannerProps> = ({ patient, patientUuid, hid
         <div className={styles.buttonCol}>
           {!hideActionsOverflow ? (
             <PatientBannerActionsMenu
-              patientUuid={patientUuid}
               actionsSlotName={'patient-search-actions-slot'}
               additionalActionsSlotState={{
                 selectPatientAction: nonNavigationSelectPatientAction,
                 launchPatientChart: true,
               }}
               isDeceased={patient.person.dead}
+              patient={fhirPatient}
+              patientUuid={patientUuid}
             />
           ) : null}
           {!isDeceased && !currentVisit && (
@@ -132,11 +133,6 @@ const PatientBanner: React.FC<PatientBannerProps> = ({ patient, patientUuid, hid
   );
 };
 
-interface ClickablePatientContainerProps {
-  patientUuid: string;
-  children: React.ReactNode;
-}
-
 const ClickablePatientContainer = ({ patientUuid, children }: ClickablePatientContainerProps) => {
   const { nonNavigationSelectPatientAction, patientClickSideEffect } = useContext(PatientSearchContext);
   const config = useConfig();

diff --git a/packages/esm-ward-app/src/ward-workspace/patient-details/ward-patient.workspace.tsx b/packages/esm-ward-app/src/ward-workspace/patient-details/ward-patient.workspace.tsx
@@ -9,8 +9,8 @@ attach('ward-patient-workspace-header-slot', 'patient-vitals-info');
 
 export default function WardPatientWorkspace({ setTitle, wardPatient: { patient } }: WardPatientWorkspaceProps) {
   useEffect(() => {
-    setTitle(patient.person.display, <PatientWorkspaceTitle patient={patient} />);
-  }, []);
+    setTitle(patient.person.display, <PatientWorkspaceTitle key={patient.uuid} patient={patient} />);
+  }, [patient.uuid]);
 
   return (
     <div className={styles.workspaceContainer}>