Review feedback

Improvements to the VitalsOverview involving the use of the `withUnit` function. Additionally, this commit adds improvements to the Vitals resource that include: - Better type annotations. - Inlining the `filterByConceptUuid` function implementation in the `useVitals` hook. - Invoking `formatVitals` directly on the results of calling `filterByConceptUuid`. This has the corollary of reducing the number of lines of repetitive code significantly.
openmrs · Oct 4, 2021 · 0dba7d6 · 0dba7d6
1 parent d55f5ae
commit 0dba7d6
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 72 deletions.
diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-header/vitals-header.component.tsx b/packages/esm-patient-vitals-app/src/vitals/vitals-header/vitals-header.component.tsx
@@ -1,7 +1,6 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import dayjs from 'dayjs';
-import isEmpty from 'lodash-es/isEmpty';
 import InlineLoading from 'carbon-components-react/es/components/InlineLoading';
 import VitalsHeaderItem from './vitals-header-item.component';
 import VitalsHeaderTitle from './vitals-header-title.component';
@@ -50,34 +49,34 @@ const VitalsHeader: React.FC<VitalsHeaderProps> = ({ patientUuid, showRecordVita
               <div className={styles.row}>
                 <VitalsHeaderItem
                   unitName={t('temperatureAbbreviated', 'Temp')}
-                  unitSymbol={conceptUnits ? conceptUnits[2] : ''}
+                  unitSymbol={conceptUnits?.[2] ?? ''}
                   value={latestVitals?.temperature}
                 />
                 <VitalsHeaderItem
                   unitName={t('bp', 'BP')}
-                  unitSymbol={conceptUnits ? conceptUnits[0] : ''}
+                  unitSymbol={conceptUnits?.[0] ?? ''}
                   value={`${latestVitals?.systolic} / ${latestVitals?.diastolic}`}
                 />
                 <VitalsHeaderItem
                   unitName={t('heartRate', 'Heart Rate')}
-                  unitSymbol={conceptUnits ? conceptUnits[5] : ''}
+                  unitSymbol={conceptUnits?.[5] ?? ''}
                   value={latestVitals?.pulse}
                 />
                 <VitalsHeaderItem
                   unitName={t('spo2', 'SpO2')}
-                  unitSymbol={conceptUnits ? conceptUnits[6] : ''}
+                  unitSymbol={conceptUnits?.[6] ?? ''}
                   value={latestVitals?.oxygenSaturation}
                 />
               </div>
               <div className={styles.row}>
                 <VitalsHeaderItem
                   unitName={t('respiratoryRate', 'R. Rate')}
-                  unitSymbol={conceptUnits ? conceptUnits[8] : ''}
+                  unitSymbol={conceptUnits?.[8] ?? ''}
                   value={latestVitals?.respiratoryRate}
                 />
                 <VitalsHeaderItem
                   unitName={t('height', 'Height')}
-                  unitSymbol={conceptUnits ? conceptUnits[3] : ''}
+                  unitSymbol={conceptUnits?.[3] ?? ''}
                   value={latestVitals?.height}
                 />
                 <VitalsHeaderItem
@@ -87,7 +86,7 @@ const VitalsHeader: React.FC<VitalsHeaderProps> = ({ patientUuid, showRecordVita
                 />
                 <VitalsHeaderItem
                   unitName={t('weight', 'Weight')}
-                  unitSymbol={conceptUnits ? conceptUnits[4] : ''}
+                  unitSymbol={conceptUnits?.[4] ?? ''}
                   value={latestVitals?.weight}
                 />
               </div>

diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals-overview.component.tsx b/packages/esm-patient-vitals-app/src/vitals/vitals-overview.component.tsx
@@ -40,20 +40,20 @@ const VitalsOverview: React.FC<VitalsOverviewProps> = ({ patientUuid, showAddVit
     { key: 'date', header: 'Date and time', isSortable: true },
     {
       key: 'bloodPressure',
-      header: withUnit('BP', conceptUnits ? conceptUnits[0] : ''),
+      header: withUnit('BP', conceptUnits?.[0] ?? ''),
     },
     {
       key: 'respiratoryRate',
-      header: withUnit('R. Rate', conceptUnits ? conceptUnits[8] : ''),
+      header: withUnit('R. Rate', conceptUnits?.[8] ?? ''),
     },
-    { key: 'pulse', header: withUnit('Pulse', conceptUnits ? conceptUnits[5] : '') },
+    { key: 'pulse', header: withUnit('Pulse', conceptUnits?.[5] ?? '') },
     {
       key: 'spo2',
-      header: withUnit('SPO2', conceptUnits ? conceptUnits[6] : ''),
+      header: withUnit('SPO2', conceptUnits?.[6] ?? ''),
     },
     {
       key: 'temperature',
-      header: withUnit('Temp', conceptUnits ? conceptUnits[2] : ''),
+      header: withUnit('Temp', conceptUnits?.[2] ?? ''),
     },
   ];
 

diff --git a/packages/esm-patient-vitals-app/src/vitals/vitals.resource.tsx b/packages/esm-patient-vitals-app/src/vitals/vitals.resource.tsx
@@ -1,72 +1,43 @@
 import useSWR from 'swr';
 import { PatientVitalAndBiometric } from './vitals-biometrics-form/vitals-biometrics-form.component';
-import { openmrsFetch, fhirBaseUrl, useConfig } from '@openmrs/esm-framework';
+import { openmrsFetch, fhirBaseUrl, useConfig, FHIRResource } from '@openmrs/esm-framework';
 import { calculateBMI } from './vitals-biometrics-form/vitals-biometrics-form.utils';
 import { ConfigObject } from '../config-schema';
 
 export const pageSize = 100;
 
+type Vitals = Array<FHIRResource['resource']>;
+
 export function useVitals(patientUuid: string) {
-  const config = useConfig();
-  const vitalsConcepts = {
-    systolicBloodPressure: config.concepts.systolicBloodPressureUuid,
-    diastolicBloodPressure: config.concepts.diastolicBloodPressureUuid,
-    pulse: config.concepts.pulseUuid,
-    temperature: config.concepts.temperatureUuid,
-    oxygenSaturation: config.concepts.oxygenSaturationUuid,
-    height: config.concepts.heightUuid,
-    weight: config.concepts.weightUuid,
-    respiratoryRate: config.concepts.respiratoryRateUuid,
-  };
+  const { concepts } = useConfig();
 
   const { data, error, isValidating } = useSWR<{ data: VitalsFetchResponse }, Error>(
     `${fhirBaseUrl}/Observation?subject:Patient=${patientUuid}&code=` +
-      Object.values(vitalsConcepts).join(',') +
+      Object.values(concepts).join(',') +
       '&_summary=data&_sort=-date' +
       `&_count=${pageSize}
   `,
     openmrsFetch,
   );
 
-  const observations = data?.data?.total > 0 ? data.data?.entry?.map((entry) => entry.resource ?? []) : null;
+  const filterByConceptUuid = (vitals: Vitals, conceptUuid: string) => {
+    return vitals.filter((obs) => obs.code.coding.some((c) => c.code === conceptUuid));
+  };
 
-  const systolicBloodPressureData = observations?.filter((obs) =>
-    obs.code.coding.some((sys) => sys.code === config.concepts.systolicBloodPressureUuid),
-  );
-  const diastolicBloodPressureData = observations?.filter((obs) =>
-    obs.code.coding.some((sys) => sys.code === config.concepts.diastolicBloodPressureUuid),
-  );
-  const pulseData = observations?.filter((obs) =>
-    obs.code.coding.some((sys) => sys.code === config.concepts.pulseUuid),
-  );
-  const temperatureData = observations?.filter((obs) =>
-    obs.code.coding.some((sys) => sys.code === config.concepts.temperatureUuid),
-  );
-  const oxygenSaturationData = observations?.filter((obs) =>
-    obs.code.coding.some((sys) => sys.code === config.concepts.oxygenSaturationUuid),
-  );
-  const heightData = observations?.filter((obs) =>
-    obs.code.coding.some((sys) => sys.code === config.concepts.heightUuid),
-  );
-  const weightData = observations?.filter((obs) =>
-    obs.code.coding.some((sys) => sys.code === config.concepts.weightUuid),
-  );
-  const respiratoryRateData = observations?.filter((obs) =>
-    obs.code.coding.some((sys) => sys.code === config.concepts.respiratoryRateUuid),
-  );
+  const observations: Vitals = data?.data?.entry?.map((entry) => entry.resource) ?? [];
 
   return {
     data:
       data?.data?.total > 0
         ? formatVitals(
-            systolicBloodPressureData,
-            diastolicBloodPressureData,
-            pulseData,
-            temperatureData,
-            oxygenSaturationData,
-            heightData,
-            weightData,
-            respiratoryRateData,
+            filterByConceptUuid(observations, concepts.systolicBloodPressureUuid),
+            filterByConceptUuid(observations, concepts.diastolicBloodPressureUuid),
+            filterByConceptUuid(observations, concepts.pulseUuid),
+            filterByConceptUuid(observations, concepts.temperatureUuid),
+            filterByConceptUuid(observations, concepts.oxygenSaturationUuid),
+            filterByConceptUuid(observations, concepts.heightUuid),
+            filterByConceptUuid(observations, concepts.weightUuid),
+            filterByConceptUuid(observations, concepts.respiratoryRateUuid),
           )
         : null,
     isError: error,
@@ -75,8 +46,6 @@ export function useVitals(patientUuid: string) {
   };
 }
 
-type Vitals = Array<{ issued: Date; valueQuantity: any; encounter: any }>;
-
 function formatVitals(
   systolicBloodPressure: Vitals,
   diastolicBloodPressure: Vitals,
@@ -198,20 +167,20 @@ export function editPatientVitals(
 export interface PatientVitals {
   id: string;
   date: Date | string;
-  systolic?: string;
-  diastolic?: string;
-  pulse?: string;
-  temperature?: string;
-  oxygenSaturation?: string;
-  height?: string;
-  weight?: string;
-  bmi?: any;
-  respiratoryRate?: string;
+  systolic?: number;
+  diastolic?: number;
+  pulse?: number;
+  temperature?: number;
+  oxygenSaturation?: number;
+  height?: number;
+  weight?: number;
+  bmi?: number | null;
+  respiratoryRate?: number;
 }
 
 interface VitalsFetchResponse {
   entry: Array<{
-    resource: any;
+    resource: FHIRResource['resource'];
   }>;
   id: string;
   meta: {