Enhance report handling and data fetching:

- Update markReportAsRead to include auth config in the request.
- Modify useGetLatestReports to always refetch data on mount and window focus.
- Improve ProcessingPage to handle response and redirect upon processing completion.
- Add location tracking in ReportsListPage to refetch reports on navigation.

Author: adamrefaey

frontend/src/common/api/reportService.ts

@@ -141,9 +141,13 @@ export const fetchAllReports = async (): Promise<MedicalReport[]> => {
  */
 export const markReportAsRead = async (reportId: string): Promise<MedicalReport> => {
   try {
-    const response = await axios.patch(`${API_URL}/api/reports/${reportId}`, {
-      status: 'READ',
-    });
+    const response = await axios.patch(
+      `${API_URL}/api/reports/${reportId}`,
+      {
+        status: 'READ',
+      },
+      await getAuthConfig(),
+    );
 
     return response.data;
   } catch (error) {

frontend/src/common/hooks/useReports.ts

@@ -15,6 +15,9 @@ export const useGetLatestReports = (limit = 3) => {
   return useQuery({
     queryKey: [LATEST_REPORTS_KEY, limit],
     queryFn: () => fetchLatestReports(limit),
+    refetchOnMount: true,
+    refetchOnWindowFocus: true,
+    staleTime: 0, // Consider data immediately stale so it always refreshes
   });
 };
 

frontend/src/pages/Processing/ProcessingPage.tsx

@@ -82,12 +82,21 @@ const ProcessingPage: React.FC = () => {
 
     try {
       // Send POST request to backend API
-      await axios.post(
+      const response = await axios.post(
         `${API_URL}/api/document-processor/process-file`,
         { reportId },
         await getAuthConfig(),
       );
 
+      const data = response.data;
+
+      if (data.status === 'processed') {
+        setIsProcessing(false);
+
+        // Redirect to report detail page
+        history.push(`/tabs/reports/${reportId}`);
+      }
+
       // Start checking the status every 2 seconds
       statusCheckIntervalRef.current = window.setInterval(checkReportStatus, 2000);
     } catch (error) {

frontend/src/pages/Reports/ReportsListPage.tsx

@@ -15,7 +15,7 @@ import {
   IonModal,
 } from '@ionic/react';
 import { useTranslation } from 'react-i18next';
-import { useHistory } from 'react-router-dom';
+import { useHistory, useLocation } from 'react-router-dom';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { fetchAllReports, toggleReportBookmark } from 'common/api/reportService';
 import { useMarkReportAsRead } from 'common/hooks/useReports';
@@ -40,6 +40,7 @@ type SortDirection = 'desc' | 'asc';
 const ReportsListPage: React.FC = () => {
   const { t } = useTranslation(['report', 'common']);
   const history = useHistory();
+  const location = useLocation();
   const queryClient = useQueryClient();
   const [filter, setFilter] = useState<FilterOption>('all');
   const [sortDirection, setSortDirection] = useState<SortDirection>('desc'); // Default sort by newest first
@@ -61,11 +62,19 @@ const ReportsListPage: React.FC = () => {
     data: reports = [],
     isLoading,
     isError,
+    refetch,
   } = useQuery({
     queryKey: ['reports'],
     queryFn: fetchAllReports,
+    refetchOnMount: true,
   });
 
+  // Refetch reports when navigating to this page
+  useEffect(() => {
+    // This will run when the component mounts or when the location changes
+    refetch();
+  }, [location.pathname, refetch]);
+
   const { mutate: markAsRead } = useMarkReportAsRead();
 
   // Filter and sort reports based on selected filter, categories, and sort direction