code review

openmrs · Dec 16, 2024 · 3554f5c · 3554f5c
1 parent 9d3b82f
commit 3554f5c
Show file tree

Hide file tree

Showing 9 changed files with 151 additions and 121 deletions.
diff --git a/.../esm-patient-chart-app/src/clinical-views/components/clinical-views-summary.component.tsx b/.../esm-patient-chart-app/src/clinical-views/components/clinical-views-summary.component.tsx
@@ -1,15 +1,15 @@
-import React, { useMemo } from 'react';
+import React, { memo, useMemo } from 'react';
 
 import { useTranslation } from 'react-i18next';
 import { EncounterTile } from './encounter-tile/encounter-tile.component';
 import { type ConfigObject, useConfig } from '@openmrs/esm-framework';
-import { getEncounterTileColumns, type MenuCardProps } from '../utils/encounter-tile-config-builder';
+import { getEncounterTileColumns, type MenuCardProps } from '../utils';
 
 interface OverviewListProps {
   patientUuid: string;
 }
 
-const ClinicalViewsSummary: React.FC<OverviewListProps> = ({ patientUuid }) => {
+const ClinicalViewsSummary: React.FC<OverviewListProps> = memo(({ patientUuid }) => {
   const config = useConfig<ConfigObject>();
   const { t } = useTranslation();
   const tileDefinitions = config.tilesDefinitions;
@@ -29,6 +29,6 @@ const ClinicalViewsSummary: React.FC<OverviewListProps> = ({ patientUuid }) => {
         ))}
     </>
   );
-};
+});
 
 export default ClinicalViewsSummary;
diff --git a/...tient-chart-app/src/clinical-views/components/encounter-tile/encounter-tile.component.tsx b/...tient-chart-app/src/clinical-views/components/encounter-tile/encounter-tile.component.tsx
@@ -1,20 +1,20 @@
-import { CodeSnippetSkeleton, Tile, Column, Layer } from '@carbon/react';
 import React, { useMemo } from 'react';
+import { useLayoutType } from '@openmrs/esm-framework';
+import { CodeSnippetSkeleton, Tile, Column, Layer } from '@carbon/react';
 import styles from './tile.scss';
-import { groupColumnsByEncounterType } from '../../utils/helpers';
+import { type Encounter, groupColumnsByEncounterType } from '../../utils/helpers';
 import { useLastEncounter } from '../../hooks/useLastEncounter';
-import { LazyCell } from '../../../lazy-cell/lazy-cell.component';
 import { useTranslation } from 'react-i18next';
