Basic Support for Offline Registered Patients

package.json

@@ -26,7 +26,7 @@
     "@babel/preset-react": "^7.10.4",
     "@babel/preset-typescript": "^7.10.4",
     "@babel/runtime": "^7.12.13",
-    "@jsenv/file-size-impact": "^12.1.1",
+    "@jsenv/file-size-impact": "12.1.1",
     "@openmrs/esm-framework": "next",
     "@testing-library/dom": "^7.20.0",
     "@testing-library/jest-dom": "^5.11.0",

packages/esm-form-entry-app/src/offline.ts

@@ -112,6 +112,7 @@ export async function setupOfflineEncounterSync() {
 async function queueEncounterRequest(item: QueuedEncounterRequest) {
   const descriptor: QueueItemDescriptor = {
     id: item.body.uuid,
+    displayName: 'Patient form',
     dependencies: [
       {
         type: 'visit',

packages/esm-patient-banner-app/src/banner/patient-banner.component.tsx

@@ -12,18 +12,7 @@ import { Button } from 'carbon-components-react';
 import { ExtensionSlot, age } from '@openmrs/esm-framework';
 
 interface PatientBannerProps {
-  patient: Pick<
-    fhir.Patient,
-    | 'id'
-    | 'name'
-    | 'gender'
-    | 'birthDate'
-    | 'identifier'
-    | 'address'
-    | 'telecom'
-    | 'deceasedBoolean'
-    | 'deceasedDateTime'
-  >;
+  patient: fhir.Patient;
   patientUuid: string;
   onClick?: (patientUuid: string) => void;
   onTransition?: () => void;
@@ -38,7 +27,7 @@ const PatientBanner: React.FC<PatientBannerProps> = ({ patient, patientUuid, onC
     [patientUuid, onClick, onTransition],
   );
 
-  const patientName = `${patient.name[0].given.join(' ')} ${patient.name[0].family}`;
+  const patientName = `${patient.name?.[0].given?.join(' ')} ${patient?.name?.[0].family}`;
   const patientPhotoSlotState = React.useMemo(() => ({ patientUuid, patientName }), [patientUuid]);
 
   const [showContactDetails, setShowContactDetails] = React.useState(false);
@@ -101,7 +90,9 @@ const PatientBanner: React.FC<PatientBannerProps> = ({ patient, patientUuid, onC
             <span>{dayjs(patient.birthDate).format('DD - MMM - YYYY')}</span>
           </div>
           <div className={styles.row}>
-            <span className={styles.identifiers}>{patient.identifier.map((i) => i.value).join(', ')}</span>
+            <span className={styles.identifiers}>
+              {patient.identifier?.length ? patient.identifier.map((i) => i.value).join(', ') : '--'}
+            </span>
             <Button
               kind="ghost"
               renderIcon={showContactDetails ? ChevronUp16 : ChevronDown16}
@@ -115,7 +106,7 @@ const PatientBanner: React.FC<PatientBannerProps> = ({ patient, patientUuid, onC
         </div>
       </div>
       {showContactDetails && (
-        <ContactDetails address={patient.address} telecom={patient.telecom} patientId={patient.id} />
+        <ContactDetails address={patient.address ?? []} telecom={patient.telecom ?? []} patientId={patient.id} />
       )}
     </div>
   );

packages/esm-patient-banner-app/src/contact-details/contact-details.component.tsx

@@ -10,35 +10,31 @@ interface ContactDetailsProps {
   patientId: string;
 }
 
-const Address: React.FC<{ address: fhir.Address }> = ({ address }) => {
+const Address: React.FC<{ address?: fhir.Address }> = ({ address }) => {
   const { t } = useTranslation();
 
   return (
     <>
       <p className={styles.heading}>{t('address', 'Address')}</p>
       <ul>
-        {(() => {
-          if (address) {
-            const { city, country, postalCode, state } = address;
-            return (
-              <>
-                <li>{postalCode}</li>
-                <li>{city}</li>
-                <li>{state}</li>
-                <li>{country}</li>
-              </>
-            );
-          }
-          return '--';
-        })()}
+        {address ? (
+          <>
+            <li>{address.postalCode}</li>
+            <li>{address.city}</li>
+            <li>{address.state}</li>
+            <li>{address.country}</li>
+          </>
+        ) : (
+          '--'
+        )}
       </ul>
     </>
   );
 };
 
 const Contact: React.FC<{ telecom: Array<fhir.ContactPoint> }> = ({ telecom }) => {
   const { t } = useTranslation();
-  const value = telecom && telecom.length ? telecom[0].value : '--';
+  const value = telecom?.length ? telecom[0].value : '--';
 
   return (
     <>
@@ -81,8 +77,7 @@ const Relationships: React.FC<{ patientId: string }> = ({ patientId }) => {
 };
 
 const ContactDetails: React.FC<ContactDetailsProps> = ({ address, telecom, patientId }) => {
-  const { t } = useTranslation();
-  const currentAddress = address ? address.find((a) => a.use === 'home') : null;
+  const currentAddress = address ? address.find((a) => a.use === 'home') : undefined;
 
   return (
     <div className={styles.contactDetails}>

packages/esm-patient-chart-app/src/offline.ts

@@ -1,4 +1,4 @@
-import { NewVisitPayload, Visit } from '@openmrs/esm-api';
+import { NewVisitPayload } from '@openmrs/esm-api';
 import {
   getStartedVisit,
   getSynchronizationItems,
@@ -10,16 +10,19 @@ import {
   VisitStatus,
   subscribeConnectivity,
   QueueItemDescriptor,
+  usePatient,
 } from '@openmrs/esm-framework';
 import { useEffect } from 'react';
 import { v4 } from 'uuid';
+import useSWR, { SWRResponse } from 'swr';
+
+const visitSyncType = 'visit';
+const patientRegistrationSyncType = 'patient-registration';
 
 interface OfflineVisit extends NewVisitPayload {
   uuid: string;
 }
 
-const visitSyncType = 'visit';
-
 export function setupCacheableRoutes() {
   messageOmrsServiceWorker({
     type: 'registerDynamicRoute',
@@ -33,7 +36,7 @@ export function setupCacheableRoutes() {
 }
 
 export function setupOfflineVisitsSync() {
-  setupOfflineSync<OfflineVisit>(visitSyncType, [], async (visit, options) => {
+  setupOfflineSync<OfflineVisit>(visitSyncType, [patientRegistrationSyncType], async (visit, options) => {
     const visitPayload = {
       ...visit,
       stopDatetime: new Date(),
@@ -73,19 +76,30 @@ async function getOfflineVisitForPatient(patientUuid: string) {
 }
 
 async function createOfflineVisitForPatient(patientUuid: string, location: string) {
+  const patientRegistrationSyncItems = await getSynchronizationItems<any>(patientRegistrationSyncType);
+  const isVisitForOfflineRegisteredPatient = patientRegistrationSyncItems.some(
+    (item) => item.fhirPatient.id === patientUuid,
+  );
+
   const offlineVisit: OfflineVisit = {
     uuid: v4(),
     patient: patientUuid,
     startDatetime: new Date(),
     location,
-    // TODO: This UUID belongs to the "Facility Visit" type.
-    //       This should be replaced with the dedicated offline visit as soon as it exists in the BE.
-    visitType: '7b0f5697-27e3-40c4-8bae-f4049abfb4ed',
+    visitType: 'a22733fa-3501-4020-a520-da024eeff088', // "Offline" visit type UUID.
   };
 
   const descriptor: QueueItemDescriptor = {
     id: offlineVisit.uuid,
-    dependencies: [],
+    displayName: 'Offline visit',
+    dependencies: isVisitForOfflineRegisteredPatient
+      ? [
+          {
+            type: patientRegistrationSyncType,
+            id: patientUuid,
+          },
+        ]
+      : [],
   };
 
   await queueSynchronizationItem(visitSyncType, offlineVisit, descriptor);
@@ -95,15 +109,67 @@ async function createOfflineVisitForPatient(patientUuid: string, location: strin
 function offlineVisitToVisit(offlineVisit: OfflineVisit) {
   return {
     uuid: offlineVisit.uuid,
-    startDatetime: offlineVisit.startDatetime.toString(),
-    stopDatetime: offlineVisit.stopDatetime.toString(),
+    startDatetime: offlineVisit.startDatetime?.toString(),
+    stopDatetime: offlineVisit.stopDatetime?.toString(),
     encounters: [],
     visitType: {
       uuid: offlineVisit.visitType,
-      display: 'OFFLINE_VISIT_PLACEHOLDER',
+      display: 'Offline',
     },
     patient: {
       uuid: offlineVisit.patient,
     },
   };
 }
+
+export function usePatientOrOfflineRegisteredPatient(patientUuid: string): ReturnType<typeof usePatient> {
+  const onlinePatientState = usePatient(patientUuid);
+  const offlinePatientState = useSWR(`offlineRegisteredPatient/${patientUuid}`, async () => {
+    const offlinePatient = await getOfflineRegisteredPatientAsFhirPatient(patientUuid);
+    if (!offlinePatient) {
+      throw new Error(`No offline registered patient could be found. UUID: ${patientUuid}`);
+    }
+
+    return offlinePatient;
+  });
+
+  if (onlinePatientState.isLoading || (!offlinePatientState.data && !offlinePatientState.error)) {
+    return {
+      isLoading: true,
+      patient: null,
+      patientUuid,
+      error: null,
+    };
+  }
+
+  if (onlinePatientState.patient && !(onlinePatientState.patient as any).issue) {
+    return {
+      isLoading: false,
+      patient: onlinePatientState.patient,
+      patientUuid,
+      error: null,
+    };
+  }
+
+  if (offlinePatientState.data) {
+    return {
+      isLoading: false,
+      patient: offlinePatientState.data,
+      patientUuid,
+      error: null,
+    };
+  }
+
+  return {
+    isLoading: false,
+    patient: null,
+    patientUuid,
+    error: onlinePatientState.error ?? offlinePatientState.error,
+  };
+}
+
+async function getOfflineRegisteredPatientAsFhirPatient(patientUuid: string): Promise<fhir.Patient | undefined> {
+  const patientRegistrationSyncItems = await getSynchronizationItems<any>(patientRegistrationSyncType);
+  const patientSyncItem = patientRegistrationSyncItems.find((item) => item.fhirPatient.id === patientUuid);
+  return patientSyncItem.fhirPatient;
+}

packages/esm-patient-chart-app/src/ui-components/patient-chart.component.tsx

@@ -4,9 +4,9 @@ import Loader from './loader.component';
 import ChartReview from '../view-components/chart-review.component';
 import VisitDialog from '../visit/visit-dialog.component';
 import { RouteComponentProps } from 'react-router-dom';
-import { detachAll, ExtensionSlot, usePatient, useSessionUser } from '@openmrs/esm-framework';
+import { detachAll, ExtensionSlot, useSessionUser } from '@openmrs/esm-framework';
 import ActionMenu from './action-menu.component';
-import { useOfflineVisitForPatient } from '../offline';
+import { useOfflineVisitForPatient, usePatientOrOfflineRegisteredPatient } from '../offline';
 import { useContextWorkspace } from '../hooks/useContextWindowSize';
 import { WorkspaceWindowState } from '../types';
 import WorkspaceNotification from './workspace-notification.component';
@@ -19,7 +19,7 @@ interface PatientChartParams {
 
 const PatientChart: React.FC<RouteComponentProps<PatientChartParams>> = ({ match }) => {
   const { patientUuid, view, subview } = match.params;
-  const { isLoading, patient } = usePatient(patientUuid);
+  const { isLoading, patient } = usePatientOrOfflineRegisteredPatient(patientUuid);
   const sessionUser = useSessionUser();
   const state = useMemo(() => ({ patient, patientUuid }), [patient, patientUuid]);
   const { windowSize, openWindows } = useContextWorkspace();