Refactor report processing status handling and improve upload modal behavior

Author: adamrefaey

backend/src/reports/reports.controller.ts

@@ -92,6 +92,14 @@ export class ReportsController {
       throw new NotFoundException('Processing failed');
     }
 
+    if (report.processingStatus === ProcessingStatus.IN_PROGRESS) {
+      throw new NotFoundException('Processing in progress');
+    }
+
+    if (report.processingStatus === ProcessingStatus.UNPROCESSED) {
+      throw new NotFoundException('Processing pending');
+    }
+
     return report;
   }
 

backend/src/reports/reports.service.ts

@@ -55,23 +55,23 @@ export class ReportsService {
     this.tableName = this.configService.get<string>('dynamodbReportsTable')!;
   }
 
-  async findAll(userId: string, withFailed = false): Promise<Report[]> {
+  async findAll(userId: string, onlyProcessed = true): Promise<Report[]> {
     if (!userId) {
       throw new ForbiddenException('User ID is required');
     }
 
     try {
       const expressionAttributeValues: any = { ':userId': userId };
-      const processingStatusFilter = 'processingStatus <> :failedStatus';
+      const processingStatusFilter = 'processingStatus = :processedStatus';
 
-      if (!withFailed) {
-        expressionAttributeValues[':failedStatus'] = ProcessingStatus.FAILED;
+      if (onlyProcessed) {
+        expressionAttributeValues[':processedStatus'] = ProcessingStatus.PROCESSED;
       }
 
       const command = new QueryCommand({
         TableName: this.tableName,
         KeyConditionExpression: 'userId = :userId',
-        FilterExpression: !withFailed ? processingStatusFilter : undefined,
+        FilterExpression: onlyProcessed ? processingStatusFilter : undefined,
         ExpressionAttributeValues: marshall(expressionAttributeValues),
       });
 
@@ -100,7 +100,7 @@ export class ReportsService {
   async findLatest(
     queryDto: GetReportsQueryDto,
     userId: string,
-    withFailed = false,
+    onlyProcessed = true,
   ): Promise<Report[]> {
     this.logger.log(
       `Running findLatest with params: ${JSON.stringify(queryDto)} for user ${userId}`,
@@ -116,17 +116,17 @@ export class ReportsService {
     const expressionAttributeValues: any = { ':userId': userId };
 
     try {
-      const processingStatusFilter = 'processingStatus <> :failedStatus';
+      const processingStatusFilter = 'processingStatus = :processedStatus';
 
-      if (!withFailed) {
-        expressionAttributeValues[':failedStatus'] = ProcessingStatus.FAILED;
+      if (onlyProcessed) {
+        expressionAttributeValues[':processedStatus'] = ProcessingStatus.PROCESSED;
       }
 
       const command = new QueryCommand({
         TableName: this.tableName,
         IndexName: 'userIdCreatedAtIndex',
         KeyConditionExpression: 'userId = :userId',
-        FilterExpression: !withFailed ? processingStatusFilter : undefined,
+        FilterExpression: onlyProcessed ? processingStatusFilter : undefined,
         ExpressionAttributeValues: marshall(expressionAttributeValues),
         ScanIndexForward: false,
         Limit: limit,

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

@@ -53,25 +53,27 @@ 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: (result: any) => {
+    onUploadComplete: async (result: any) => {
       setUploadResult(result);
 
-      // Automatically redirect to processing screen after 2 seconds
-      setTimeout(() => {
-        reset();
-        onClose();
-        if (onUploadComplete) {
-          onUploadComplete(result);
-        }
-        // Navigate to the processing tab with reportId in state
-        if (file) {
-          history.push('/tabs/processing', {
-            reportId: result.id,
-          });
-        } else {
-          history.push('/tabs/processing');
-        }
-      }, 2000);
+      // sleep for two seconds
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      await new Promise((resolve: any) => setTimeout(resolve, 2000));
+
+      reset();
+      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');
+      }
     },
   });
 

frontend/src/common/hooks/useFileUpload.ts

@@ -20,7 +20,7 @@ export enum UploadStatus {
 }
 
 interface UseFileUploadOptions {
-  onUploadComplete?: (result: MedicalReport) => void;
+  onUploadComplete?: (result: MedicalReport) => Promise<void>;
 }
 
 interface UseFileUploadResult {
@@ -183,7 +183,7 @@ export const useFileUpload = ({
       setStatus(UploadStatus.SUCCESS);
 
       if (onUploadComplete) {
-        onUploadComplete(result);
+        await 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 { useTranslation } from 'react-i18next';
 import { useEffect, useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useHistory, useLocation } from 'react-router-dom';
 import UploadModal from 'common/components/Upload/UploadModal';
 
 /**
@@ -10,26 +10,25 @@ import UploadModal from 'common/components/Upload/UploadModal';
  */
 const UploadPage = (): JSX.Element => {
   const { t } = useTranslation();
-  const [isModalOpen, setIsModalOpen] = useState(true);
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const history = useHistory();
+  const location = useLocation();
 
-  const handleUploadComplete = () => {
-    // Close the modal
-    setIsModalOpen(false);
+  const handleUploadComplete = () => setIsModalOpen(false);
 
-    // Navigate to home page to see the newly uploaded report
+  const handleCloseComplete = () => {
+    setIsModalOpen(false);
     history.push('/tabs/home');
   };
 
   useEffect(() => {
-    // Automatically open the upload modal when the component mounts
     setIsModalOpen(true);
 
     // Cleanup function to close the modal when the component unmounts
     return () => {
       setIsModalOpen(false);
     };
-  }, []);
+  }, [location.pathname]);
 
   return (
     <IonPage>
@@ -41,7 +40,7 @@ const UploadPage = (): JSX.Element => {
       <IonContent>
         <UploadModal
           isOpen={isModalOpen}
-          onClose={() => setIsModalOpen(false)}
+          onClose={handleCloseComplete}
           onUploadComplete={handleUploadComplete}
         />
       </IonContent>