-import { type FormattedCardColumn } from '../../utils/encounter-tile-config-builder';
-import { useLayoutType } from '@openmrs/esm-framework';
 
 export interface EncounterTileColumn {
   key: string;
   header: string;
   encounterUuid: string;
-  getObsValue: (encounter: any) => string | Promise<string>;
-  getSummaryObsValue?: (encounter: any) => string | Promise<string>;
-  encounter?: any;
+  concept: string;
+  title?: string;
+  getObsValue: (encounter: Encounter) => string;
+  getSummaryObsValue?: (encounter: Encounter) => string;
+  encounter?: Encounter;
   hasSummary?: Boolean;
 }
 export interface EncounterTileProps {
@@ -23,12 +23,7 @@ export interface EncounterTileProps {
   headerTitle: string;
 }
 
-export interface EncounterValuesTileProps {
-  patientUuid: string;
-  column: any;
-}
-
-const EncounterTileInternal: React.FC<EncounterTileProps> = ({ patientUuid, columns, headerTitle }) => {
+export const EncounterTile = React.memo(({ patientUuid, columns, headerTitle }: EncounterTileProps) => {
   const columnsByEncounterType = useMemo(() => groupColumnsByEncounterType(columns), [columns]);
   const isTablet = useLayoutType() === 'tablet';
 
@@ -39,41 +34,39 @@ const EncounterTileInternal: React.FC<EncounterTileProps> = ({ patientUuid, colu
           <h4 className={styles.title}>{headerTitle}</h4>
         </div>
         <Column className={styles.columnContainer}>
-          {Object.entries(columnsByEncounterType).map(([encounterType, columns]) => (
+          {Object.entries(columnsByEncounterType).map(([encounterUuid, columns]) => (
             <EncounterData
-              key={encounterType}
+              key={encounterUuid}
               patientUuid={patientUuid}
-              encounterType={encounterType}
-              columns={columns as FormattedCardColumn[]}
+              encounterType={encounterUuid}
+              columns={columns}
             />
           ))}
         </Column>
       </Tile>
     </Layer>
   );
-};
-
-export const EncounterTile = React.memo(EncounterTileInternal);
+});
 
 const EncounterData: React.FC<{
   patientUuid: string;
   encounterType: string;
-  columns: FormattedCardColumn[];
+  columns: EncounterTileColumn[];
 }> = ({ patientUuid, encounterType, columns }) => {
   const { lastEncounter, isLoading, error, isValidating } = useLastEncounter(patientUuid, encounterType);
   const { t } = useTranslation();
 
   if (isLoading || isValidating) {
-    return <CodeSnippetSkeleton type="multi" data-testid="skeleton-text" />;
+    return <CodeSnippetSkeleton type="multi" role="progressbar" />;
   }
 
-  if (error || lastEncounter === undefined) {
+  if (error || lastEncounter == undefined) {
     return (
       <div className={styles.tileBox}>
         {columns.map((column, ind) => (
-          <div key={ind} className={styles.tileBoxColumn}>
+          <div key={ind}>
             <span className={styles.tileTitle}>{t(column.title)}</span>
-            <span className={styles.tileValue}>--</span>
+            <span className={styles.tileValue}>{error?.message}</span>
           </div>
         ))}
       </div>
@@ -82,19 +75,26 @@ const EncounterData: React.FC<{
 
   return (
     <div className={styles.tileBox}>
-      {columns.map((column, ind) => (
-        <div key={ind} className={styles.tileBoxColumn}>
-          <span className={styles.tileTitle}>{column.title}</span>
-          <span className={styles.tileValue}>
-            <LazyCell lazyValue={column.getObsValue(lastEncounter)} />
-          </span>
-          {column.hasSummary && (
-            <span className={styles.tileTitle}>
-              <LazyCell lazyValue={column.getSummaryObsValue(lastEncounter)} />
+      {columns.map((column, ind) => {
+        return (
+          <div key={ind}>
+            <span className={styles.tileTitle}>{column.header}</span>
+            <span className={styles.tileValue}>
+              <p>{column.getObsValue(lastEncounter)}</p>
             </span>
-          )}
-        </div>
-      ))}
+            {column.hasSummary && (
+              <>
+                <span className={styles.tileValue}>
+                  <p>{column.getSummaryObsValue(lastEncounter)}</p>
+                </span>
+                <span className={styles.tileValue}>
+                  <p>{column.getObsValue(lastEncounter)}</p>
+                </span>
+              </>
+            )}
+          </div>
+        );
+      })}
     </div>
   );
 };
diff --git a/packages/esm-patient-chart-app/src/clinical-views/components/encounter-tile/tile.scss b/packages/esm-patient-chart-app/src/clinical-views/components/encounter-tile/tile.scss
@@ -15,37 +15,29 @@
 }
 
 .tileTitle {
-  @include type.type-style('label-01');
+  @include type.type-style('body-long-01');
   display: block;
   padding-top: layout.$spacing-05;
 }
 
 .columnContainer {
-  margin: 0px 0px layout.$spacing-06 layout.$spacing-06;
   display: flex;
   flex-direction: row;
 }
 
-.tileBoxColumn {
-  width: 100%;
-  display: 'flex';
-  flex-direction: 'row';
-}
-
 .tileSubTitle {
   @include type.type-style('body-compact-01');
 }
 
 .tileValue {
-  @include type.type-style('body-long-01');
-  margin: layout.$spacing-05 layout.$spacing-10 layout.$spacing-06 0;
+  @include type.type-style('label-01');
+  margin: layout.$spacing-04 0 layout.$spacing-04;
+  display: block;
 }
 
 .tileBox {
-  width: 25%;
   display: flex;
-  flex-direction: row;
-  flex: 1;
+  gap: layout.$spacing-05;
 }
 
 .desktopHeading {
@@ -72,7 +64,7 @@
     content: '';
     display: block;
     width: layout.$spacing-07;
-    padding-top: 0.188rem;
+    padding-top: layout.$spacing-01;
     border-bottom: 0.375rem solid var(--brand-03);
   }
 }
@@ -81,12 +73,11 @@
   content: '';
   display: block;
   width: layout.$spacing-07;
-  padding-top: 0.188rem;
+  padding-top: layout.$spacing-01;
   border-bottom: 0.375rem solid var(--brand-03);
 }
 
 .tile {
-  text-align: center;
   border: 1px solid $ui-03;
   margin-bottom: layout.$spacing-03;
 }

diff --git a/packages/esm-patient-chart-app/src/clinical-views/hooks/useLastEncounter.ts b/packages/esm-patient-chart-app/src/clinical-views/hooks/useLastEncounter.ts
@@ -1,27 +1,49 @@
 import { openmrsFetch } from '@openmrs/esm-framework';
-import { type OpenmrsEncounter } from '@openmrs/esm-patient-common-lib';
 
 import useSWR from 'swr';
+import { type Encounter } from '../utils/helpers';
 
 export const encounterRepresentation =
   'custom:(uuid,encounterDatetime,encounterType,location:(uuid,name),' +
   'patient:(uuid,display,age,identifiers,person),encounterProviders:(uuid,provider:(uuid,name)),' +
   'obs:(uuid,obsDatetime,voided,groupMembers,concept:(uuid,display,name:(uuid,name)),value:(uuid,name:(uuid,name,display),' +
   'names:(uuid,conceptNameType,name,display))),form:(uuid,name))';
 
+const cache = new Map();
+
 export function useLastEncounter(patientUuid: string, encounterType: string) {
   const query = `encounterType=${encounterType}&patient=${patientUuid}&limit=1&order=desc&startIndex=0`;
-  const endpointUrl = `/ws/rest/v1/encounter?${query}&v=${encounterRepresentation}`;
+  const endpointUrl =
+    patientUuid && encounterType ? `/ws/rest/v1/encounter?${query}&v=${encounterRepresentation}` : null;
+
+  const cacheKey = endpointUrl;
 
-  const { data, error, isValidating } = useSWR<{ data: { results: Array<OpenmrsEncounter> } }, Error>(
-    endpointUrl,
-    openmrsFetch,
-    { dedupingInterval: 5000, refreshInterval: 0 },
+  const { data, error, isValidating, isLoading } = useSWR<{ results: Array<Encounter> }, Error>(
+    cacheKey,
+    async (url) => {
+      const cachedData = cache.get(url);
+      if (cachedData) {
+        return cachedData;
+      }
+      const response = await openmrsFetch(url);
+
+      if (!response.ok) {
+        throw new Error('Failed to fetch data');
+      }
+      const responseData = await response.json();
+      cache.set(url, responseData);
+      return responseData;
+    },
+    {
+      dedupingInterval: 50000,
+      refreshInterval: 0,
+    },
   );
+
   return {
-    lastEncounter: data ? data?.data?.results.shift() : null,
+    lastEncounter: data ? data.results?.length > 0 && data.results[0] : null,
     error,
-    isLoading: !data && !error,
+    isLoading,
     isValidating,
   };
 }