fix : remove provider reloads (#247)

* fix : remove provider reloads * fix undefined provider * fix build * update fix * fix build * fix undefined * fix * fix build * fix build * fix comments * fix deley in pick button * fix delay in pick button * fix delay in pick button
METS-Programme · Sep 6, 2024 · 574e52a · 574e52a
1 parent 88489b4
commit 574e52a
Show file tree

Hide file tree

Showing 10 changed files with 130 additions and 110 deletions.
diff --git a/packages/esm-patient-queues-app/src/active-visits/active-visits-table.component.tsx b/packages/esm-patient-queues-app/src/active-visits/active-visits-table.component.tsx
@@ -192,7 +192,7 @@ const ActiveVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status }) => {
       },
       actions: {
         content: (
-          <>
+          <div style={{ display: 'flex' }}>
             {entry.status === 'COMPLETED' ||
               (entry.status === 'PENDING' && (
                 <>
@@ -204,7 +204,7 @@ const ActiveVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status }) => {
               ))}
             <ViewActionsMenu to={`\${openmrsSpaBase}/patient/${entry?.patientUuid}/chart`} from={fromPage} />
             <NotesActionsMenu note={entry} />
-          </>
+          </div>
         ),
       },
     }));

diff --git a/packages/esm-patient-queues-app/src/active-visits/change-status-dialog.component.tsx b/packages/esm-patient-queues-app/src/active-visits/change-status-dialog.component.tsx
@@ -8,9 +8,9 @@ import {
   Select,
   SelectItem,
   Switch,
+  InlineLoading,
   TextArea,
 } from '@carbon/react';
-
 import {
   navigate,
   parseDate,
@@ -21,19 +21,16 @@ import {
   useSession,
   useVisit,
 } from '@openmrs/esm-framework';
-
 import { addQueueEntry, getCareProvider, updateQueueEntry } from './active-visits-table.resource';
 import { first } from 'rxjs/operators';
-
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQueueRoomLocations } from '../hooks/useQueueRooms';
 import { MappedQueueEntry } from '../types';
 import { ArrowUp, ArrowDown } from '@carbon/react/icons';
-
 import styles from './change-status-dialog.scss';
 import { useProviders } from '../visit-form/queue.resource';
