(refactor) Refactor Mark patient deceased form and Mark patient alive…

… modal (#1872)

* (refactor) Refactor Mark patient deceased form and Mark patient alive modal

* Fixup

* Show cause of death in banner tag

packages/esm-patient-banner-app/src/banner-tags/deceased-patient-tag.extension.tsx

@@ -1,15 +1,18 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Tag, DefinitionTooltip } from '@carbon/react';
+import { DefinitionTooltip, Tag } from '@carbon/react';
 import { formatDatetime, parseDate } from '@openmrs/esm-framework';
+import { useCauseOfDeath } from './useCauseOfDeath';
 import styles from './deceased-patient-tag.scss';
 
 interface DeceasedPatientBannerTagProps {
-  patient: Pick<fhir.Patient, 'deceasedDateTime'>;
+  patient: fhir.Patient;
 }
+
 const DeceasedPatientBannerTag: React.FC<DeceasedPatientBannerTagProps> = ({ patient }) => {
   const { t } = useTranslation();
   const isDeceased = Boolean(patient?.deceasedDateTime);
+  const { causeOfDeath } = useCauseOfDeath(patient?.id);
 
   return (
     isDeceased && (
@@ -18,7 +21,10 @@ const DeceasedPatientBannerTag: React.FC<DeceasedPatientBannerTagProps> = ({ pat
         definition={
           <div role="tooltip" className={styles.tooltipPadding}>
             <h6 style={{ marginBottom: '0.5rem' }}>{t('deceased', 'Deceased')}</h6>
-            <span>{formatDatetime(parseDate(patient?.deceasedDateTime))}</span>
+            <span>
+              {formatDatetime(parseDate(patient?.deceasedDateTime))}
+              {causeOfDeath ? ` ${t('from_lower', 'from')} ${causeOfDeath}` : null}
+            </span>
           </div>
         }
       >

packages/esm-patient-banner-app/src/banner-tags/useCauseOfDeath.ts

@@ -0,0 +1,28 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import { useMemo } from 'react';
+import useSWR from 'swr';
+
+interface CauseOfDeathResponse {
+  data: {
+    causeOfDeath: {
+      display: string;
+    };
+  };
+}
+
+export function useCauseOfDeath(patientUuid: string) {
+  const customRepresentation = 'custom:(causeOfDeath:(display)';
+  const url = `/ws/rest/v1/person/${patientUuid}?v=${customRepresentation}`;
+
+  const { data, error } = useSWR<CauseOfDeathResponse, Error>(patientUuid ? url : null, openmrsFetch);
+
+  const results = useMemo(
+    () => ({
+      causeOfDeath: data?.data?.causeOfDeath?.display,
+      error,
+    }),
+    [data?.data?.causeOfDeath, error],
+  );
+
+  return results;
+}

packages/esm-patient-chart-app/package.json

@@ -17,7 +17,7 @@
     "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js --color",
     "coverage": "yarn test --coverage",
     "typescript": "tsc",
-    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/**/*.modal.tsx' 'src/**/*.hook.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js"
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/**/*.modal.tsx' 'src/**/*.workspace.tsx' 'src/**/*.hook.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js"
   },
   "browserslist": [
     "extends browserslist-config-openmrs"

packages/esm-patient-chart-app/src/actions-buttons/mark-patient-alive.component.tsx

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { OverflowMenuItem } from '@carbon/react';
 import { showModal } from '@openmrs/esm-framework';
-import { usePatientDeceased } from '../deceased/deceased.resource';
+import { usePatientDeceasedStatus } from '../data.resource';
 import styles from './action-button.scss';
 
 interface MarkPatientAliveOverflowMenuItemProps {
@@ -11,21 +11,21 @@ interface MarkPatientAliveOverflowMenuItemProps {
 
 const MarkPatientAliveOverflowMenuItem: React.FC<MarkPatientAliveOverflowMenuItemProps> = ({ patientUuid }) => {
   const { t } = useTranslation();
-  const { isDead, isLoading: isPatientLoading } = usePatientDeceased(patientUuid);
+  const { isDead, isLoading: isLoadingPatient } = usePatientDeceasedStatus(patientUuid);
 
   const handleLaunchModal = useCallback(() => {
-    const dispose = showModal('confirm-alive-modal', {
-      patientUuid,
+    const dispose = showModal('mark-patient-alive-modal', {
       closeModal: () => dispose(),
+      patientUuid,
     });
   }, [patientUuid]);
 
   return (
-    !isPatientLoading &&
+    !isLoadingPatient &&
     isDead && (
       <OverflowMenuItem
         className={styles.menuitem}
-        itemText={t('markAlive', 'Mark alive')}
+        itemText={t('markPatientAlive', 'Mark patient alive')}
         onClick={handleLaunchModal}
       />
     )

packages/esm-patient-chart-app/src/actions-buttons/mark-patient-deceased.component.tsx

@@ -2,12 +2,12 @@ import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { OverflowMenuItem } from '@carbon/react';
 import { launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
-import { usePatientDeceased } from '../deceased/deceased.resource';
+import { usePatientDeceasedStatus } from '../data.resource';
 import styles from './action-button.scss';
 
 const MarkPatientDeceasedOverflowMenuItem = ({ patientUuid }) => {
   const { t } = useTranslation();
-  const { isDead, isLoading: isPatientLoading } = usePatientDeceased(patientUuid);
+  const { isDead, isLoading: isPatientLoading } = usePatientDeceasedStatus(patientUuid);
 
   const handleLaunchModal = useCallback(() => launchPatientWorkspace('mark-patient-deceased-workspace-form'), []);
 
@@ -16,7 +16,7 @@ const MarkPatientDeceasedOverflowMenuItem = ({ patientUuid }) => {
     !isDead && (
       <OverflowMenuItem
         className={styles.menuitem}
-        itemText={t('markDeceased', 'Mark deceased')}
+        itemText={t('markPatientDeceased', 'Mark patient deceased')}
         onClick={handleLaunchModal}
       />
     )

packages/esm-patient-chart-app/src/deceased/deceased.resource.ts → packages/esm-patient-chart-app/src/data.resource.ts

@@ -7,34 +7,34 @@ interface CauseOfDeathFetchResponse {
   value: string;
 }
 
-interface DeathPayload {
-  deathDate?: Date;
-  dead: boolean;
-  causeOfDeath?: string;
-}
-
 export interface ConceptAnswer {
-  uuid: string;
-  name: string;
   display: string;
+  name: string;
+  uuid: string;
 }
 
 interface ConceptAnswersResponse {
   answers?: Array<ConceptAnswer>;
 }
 
-export function usePatientDeathConcepts() {
+interface DeathPayload {
+  causeOfDeath?: string;
+  dead: boolean;
+  deathDate?: Date;
+}
+
+export function useCausesOfDeath() {
   const { isCauseOfDeathLoading, isCauseOfDeathValidating, value: causeOfDeathConcept } = useCauseOfDeathConcept();
   const { isConceptLoading, isConceptAnswerValidating, conceptAnswers } = useConceptAnswers(causeOfDeathConcept);
 
   return {
-    conceptAnswers: conceptAnswers,
+    causesOfDeath: conceptAnswers,
     isLoading: isCauseOfDeathLoading || isConceptLoading,
     isValidating: isConceptAnswerValidating || isCauseOfDeathValidating,
   };
 }
 
-export function usePatientDeceased(patientUuid: string) {
+export function usePatientDeceasedStatus(patientUuid: string) {
   const { isLoading: isPatientLoading, patient } = usePatient(patientUuid);
 
   if (isPatientLoading) {
@@ -67,29 +67,30 @@ export function markPatientDeceased(
   deceasedDate: Date,
   personUuid: string,
   selectedCauseOfDeathValue: string | undefined,
-  abortController: AbortController,
 ) {
+  const abortController = new AbortController();
   const payload: DeathPayload = {
     causeOfDeath: selectedCauseOfDeathValue,
     dead: true,
   };
 
   if (deceasedDate) {
-    payload.deathDate = new Date(deceasedDate.getFullYear(), deceasedDate.getMonth(), deceasedDate.getDay());
+    payload.deathDate = deceasedDate;
   } else {
     payload.deathDate = null;
   }
 
   return changePatientDeathStatus(personUuid, payload, abortController);
 }
 
-export function markPatientAlive(personUuid: string, abortController: AbortController) {
+export function markPatientAlive(personUuid: string) {
+  const abortController = new AbortController();
   return changePatientDeathStatus(
     personUuid,
     {
-      deathDate: null,
       causeOfDeath: null,
       dead: false,
+      deathDate: null,
     },
     abortController,
   );
@@ -115,7 +116,7 @@ export function useConceptAnswers(conceptUuid: string) {
 }
 
 export function useCauseOfDeathConcept() {
-  const { data, error, isLoading, isValidating } = useSWR<{ data: CauseOfDeathFetchResponse }>(
+  const { data, error, isLoading, isValidating } = useSWR<{ data: CauseOfDeathFetchResponse }, Error>(
     `${restBaseUrl}/systemsetting/concept.causeOfDeath`,
     openmrsFetch,
     {
@@ -129,7 +130,8 @@ export function useCauseOfDeathConcept() {
       value: data?.data?.value ?? undefined,
       isCauseOfDeathLoading: isLoading,
       isCauseOfDeathValidating: isValidating,
+      error,
     };
-  }, [data, isLoading, isValidating]);
+  }, [data?.data?.value, error, isLoading, isValidating]);
   return result;
 }