Refactor bookmark toggle functionality to use mutation object for improved clarity and consistency

Author: adamrefaey

frontend/src/common/hooks/useReports.ts

@@ -70,36 +70,35 @@ export const useMarkReportAsRead = () => {
 export const useToggleReportBookmark = () => {
   const queryClient = useQueryClient();
 
-  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,
-          );
-        });
+  return useMutation({
+    mutationFn: ({ reportId, isBookmarked }: { reportId: string; isBookmarked: boolean }) =>
+      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 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 };
-          },
+      // 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/Home/HomePage.tsx

@@ -97,7 +97,9 @@ const HomePage: React.FC = () => {
         key={report.id}
         report={report}
         onClick={() => handleReportClick(report.id)}
-        onToggleBookmark={() => toggleBookmark(report.id, report.bookmarked)}
+        onToggleBookmark={() =>
+          toggleBookmark.mutate({ reportId: report.id, isBookmarked: report.bookmarked })
+        }
         showBookmarkButton={true}
       />
     ));

frontend/src/pages/Reports/ReportsListPage.tsx

@@ -226,7 +226,9 @@ const ReportsListPage: React.FC = () => {
         key={report.id}
         report={report}
         onClick={() => handleReportClick(report.id)}
-        onToggleBookmark={() => toggleBookmark(report.id, report.bookmarked)}
+        onToggleBookmark={() =>
+          toggleBookmark.mutate({ reportId: report.id, isBookmarked: report.bookmarked })
+        }
         showBookmarkButton
       />
     ));