Refactor query keys to use constants for better maintainability and consistency across reports and chat functionalities

Author: adamrefaey

backend/src/services/perplexity.service.ts

@@ -2,7 +2,7 @@ import { Injectable, Logger } from '@nestjs/common';
 import { ConfigService } from '@nestjs/config';
 import axios from 'axios';
 import { AwsSecretsService } from './aws-secrets.service';
-import { LabValue } from 'src/document-processor/services/aws-bedrock.service';
+import { LabValue } from '../document-processor/services/aws-bedrock.service';
 
 export interface PerplexityMessage {
   role: 'system' | 'user' | 'assistant';

frontend/src/common/hooks/useChat.ts

@@ -1,29 +1,28 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { bedrockService } from '../services/ai/bedrock.service';
-
-export const CHAT_QUERY_KEY = 'chat';
+import { QueryKey } from 'common/utils/constants';
 
 export function useChat(sessionId?: string) {
   const queryClient = useQueryClient();
 
   // Query for getting chat session
   const { data: session } = useQuery({
-    queryKey: [CHAT_QUERY_KEY, sessionId],
+    queryKey: [QueryKey.Chat, sessionId],
     queryFn: () => (sessionId ? bedrockService.getChatSession(sessionId) : undefined),
     enabled: !!sessionId,
   });
 
   // Query for getting all sessions
   const { data: sessions } = useQuery({
-    queryKey: [CHAT_QUERY_KEY, 'sessions'],
+    queryKey: [QueryKey.Chat, 'sessions'],
     queryFn: () => bedrockService.getAllSessions(),
   });
 
   // Mutation for creating a new session
   const createSession = useMutation({
     mutationFn: () => bedrockService.createChatSession(),
     onSuccess: (newSessionId) => {
-      queryClient.invalidateQueries({ queryKey: [CHAT_QUERY_KEY, 'sessions'] });
+      queryClient.invalidateQueries({ queryKey: [QueryKey.Chat, 'sessions'] });
       return newSessionId;
     },
   });
@@ -35,8 +34,8 @@ export function useChat(sessionId?: string) {
       return bedrockService.sendMessage(sessionId, message);
     },
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: [CHAT_QUERY_KEY, sessionId] });
-      queryClient.invalidateQueries({ queryKey: [CHAT_QUERY_KEY, 'sessions'] });
+      queryClient.invalidateQueries({ queryKey: [QueryKey.Chat, sessionId] });
+      queryClient.invalidateQueries({ queryKey: [QueryKey.Chat, 'sessions'] });
     },
   });
 

frontend/src/common/hooks/useReports.ts

@@ -1,10 +1,12 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { fetchAllReports, fetchLatestReports, markReportAsRead } from '../api/reportService';
+import {
+  fetchAllReports,
+  fetchLatestReports,
+  markReportAsRead,
+  toggleReportBookmark,
+} from '../api/reportService';
 import { MedicalReport } from '../models/medicalReport';
-
-// Query keys
-const REPORTS_KEY = 'reports';
-const LATEST_REPORTS_KEY = 'latestReports';
+import { QueryKey } from 'common/utils/constants';
 
 /**
  * Hook to fetch the latest reports.
@@ -13,7 +15,7 @@ const LATEST_REPORTS_KEY = 'latestReports';
  */
 export const useGetLatestReports = (limit = 3) => {
   return useQuery({
-    queryKey: [LATEST_REPORTS_KEY, limit],
+    queryKey: [QueryKey.LatestReports, limit],
     queryFn: () => fetchLatestReports(limit),
     refetchOnMount: true,
     refetchOnWindowFocus: true,
@@ -27,7 +29,7 @@ export const useGetLatestReports = (limit = 3) => {
  */
 export const useGetAllReports = () => {
   return useQuery({
-    queryKey: [REPORTS_KEY],
+    queryKey: [QueryKey.Reports],
     queryFn: fetchAllReports,
   });
 };
@@ -43,15 +45,45 @@ export const useMarkReportAsRead = () => {
     mutationFn: (reportId: string) => markReportAsRead(reportId),
     onSuccess: (updatedReport: MedicalReport) => {
       // Update the reports cache
-      queryClient.setQueryData<MedicalReport[]>([REPORTS_KEY], (oldReports) => {
+      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,
+        );
+      });
+    },
+  });
+};
+
+/**
+ * Hook to toggle the bookmark status of a report.
+ * @returns Mutation result for toggling the bookmark status
+ */
+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,
         );
       });
 
       // Update the latest reports cache
-      queryClient.setQueryData<MedicalReport[]>([LATEST_REPORTS_KEY], (oldReports) => {
+      queryClient.setQueryData<MedicalReport[]>([QueryKey.LatestReports], (oldReports) => {
         if (!oldReports) return undefined;
         return oldReports.map((report) =>
           report.id === updatedReport.id ? updatedReport : report,

frontend/src/common/utils/constants.ts

@@ -9,6 +9,10 @@ export enum QueryKey {
   UserProfile = 'UserProfile',
   Users = 'Users',
   UserTokens = 'UserTokens',
+  Chat = 'Chat',
+  Reports = 'Reports',
+  LatestReports = 'LatestReports',
+  ReportDetail = 'ReportDetail',
 }
 
 /**

frontend/src/pages/Reports/ReportDetailPage.tsx

@@ -16,6 +16,7 @@ import InfoCard from './components/InfoCard';
 import ActionButtons from './components/ActionButtons';
 import AiAnalysisTab from './components/AiAnalysisTab';
 import UploadModal from 'common/components/Upload/UploadModal';
+import { QueryKey } from 'common/utils/constants';
 
 const API_URL = import.meta.env.VITE_BASE_URL_API || '';
 
@@ -46,7 +47,7 @@ const ReportDetailPage: React.FC = () => {
 
   // Fetch report data using react-query
   const { data, isLoading, error } = useQuery<MedicalReport>({
-    queryKey: ['report', reportId],
+    queryKey: [QueryKey.ReportDetail, reportId],
     queryFn: () => fetchReportById(reportId!),
     enabled: !!reportId,
   });

frontend/src/pages/Reports/ReportsListPage.tsx

@@ -31,6 +31,7 @@ import CategoryTag from './components/CategoryTag/CategoryTag';
 import ReportsFilterEmpty from './components/ReportsFilterEmpty/ReportsFilterEmpty';
 
 import './ReportsListPage.scss';
+import { QueryKey } from 'common/utils/constants';
 
 type FilterOption = 'all' | 'bookmarked';
 type SortDirection = 'desc' | 'asc';
@@ -65,7 +66,7 @@ const ReportsListPage: React.FC = () => {
     isError,
     refetch,
   } = useQuery({
-    queryKey: ['reports'],
+    queryKey: [QueryKey.Reports],
     queryFn: fetchAllReports,
     refetchOnMount: true,
   });