From 37dd2aafdd2cc213534d140a777a6cd170df0fec Mon Sep 17 00:00:00 2001
From: Dennis Kigen <kigen.work@gmail.com>
Date: Wed, 23 Oct 2024 13:45:09 +0300
Subject: [PATCH] (fix) Fix React missing prop warning

---
 .../clinic-metrics.component.tsx              | 12 +++----
 .../metrics-header.component.tsx              | 31 ++++++++++---------
 2 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/packages/esm-service-queues-app/src/patient-queue-metrics/clinic-metrics.component.tsx b/packages/esm-service-queues-app/src/patient-queue-metrics/clinic-metrics.component.tsx
index 38a7c63e2..30747b368 100644
--- a/packages/esm-service-queues-app/src/patient-queue-metrics/clinic-metrics.component.tsx
+++ b/packages/esm-service-queues-app/src/patient-queue-metrics/clinic-metrics.component.tsx
@@ -1,16 +1,15 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Dropdown } from '@carbon/react';
-import MetricsCard from './metrics-card.component';
-import MetricsHeader from './metrics-header.component';
+import { isDesktop, useLayoutType } from '@openmrs/esm-framework';
 import { updateSelectedService, useSelectedService, useSelectedQueueLocationUuid } from '../helpers/helpers';
 import { useActiveVisits, useAverageWaitTime } from './clinic-metrics.resource';
 import { useServiceMetricsCount } from './queue-metrics.resource';
-import styles from './clinic-metrics.scss';
-import { useQueues } from '../hooks/useQueues';
 import { useQueueEntries } from '../hooks/useQueueEntries';
+import MetricsCard from './metrics-card.component';
+import MetricsHeader from './metrics-header.component';
 import useQueueServices from '../hooks/useQueueService';
-import { isDesktop, useLayoutType } from '@openmrs/esm-framework';
+import styles from './clinic-metrics.scss';
 
 export interface Service {
   uuid: string;
@@ -64,13 +63,14 @@ function ClinicMetrics() {
           locationUuid={currentQueueLocation}>
           <Dropdown
             id="inline"
-            type="inline"
             items={[{ display: `${t('all', 'All')}` }, ...(services ?? [])]}
             itemToString={(item) =>
               item ? `${item.display} ${item.location?.display ? `- ${item.location.display}` : ''}` : ''
             }
+            label=""
             onChange={handleServiceChange}
             size={isDesktop(layout) ? 'sm' : 'lg'}
+            type="inline"
           />
         </MetricsCard>
         <MetricsCard
diff --git a/packages/esm-service-queues-app/src/patient-queue-metrics/metrics-header.component.tsx b/packages/esm-service-queues-app/src/patient-queue-metrics/metrics-header.component.tsx
index 1400b361f..c37499f12 100644
--- a/packages/esm-service-queues-app/src/patient-queue-metrics/metrics-header.component.tsx
+++ b/packages/esm-service-queues-app/src/patient-queue-metrics/metrics-header.component.tsx
@@ -1,3 +1,5 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import { ComboButton, MenuItem } from '@carbon/react';
 import {
   UserHasAccess,
@@ -8,22 +10,29 @@ import {
   useLayoutType,
   useSession,
 } from '@openmrs/esm-framework';
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import { spaBasePath } from '../constants';
 import styles from './metrics-header.scss';
 
 const MetricsHeader = () => {
   const { t } = useTranslation();
+  const currentUserSession = useSession();
+  const layout = useLayoutType();
+
   const metricsTitle = t('clinicMetrics', 'Clinic metrics');
   const queueScreenText = t('queueScreen', 'Queue screen');
-  const currentUserSession = useSession();
   const providerUuid = currentUserSession?.currentProvider?.uuid;
-  const layout = useLayoutType();
 
-  const navigateToQueueScreen = () => {
+  const launchAddProviderToRoomModal = useCallback(() => {
+    const dispose = showModal('add-provider-to-room-modal', {
+      closeModal: () => dispose(),
+      providerUuid,
+    });
+  }, [providerUuid]);
+
+  const navigateToQueueScreen = useCallback(() => {
     navigate({ to: `${spaBasePath}/service-queues/screen` });
-  };
+  }, []);
+
   return (
     <div className={styles.metricsContainer}>
       <span className={styles.metricsTitle}>{metricsTitle}</span>
@@ -44,15 +53,7 @@ const MetricsHeader = () => {
             onClick={() => launchWorkspace('service-queues-room-form')}
           />
         </UserHasAccess>
-        <MenuItem
-          label={t('addProviderQueueRoom', 'Add provider queue room')}
-          onClick={() => {
-            const dispose = showModal('add-provider-to-room-modal', {
-              closeModal: () => dispose(),
-              providerUuid,
-            });
-          }}
-        />
+        <MenuItem label={t('addProviderQueueRoom', 'Add provider queue room')} onClick={launchAddProviderToRoomModal} />
       </ComboButton>
     </div>
   );