Refactor upload handling to improve user experience and streamline modal behavior

Author: adamrefaey

frontend/src/common/components/Upload/UploadModal.tsx

@@ -53,27 +53,26 @@ const UploadModal = ({ isOpen, onClose, onUploadComplete }: UploadModalProps): J
   } = useFileUpload({
     // Override onUploadComplete to store the result and not call the parent immediately
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    onUploadComplete: async (result: any) => {
+    onUploadComplete: (result: any) => {
       setUploadResult(result);
 
-      // sleep for two seconds
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      await new Promise((resolve: any) => setTimeout(resolve, 2000));
+      // Automatically redirect to processing screen after 2 seconds
+      setTimeout(() => {
+        reset();
 
-      reset();
-      if (onUploadComplete) {
-        onUploadComplete(result);
-      }
+        if (onUploadComplete) {
+          onUploadComplete(result);
+        }
 
-      // Automatically redirect to processing screen
-      // Navigate to the processing tab with reportId in state
-      if (file) {
-        history.push('/tabs/processing', {
-          reportId: result.id,
-        });
-      } else {
-        history.push('/tabs/processing');
-      }
+        // Navigate to the processing tab with reportId in state
+        if (file) {
+          history.push('/tabs/processing', {
+            reportId: result.id,
+          });
+        } else {
+          history.push('/tabs/processing');
+        }
+      }, 2000);
     },
   });
 
@@ -117,6 +116,7 @@ const UploadModal = ({ isOpen, onClose, onUploadComplete }: UploadModalProps): J
     // call onUploadComplete now before closing the modal
     if (status === UploadStatus.SUCCESS && uploadResult && onUploadComplete) {
       onUploadComplete(uploadResult);
+      return;
     }
 
     // Reset state

frontend/src/common/hooks/useFileUpload.ts

@@ -20,7 +20,7 @@ export enum UploadStatus {
 }
 
 interface UseFileUploadOptions {
-  onUploadComplete?: (result: MedicalReport) => Promise<void>;
+  onUploadComplete?: (result: MedicalReport) => void;
 }
 
 interface UseFileUploadResult {
@@ -183,7 +183,7 @@ export const useFileUpload = ({
       setStatus(UploadStatus.SUCCESS);
 
       if (onUploadComplete) {
-        await onUploadComplete(result);
+        onUploadComplete(result);
       }
     } catch (error) {
       handleUploadError(error as Error, signal);

frontend/src/pages/Upload/UploadPage.tsx

@@ -1,7 +1,7 @@
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonButton } from '@ionic/react';
 import { useTranslation } from 'react-i18next';
-import { useEffect, useState } from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useState } from 'react';
+import { useHistory } from 'react-router-dom';
 import UploadModal from 'common/components/Upload/UploadModal';
 
 /**
@@ -12,24 +12,15 @@ const UploadPage = (): JSX.Element => {
   const { t } = useTranslation();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const history = useHistory();
-  const location = useLocation();
 
-  const handleUploadComplete = () => setIsModalOpen(false);
-
-  const handleCloseComplete = () => {
+  const handleUploadComplete = () => {
+    // Close the modal
     setIsModalOpen(false);
+
+    // Navigate to home page to see the newly uploaded report
     history.push('/tabs/home');
   };
 
-  useEffect(() => {
-    setIsModalOpen(true);
-
-    // Cleanup function to close the modal when the component unmounts
-    return () => {
-      setIsModalOpen(false);
-    };
-  }, [location.pathname]);
-
   return (
     <IonPage>
       <IonHeader>
@@ -38,9 +29,18 @@ const UploadPage = (): JSX.Element => {
         </IonToolbar>
       </IonHeader>
       <IonContent>
+        <div className="ion-padding">
+          <h1>{t('pages.upload.subtitle')}</h1>
+          <p>{t('pages.upload.description')}</p>
+
+          <IonButton expand="block" className="ion-margin-top" onClick={() => setIsModalOpen(true)}>
+            {t('upload.selectFile')}
+          </IonButton>
+        </div>
+
         <UploadModal
           isOpen={isModalOpen}
-          onClose={handleCloseComplete}
+          onClose={() => setIsModalOpen(false)}
           onUploadComplete={handleUploadComplete}
         />
       </IonContent>