fix delay in pick button

METS-Programme · Sep 5, 2024 · f0081e2 · f0081e2
1 parent ce593be
commit f0081e2
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 21 deletions.
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
@@ -65,15 +65,17 @@ const ChangeStatus: React.FC<ChangeStatusDialogProps> = ({ queueEntry, currentEn
 
   const [isLoading, setIsLoading] = useState(true);
 
-  const providerUuid = useMemo(() => {
-    if (!sessionUser?.user?.uuid) return null;
+  // 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;
-        setProvider(uuid);
         setIsLoading(false);
+        setProvider(uuid);
         mutate();
       },
       (error) => {
@@ -87,11 +89,9 @@ const ChangeStatus: React.FC<ChangeStatusDialogProps> = ({ queueEntry, currentEn
         });
       },
     );
-
-    return providerUuid;
   }, [sessionUser?.user?.uuid, mutate]);
 
-  useEffect(() => providerUuid, [providerUuid]);
+  useEffect(() => fetchProvider(), [fetchProvider]);
 
   useMemo(() => {
     switch (statusSwitcherIndex) {
@@ -470,7 +470,7 @@ const ChangeStatus: React.FC<ChangeStatusDialogProps> = ({ queueEntry, currentEn
               {t('endVisit', 'End Visit')}
             </Button>
             {isLoading ? (
-              <InlineLoading />
+              <InlineLoading description={'Fetching Provider..'} />
             ) : (
               <Button type="submit">{status === 'pending' ? 'Save' : 'Move to the next queue room'}</Button>
             )}

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
@@ -63,9 +63,12 @@ const ChangeStatusMoveToNext: React.FC<ChangeStatusDialogProps> = ({ patientUuid
 
   const { activeVisit } = useVisit(patientUuid);
 
-  const providerUuid = useMemo(() => {
-    if (!sessionUser?.user?.uuid) return null;
+  // 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;
@@ -84,11 +87,9 @@ const ChangeStatusMoveToNext: React.FC<ChangeStatusDialogProps> = ({ patientUuid
         });
       },
     );
-
-    return providerUuid;
   }, [sessionUser?.user?.uuid, mutate]);
 
-  useEffect(() => providerUuid, [providerUuid]);
+  useEffect(() => fetchProvider(), [fetchProvider]);
 
   useMemo(() => {
     switch (statusSwitcherIndex) {
@@ -608,7 +609,7 @@ const ChangeStatusMoveToNext: React.FC<ChangeStatusDialogProps> = ({ patientUuid
             {t('endVisit', 'End Visit')}
           </Button>
           {isLoading ? (
-            <InlineLoading />
+            <InlineLoading description={'Fetching Provider..'} />
           ) : (
             <Button type="submit">{status === 'pending' ? 'Save' : 'Move to the next queue room'}</Button>
           )}

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
@@ -27,20 +27,22 @@ const PickPatientStatus: React.FC<PickPatientDialogProps> = ({ queueEntry, close
 
   const [priorityComment, setPriorityComment] = useState('');
 
-  const providerUuid = useMemo(() => {
-    if (!sessionUser?.user?.uuid) return null;
+  // 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;
-        setProvider(uuid);
         setIsLoading(false);
+        setProvider(uuid);
         mutate();
       },
       (error) => {
-        setIsLoading(false);
         const errorMessages = extractErrorMessagesFromResponse(error);
+        setIsLoading(false);
         showNotification({
           title: "Couldn't get provider",
           kind: 'error',
@@ -49,11 +51,9 @@ const PickPatientStatus: React.FC<PickPatientDialogProps> = ({ queueEntry, close
         });
       },
     );
-
-    return providerUuid;
   }, [sessionUser?.user?.uuid, mutate]);
 
-  useEffect(() => providerUuid, [providerUuid]);
+  useEffect(() => fetchProvider(), [fetchProvider]);
 
   const pickPatientQueueStatus = useCallback(
     (event) => {
@@ -111,7 +111,7 @@ const PickPatientStatus: React.FC<PickPatientDialogProps> = ({ queueEntry, close
             </Button>
 
             {isLoading ? (
-              <InlineLoading />
+              <InlineLoading description={'Fetching Provider..'} />
             ) : (
               <Button disabled={isLoading} type="submit">
                 {t('pickPatient', 'Pick Patient')}