Refactor report bookmark functionality to improve cache updates and streamline mutation handling

Author: adamrefaey

frontend/src/common/hooks/useReports.ts

@@ -70,25 +70,36 @@ export const useMarkReportAsRead = () => {
 export const useToggleReportBookmark = () => {
   const queryClient = useQueryClient();
 
-  return useMutation({
-    mutationFn: (params: { reportId: string; isBookmarked: boolean }) =>
-      toggleReportBookmark(params.reportId, params.isBookmarked),
-    onSuccess: (updatedReport: MedicalReport) => {
-      // Update the reports cache
-      queryClient.setQueryData<MedicalReport[]>([QueryKey.Reports], (oldReports) => {
-        if (!oldReports) return undefined;
-        return oldReports.map((report) =>
-          report.id === updatedReport.id ? updatedReport : report,
-        );
-      });
+  return async (reportId: string, isBookmarked: boolean) => {
+    return useMutation({
+      mutationFn: () => toggleReportBookmark(reportId, isBookmarked),
+      onSuccess: (updatedReport: MedicalReport) => {
+        // Update the reports cache
+        queryClient.setQueryData<MedicalReport[]>([QueryKey.Reports], (oldReports) => {
+          if (!oldReports) return undefined;
+          return oldReports.map((report) =>
+            report.id === updatedReport.id ? updatedReport : report,
+          );
+        });
 
-      // Update the latest reports cache
-      queryClient.setQueryData<MedicalReport[]>([QueryKey.LatestReports], (oldReports) => {
-        if (!oldReports) return undefined;
-        return oldReports.map((report) =>
-          report.id === updatedReport.id ? updatedReport : report,
+        // Update the latest reports cache
+        queryClient.setQueryData<MedicalReport[]>([QueryKey.LatestReports], (oldReports) => {
+          if (!oldReports) return undefined;
+          return oldReports.map((report) =>
+            report.id === updatedReport.id ? updatedReport : report,
+          );
+        });
+
+        // Update the bookmark status in the report detail page
+        queryClient.setQueryData<MedicalReport | undefined>(
+          [QueryKey.ReportDetail, reportId],
+          (oldReport) => {
+            if (!oldReport) return undefined;
+            if (oldReport.id !== updatedReport.id) return oldReport;
+            return { ...oldReport, bookmarked: updatedReport.bookmarked };
+          },
         );
-      });
-    },
-  });
+      },
+    });
+  };
 };

frontend/src/pages/Processing/ProcessingPage.tsx

@@ -8,6 +8,8 @@ import './ProcessingPage.scss';
 import { getAuthConfig } from 'common/api/reportService';
 import ProcessingError from './components/ProcessingError';
 import ProcessingAnimation from './components/ProcessingAnimation';
+import { QueryKey } from 'common/utils/constants';
+import { useQueryClient } from '@tanstack/react-query';
 
 const API_URL = import.meta.env.VITE_BASE_URL_API || '';
 
@@ -20,6 +22,7 @@ const ProcessingPage: React.FC = () => {
   const firstName = currentUser?.name?.split(' ')[0];
   const axios = useAxios();
   const history = useHistory();
+  const queryClient = useQueryClient();
 
   // States to track processing
   const [isProcessing, setIsProcessing] = useState(true);
@@ -70,6 +73,9 @@ const ProcessingPage: React.FC = () => {
 
         console.log('Processing complete');
 
+        queryClient.invalidateQueries({ queryKey: [QueryKey.Reports] });
+        queryClient.invalidateQueries({ queryKey: [QueryKey.LatestReports] });
+
         history.push(`/tabs/reports/${reportId}`);
       } else if (data.status === 'failed') {
         if (data.isMedicalReport === false) {

frontend/src/pages/Reports/ReportDetailPage.tsx

@@ -2,7 +2,7 @@ import { IonPage, IonContent } from '@ionic/react';
 import { useState } from 'react';
 import { useHistory, useParams } from 'react-router-dom';
 import './ReportDetailPage.scss';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import axios from 'axios';
 import { MedicalReport } from '../../common/models/medicalReport';
 import { useTranslation } from 'react-i18next';
@@ -39,6 +39,7 @@ const ReportDetailPage: React.FC = () => {
   const { t } = useTranslation();
   const { createToast } = useToasts();
   const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
+  const queryClient = useQueryClient();
 
   const handleUploadComplete = () => {
     setIsUploadModalOpen(false);
@@ -108,6 +109,10 @@ const ReportDetailPage: React.FC = () => {
         duration: 2000,
       });
 
+      queryClient.invalidateQueries({ queryKey: [QueryKey.Reports] });
+      queryClient.invalidateQueries({ queryKey: [QueryKey.LatestReports] });
+      queryClient.invalidateQueries({ queryKey: [QueryKey.ReportDetail, reportId] });
+
       // Navigate back
       history.push('/tabs/home');
     } catch (error) {
@@ -130,6 +135,11 @@ const ReportDetailPage: React.FC = () => {
       setIsProcessing(true);
       await axios.delete(`${API_URL}/api/reports/${reportId}`, await getAuthConfig());
       setIsProcessing(false);
+
+      queryClient.invalidateQueries({ queryKey: [QueryKey.Reports] });
+      queryClient.invalidateQueries({ queryKey: [QueryKey.LatestReports] });
+      queryClient.invalidateQueries({ queryKey: [QueryKey.ReportDetail, reportId] });
+
       setIsUploadModalOpen(true);
     } catch (error) {
       setIsProcessing(false);
@@ -169,7 +179,7 @@ const ReportDetailPage: React.FC = () => {
 
         <UploadModal
           isOpen={isUploadModalOpen}
-          onClose={() => setIsUploadModalOpen(false)}
+          onClose={handleUploadComplete}
           onUploadComplete={handleUploadComplete}
         />
       </IonContent>

frontend/src/pages/Reports/ReportsListPage.tsx

@@ -15,13 +15,12 @@ import {
 } from '@ionic/react';
 import { useTranslation } from 'react-i18next';
 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';
+import { useQuery } from '@tanstack/react-query';
+import { fetchAllReports } from 'common/api/reportService';
+import { useMarkReportAsRead, useToggleReportBookmark } from 'common/hooks/useReports';
 import ReportItem from 'pages/Home/components/ReportItem/ReportItem';
 import NoReportsMessage from 'pages/Home/components/NoReportsMessage/NoReportsMessage';
 import { useState, useMemo, useEffect, useRef } from 'react';
-import { MedicalReport } from 'common/models/medicalReport';
 import sortSvg from 'assets/icons/sort.svg';
 import filterOutlineIcon from 'assets/icons/filter-outline.svg';
 import reportsIcon from 'assets/icons/reports.svg';
@@ -43,7 +42,7 @@ const ReportsListPage: React.FC = () => {
   const { t } = useTranslation(['report', 'common']);
   const history = useHistory();
   const location = useLocation();
-  const queryClient = useQueryClient();
+  const toggleBookmark = useToggleReportBookmark();
   const [filter, setFilter] = useState<FilterOption>('all');
   const [sortDirection, setSortDirection] = useState<SortDirection>('desc'); // Default sort by newest first
   const [showToast, setShowToast] = useState(false);
@@ -123,23 +122,6 @@ const ReportsListPage: React.FC = () => {
     history.push(`/tabs/reports/${reportId}`);
   };
 
-  const handleToggleBookmark = async (reportId: string, isCurrentlyBookmarked: boolean) => {
-    try {
-      // Toggle the bookmark status
-      const updatedReport = await toggleReportBookmark(reportId, !isCurrentlyBookmarked);
-
-      // Update the reports in the cache
-      queryClient.setQueryData<MedicalReport[]>(['reports'], (oldReports) => {
-        if (!oldReports) return [];
-        return oldReports.map((report) =>
-          report.id === updatedReport.id ? updatedReport : report,
-        );
-      });
-    } catch (error) {
-      console.error('Failed to toggle bookmark:', error);
-    }
-  };
-
   const handleUpload = () => {
     history.push('/tabs/upload');
   };
@@ -244,7 +226,7 @@ const ReportsListPage: React.FC = () => {
         key={report.id}
         report={report}
         onClick={() => handleReportClick(report.id)}
-        onToggleBookmark={() => handleToggleBookmark(report.id, report.bookmarked)}
+        onToggleBookmark={() => toggleBookmark(report.id, report.bookmarked)}
         showBookmarkButton
       />
     ));