(fix) O3-3978: Fix error in orders details table when orders are pote…

…ntially undefined (#2058) * fix: fix error-cannot read property length * Additional tweaks --------- Co-authored-by: Dennis Kigen <[email protected]>
openmrs · Oct 16, 2024 · 0c438fe · 0c438fe
1 parent 1af01f7
commit 0c438fe
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 45 deletions.
diff --git a/packages/esm-patient-common-lib/src/orders/useOrders.ts b/packages/esm-patient-common-lib/src/orders/useOrders.ts
@@ -1,8 +1,9 @@
+import { useCallback, useMemo } from 'react';
 import useSWR, { useSWRConfig } from 'swr';
 import { type FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
-import { useCallback, useMemo } from 'react';
 import { type OrderTypeFetchResponse, type PatientOrderFetchResponse } from '@openmrs/esm-patient-common-lib';
 
+export type Status = 'ACTIVE' | 'any';
 export const careSettingUuid = '6f0c9a92-6f24-11e3-af88-005056821db0';
 
 export const drugCustomRepresentation =
@@ -13,7 +14,7 @@ export const drugCustomRepresentation =
   'frequency:ref,asNeeded,asNeededCondition,quantity,quantityUnits:ref,numRefills,dosingInstructions,' +
   'duration,durationUnits:ref,route:ref,brandName,dispenseAsWritten)';
 
-export function usePatientOrders(patientUuid: string, status?: 'ACTIVE' | 'any', orderType?: string) {
+export function usePatientOrders(patientUuid: string, status?: Status, orderType?: string) {
   const { mutate } = useSWRConfig();
   const baseOrdersUrl = `${restBaseUrl}/order?patient=${patientUuid}&careSetting=${careSettingUuid}&v=full&status=${status}`;
   const ordersUrl = orderType ? `${baseOrdersUrl}&orderType=${orderType}` : baseOrdersUrl;
@@ -26,7 +27,7 @@ export function usePatientOrders(patientUuid: string, status?: 'ACTIVE' | 'any',
   const mutateOrders = useCallback(
     () =>
       mutate((key) => typeof key === 'string' && key.startsWith(`${restBaseUrl}/order?patient=${patientUuid}`), data),
-    [patientUuid, data, mutate],
+    [data, mutate, patientUuid],
   );
 
   const orders = useMemo(
@@ -54,7 +55,7 @@ export function useOrderTypes() {
   );
 
   return {
-    data: data?.data?.results,
+    data: data?.data?.results ?? null,
     error,
     isLoading,
     isValidating,

diff --git a/packages/esm-patient-orders-app/src/components/order-details-table.scss b/packages/esm-patient-orders-app/src/components/order-details-table.scss
@@ -31,6 +31,10 @@
 
 .dropdownContainer {
   min-width: max-content;
+
+  :global(.cds--dropdown__wrapper--inline) {
+    grid-gap: 0 0.5rem;
+  }
 }
 
 .buttons {

diff --git a/packages/esm-patient-orders-app/src/components/orders-details-table.component.tsx b/packages/esm-patient-orders-app/src/components/orders-details-table.component.tsx
@@ -177,43 +177,45 @@ const OrderDetailsTable: React.FC<OrderDetailsProps> = ({ patientUuid, showAddBu
     },
   ];
 
-  const tableRows = useMemo(() => {
-    return allOrders?.map((order) => ({
-      id: order.uuid,
-      dateActivated: order.dateActivated,
-      orderNumber: order.orderNumber,
-      dateOfOrder: <div className={styles.singleLineText}>{formatDate(new Date(order.dateActivated))}</div>,
-      orderType: capitalize(order.orderType?.display ?? '--'),
-      order: order.display,
-      priority: (
-        <div className={styles.priorityPill} data-priority={lowerCase(order.urgency)}>
-          {
-            // t('ON_SCHEDULED_DATE', 'On scheduled date')
-            // t('ROUTINE', 'Routine')
-            // t('STAT', 'STAT')
-          }
-          {t(order.urgency, capitalize(order.urgency.replace('_', ' ')))}
-        </div>
-      ),
-      orderedBy: order.orderer?.display,
-      status: order.fulfillerStatus ? (
-        <div className={styles.statusPill} data-status={lowerCase(order.fulfillerStatus.replace('_', ' '))}>
-          {
-            // t('RECEIVED', 'Received')
-            // t('IN_PROGRESS', 'In progress')
-            // t('EXCEPTION', 'Exception')
-            // t('ON_HOLD', 'On hold')
-            // t('DECLINED', 'Declined')
-            // t('COMPLETED', 'Completed')
-            // t('DISCONTINUED', 'Discontinued')
-          }
-          {t(order.fulfillerStatus, capitalize(order.fulfillerStatus.replace('_', ' ')))}
-        </div>
-      ) : (
-        '--'
-      ),
-    }));
-  }, [allOrders, t]);
+  const tableRows = useMemo(
+    () =>
+      allOrders?.map((order) => ({
+        id: order.uuid,
+        dateActivated: order.dateActivated,
+        orderNumber: order.orderNumber,
+        dateOfOrder: <div className={styles.singleLineText}>{formatDate(new Date(order.dateActivated))}</div>,
+        orderType: capitalize(order.orderType?.display ?? '--'),
+        order: order.display,
+        priority: (
+          <div className={styles.priorityPill} data-priority={lowerCase(order.urgency)}>
+            {
+              // t('ON_SCHEDULED_DATE', 'On scheduled date')
+              // t('ROUTINE', 'Routine')
+              // t('STAT', 'STAT')
+            }
+            {t(order.urgency, capitalize(order.urgency.replace('_', ' ')))}
+          </div>
+        ),
+        orderedBy: order.orderer?.display,
+        status: order.fulfillerStatus ? (
+          <div className={styles.statusPill} data-status={lowerCase(order.fulfillerStatus.replace('_', ' '))}>
+            {
+              // t('RECEIVED', 'Received')
+              // t('IN_PROGRESS', 'In progress')
+              // t('EXCEPTION', 'Exception')
+              // t('ON_HOLD', 'On hold')
+              // t('DECLINED', 'Declined')
+              // t('COMPLETED', 'Completed')
+              // t('DISCONTINUED', 'Discontinued')
+            }
+            {t(order.fulfillerStatus, capitalize(order.fulfillerStatus.replace('_', ' ')))}
+          </div>
+        ) : (
+          '--'
+        ),
+      })) ?? [],
+    [allOrders, t],
+  );
 
   const { results: paginatedOrders, goTo, currentPage } = usePagination(tableRows, defaultPageSize);
 
@@ -301,7 +303,7 @@ const OrderDetailsTable: React.FC<OrderDetailsProps> = ({ patientUuid, showAddBu
             setSelectedOrderTypeUuid(e.selectedItem.uuid);
           }}
           selectedItem={orderTypes?.find((x) => x.uuid === selectedOrderTypeUuid)}
-          titleText={t('selectOrderType', 'Select order type')}
+          titleText={t('selectOrderType', 'Select order type') + ':'}
           type="inline"
         />
       </div>
@@ -318,16 +320,15 @@ const OrderDetailsTable: React.FC<OrderDetailsProps> = ({ patientUuid, showAddBu
         if (orderTypes && orderTypes?.length > 0) {
           return (
             <>
-              {!tableRows.length ? (
-                // FIXME: The displayText translation is not working as expected
+              {!tableRows?.length ? (
                 <EmptyState
                   headerTitle={headerTitle}
                   displayText={
                     selectedOrderTypeUuid === null
                       ? t('orders', 'Orders')
                       : // t('Drug Order_few', 'Drug Orders')
                         // t('Test Order_few', 'Test Orders')
-                        t(selectedOrderName, {
+                        t(selectedOrderName?.toLowerCase() ?? 'orders', {
                           count: 3,
                           default: selectedOrderName,
                         })