-import { QueueStatus } from '../utils/utils';
+import { QueueStatus, extractErrorMessagesFromResponse } from '../utils/utils';
 
 interface ChangeStatusDialogProps {
   queueEntry: MappedQueueEntry;
@@ -66,20 +63,35 @@ const ChangeStatus: React.FC<ChangeStatusDialogProps> = ({ queueEntry, currentEn
 
   const { activeVisit } = useVisit(queueEntry.patientUuid);
 
-  getCareProvider(sessionUser?.user?.uuid).then(
-    (response) => {
-      setProvider(response?.data?.results[0].uuid);
-      mutate();
-    },
-    (error) => {
-      showNotification({
-        title: t(`errorGettingProvider', 'Couldn't get provider`),
-        kind: 'error',
-        critical: true,
-        description: error?.message,
-      });
-    },
-  );
+  const [isLoading, setIsLoading] = useState(true);
+
+  // Memoize the function to fetch the provider using useCallback
+  const fetchProvider = useCallback(() => {
+    if (!sessionUser?.user?.uuid) return;
+
+    setIsLoading(true);
+
+    getCareProvider(sessionUser?.user?.uuid).then(
+      (response) => {
+        const uuid = response?.data?.results[0].uuid;
+        setIsLoading(false);
+        setProvider(uuid);
+        mutate();
+      },
+      (error) => {
+        const errorMessages = extractErrorMessagesFromResponse(error);
+        setIsLoading(false);
+        showNotification({
+          title: "Couldn't get provider",
+          kind: 'error',
+          critical: true,
+          description: errorMessages.join(','),
+        });
+      },
+    );
+  }, [sessionUser?.user?.uuid, mutate]);
+
+  useEffect(() => fetchProvider(), [fetchProvider]);
 
   useMemo(() => {
     switch (statusSwitcherIndex) {
@@ -457,7 +469,11 @@ const ChangeStatus: React.FC<ChangeStatusDialogProps> = ({ queueEntry, currentEn
             <Button kind="danger" onClick={endCurrentVisit}>
               {t('endVisit', 'End Visit')}
             </Button>
-            <Button type="submit">{status === 'pending' ? 'Save' : 'Move to the next queue room'}</Button>
+            {isLoading ? (
+              <InlineLoading description={'Fetching Provider..'} />
+            ) : (
+              <Button type="submit">{status === 'pending' ? 'Save' : 'Move to the next queue room'}</Button>
+            )}
           </ModalFooter>
         </Form>
       </div>

diff --git a/.../esm-patient-queues-app/src/active-visits/change-status-move-to-next-dialog.component.tsx b/.../esm-patient-queues-app/src/active-visits/change-status-move-to-next-dialog.component.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   Button,
   ContentSwitcher,
@@ -10,6 +10,7 @@ import {
   SelectItem,
   Switch,
   TextArea,
+  InlineLoading,
 } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import {
@@ -42,6 +43,8 @@ const ChangeStatusMoveToNext: React.FC<ChangeStatusDialogProps> = ({ patientUuid
 
   const { providers } = useProviders();
 
+  const [isLoading, setIsLoading] = useState(true);
+
   const [contentSwitcherIndex, setContentSwitcherIndex] = useState(1);
 
   const [statusSwitcherIndex, setStatusSwitcherIndex] = useState(1);
@@ -60,22 +63,33 @@ const ChangeStatusMoveToNext: React.FC<ChangeStatusDialogProps> = ({ patientUuid
 
   const { activeVisit } = useVisit(patientUuid);
 
-  getCareProvider(sessionUser?.user?.uuid).then(
-    (response) => {
-      setProvider(response?.data?.results[0].uuid);
-      mutate();
-    },
-    (error) => {
-      const errorMessages = extractErrorMessagesFromResponse(error);
-
-      showNotification({
-        title: t(`errorGettingProvider', 'Couldn't get provider`),
-        kind: 'error',
-        critical: true,
-        description: errorMessages.join(','),
-      });
-    },
-  );
+  // Memoize the function to fetch the provider using useCallback
+  const fetchProvider = useCallback(() => {
+    if (!sessionUser?.user?.uuid) return;
+
+    setIsLoading(true);
+
+    getCareProvider(sessionUser?.user?.uuid).then(
+      (response) => {
+        const uuid = response?.data?.results[0].uuid;
+        setIsLoading(false);
+        setProvider(uuid);
+        mutate();
+      },
+      (error) => {
+        const errorMessages = extractErrorMessagesFromResponse(error);
+        setIsLoading(false);
+        showNotification({
+          title: "Couldn't get provider",
+          kind: 'error',
+          critical: true,
+          description: errorMessages.join(','),
+        });
+      },
+    );
+  }, [sessionUser?.user?.uuid, mutate]);
+
+  useEffect(() => fetchProvider(), [fetchProvider]);
 
   useMemo(() => {
     switch (statusSwitcherIndex) {
@@ -594,7 +608,11 @@ const ChangeStatusMoveToNext: React.FC<ChangeStatusDialogProps> = ({ patientUuid
           <Button kind="danger" onClick={endCurrentVisit}>
             {t('endVisit', 'End Visit')}
           </Button>
-          <Button type="submit">{status === 'pending' ? 'Save' : 'Move to the next queue room'}</Button>
+          {isLoading ? (
+            <InlineLoading description={'Fetching Provider..'} />
+          ) : (
+            <Button type="submit">{status === 'pending' ? 'Save' : 'Move to the next queue room'}</Button>
+          )}
         </ModalFooter>
       </Form>
     </div>

diff --git a/packages/esm-patient-queues-app/src/active-visits/edit-action-menu.components.tsx b/packages/esm-patient-queues-app/src/active-visits/edit-action-menu.components.tsx
@@ -1,4 +1,4 @@
-import { Button, Tooltip } from '@carbon/react';
+import { Button } from '@carbon/react';
 import { Edit } from '@carbon/react/icons';
 import { interpolateUrl, navigate } from '@openmrs/esm-framework';
 
@@ -10,23 +10,23 @@ interface NameLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   from: string;
 }
 
-const EditActionsMenu: React.FC<NameLinkProps> = ({ from, to, children }) => {
+const EditActionsMenu: React.FC<NameLinkProps> = ({ from, to }) => {
   const { t } = useTranslation();
   const handleNameClick = (event: MouseEvent, to: string) => {
     event.preventDefault();
     navigate({ to });
     localStorage.setItem('fromPage', from);
   };
   return (
-    <Tooltip align="bottom" label="Edit Patient">
+    <div>
       <Button
         kind="ghost"
         onClick={(e) => handleNameClick(e, to)}
         href={interpolateUrl(to)}
         iconDescription={t('editPatient', 'Edit Patient')}
         renderIcon={(props) => <Edit size={16} {...props} />}
-      ></Button>
-    </Tooltip>
+      />
+    </div>
   );
 };
 export default EditActionsMenu;
diff --git a/packages/esm-patient-queues-app/src/active-visits/notes-action-menu.components.tsx b/packages/esm-patient-queues-app/src/active-visits/notes-action-menu.components.tsx
@@ -1,4 +1,4 @@
-import { Button, Tooltip } from '@carbon/react';
+import { Button } from '@carbon/react';
 import { CatalogPublish } from '@carbon/react/icons';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -18,14 +18,14 @@ const NotesActionsMenu: React.FC<NotesActionsMenuProps> = ({ note }) => {
     });
   }, [note]);
   return (
-    <Tooltip align="bottom" label="View Notes">
+    <div>
       <Button
         kind="ghost"
         onClick={launchNotesModal}
         iconDescription={t('viewNotes', 'View Notes')}
         renderIcon={(props) => <CatalogPublish size={16} {...props} />}
       />
-    </Tooltip>
+    </div>
   );
 };
 export default NotesActionsMenu;
diff --git a/packages/esm-patient-queues-app/src/active-visits/pick-patient-dialog.component.tsx b/packages/esm-patient-queues-app/src/active-visits/pick-patient-dialog.component.tsx
@@ -1,35 +1,13 @@
-import {
-  Button,
-  ContentSwitcher,
-  Form,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-  Select,
-  SelectItem,
-  Switch,
-  TextArea,
-} from '@carbon/react';
-
-import {
-  formatDate,
-  navigate,
-  parseDate,
-  showNotification,
-  showToast,
-  useLocations,
-  useSession,
-} from '@openmrs/esm-framework';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Button, Form, ModalBody, ModalFooter, ModalHeader, InlineLoading } from '@carbon/react';
+import { formatDate, navigate, parseDate, showNotification, showToast, useSession } from '@openmrs/esm-framework';
 
 import { getCareProvider, updateQueueEntry } from './active-visits-table.resource';
-
-import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQueueRoomLocations } from '../hooks/useQueueRooms';
 import { MappedQueueEntry } from '../types';
-
-import styles from './change-status-dialog.scss';
 import { trimVisitNumber } from '../helpers/functions';
+import { extractErrorMessagesFromResponse } from '../utils/utils';
 
 interface PickPatientDialogProps {
   queueEntry: MappedQueueEntry;
@@ -39,39 +17,43 @@ interface PickPatientDialogProps {
 const PickPatientStatus: React.FC<PickPatientDialogProps> = ({ queueEntry, closeModal }) => {
   const { t } = useTranslation();
 
-  const locations = useLocations();
-
-  const [selectedLocation, setSelectedLocation] = useState('');
-
   const sessionUser = useSession();
 
+  const [isLoading, setIsLoading] = useState(true);
+
   const { queueRoomLocations, mutate } = useQueueRoomLocations(sessionUser?.sessionLocation?.uuid);
 
   const [provider, setProvider] = useState('');
+
   const [priorityComment, setPriorityComment] = useState('');
 
-  useEffect(() => {
+  // Memoize the function to fetch the provider using useCallback
+  const fetchProvider = useCallback(() => {
+    if (!sessionUser?.user?.uuid) return;
+
+    setIsLoading(true);
+
     getCareProvider(sessionUser?.user?.uuid).then(
       (response) => {
-        setProvider(response?.data?.results[0].uuid);
+        const uuid = response?.data?.results[0].uuid;
+        setIsLoading(false);
+        setProvider(uuid);
         mutate();
       },
       (error) => {
+        const errorMessages = extractErrorMessagesFromResponse(error);
+        setIsLoading(false);
         showNotification({
-          title: t(`errorGettingProvider', 'Couldn't get provider`),
+          title: "Couldn't get provider",
           kind: 'error',
           critical: true,
-          description: error?.message,
+          description: errorMessages.join(','),
         });
       },
     );
-  });
+  }, [sessionUser?.user?.uuid, mutate]);
 
-  useEffect(() => {
-    if (locations?.length && sessionUser) {
-      setSelectedLocation(sessionUser?.sessionLocation?.uuid);
-    }
-  }, [locations, sessionUser]);
+  useEffect(() => fetchProvider(), [fetchProvider]);
 
   const pickPatientQueueStatus = useCallback(
     (event) => {
@@ -127,7 +109,14 @@ const PickPatientStatus: React.FC<PickPatientDialogProps> = ({ queueEntry, close
             <Button kind="secondary" onClick={closeModal}>
               {t('cancel', 'Cancel')}
             </Button>
-            <Button type="submit">{t('pickPatient', 'Pick Patient')}</Button>
+
+            {isLoading ? (
+              <InlineLoading description={'Fetching Provider..'} />
+            ) : (
+              <Button disabled={isLoading} type="submit">
+                {t('pickPatient', 'Pick Patient')}
+              </Button>
+            )}
           </ModalFooter>
         </Form>
       </div>