Fix invalid hook error

frontend/src/components/Contexts/InspectionsContext.tsx

@@ -1,4 +1,4 @@
-import { createContext, FC, useContext, useEffect } from 'react'
+import { createContext, FC, useContext, useEffect, useRef } from 'react'
 import { SignalREventLabels, useSignalRContext } from './SignalRContext'
 import { SaraAnalysisResultReady, SaraInspectionVisualizationReady } from 'models/Inspection'
 import { useQuery } from '@tanstack/react-query'
@@ -16,19 +16,19 @@ interface IValueData {
     isError: boolean
 }
 interface IInspectionsContext {
-    fetchImageData: (inspectionId: string) => IImageData
-    fetchAnalysisData: (inspectionId: string) => IImageData
-    fetchValueData: (inspectionId: string) => IValueData
+    useImageData: (inspectionId: string) => IImageData
+    useAnalysisData: (inspectionId: string) => IImageData
+    useValueData: (inspectionId: string) => IValueData
 }
 
 interface Props {
     children: React.ReactNode
 }
 
 const defaultInspectionsContext = {
-    fetchImageData: () => ({ data: undefined, isPending: false, isError: true }),
-    fetchAnalysisData: () => ({ data: undefined, isPending: false, isError: true }),
-    fetchValueData: () => ({ data: undefined, isPending: false, isError: true }),
+    useImageData: () => ({ data: undefined, isPending: false, isError: true }),
+    useAnalysisData: () => ({ data: undefined, isPending: false, isError: true }),
+    useValueData: () => ({ data: undefined, isPending: false, isError: true }),
 }
 
 const InspectionsContext = createContext<IInspectionsContext>(defaultInspectionsContext)
@@ -37,14 +37,29 @@ export const InspectionsProvider: FC<Props> = ({ children }) => {
     const { registerEvent, connectionReady } = useSignalRContext()
     const backendApi = useBackendApi()
 
+    // Keep a stable ref to backendApi so callbacks don't capture a stale closure
+    const backendApiRef = useRef(backendApi)
+    useEffect(() => {
+        backendApiRef.current = backendApi
+    }, [backendApi])
+
     useEffect(() => {
         if (connectionReady) {
             registerEvent(SignalREventLabels.inspectionVisualizationReady, (username: string, message: string) => {
                 const inspectionVisualizationData: SaraInspectionVisualizationReady = JSON.parse(message)
+                const inspectionId = inspectionVisualizationData.inspectionId
                 queryClient.invalidateQueries({
-                    queryKey: ['fetchInspectionData', inspectionVisualizationData.inspectionId],
+                    queryKey: ['fetchInspectionData', inspectionId],
+                })
+                queryClient.fetchQuery({
+                    queryKey: ['fetchInspectionData', inspectionId],
+                    queryFn: async () => {
+                        const imageBlob = await backendApiRef.current.getInspection(inspectionId)
+                        return URL.createObjectURL(imageBlob)
+                    },
+                    retry: 1,
+                    staleTime: 10 * 60 * 1000,
                 })
-                fetchImageData(inspectionVisualizationData.inspectionId)
             })
         }
     }, [registerEvent, connectionReady])
@@ -53,16 +68,24 @@ export const InspectionsProvider: FC<Props> = ({ children }) => {
         if (connectionReady) {
             registerEvent(SignalREventLabels.analysisResultReady, (username: string, message: string) => {
                 const analysisResultData: SaraAnalysisResultReady = JSON.parse(message)
+                const inspectionId = analysisResultData.inspectionId
                 queryClient.invalidateQueries({
-                    queryKey: ['fetchAnalysisData', analysisResultData.inspectionId],
+                    queryKey: ['fetchAnalysisData', inspectionId],
+                })
+                queryClient.fetchQuery({
+                    queryKey: ['fetchAnalysisData', inspectionId],
+                    queryFn: async () => {
+                        const imageBlob = await backendApiRef.current.getAnalysis(inspectionId)
+                        return URL.createObjectURL(imageBlob)
+                    },
+                    retry: 1,
+                    staleTime: 10 * 60 * 1000,
                 })
-                fetchAnalysisData(analysisResultData.inspectionId)
             })
         }
     }, [registerEvent, connectionReady])
 
-    const fetchImageData = (inspectionId: string): IImageData => {
-        // eslint-disable-next-line react-hooks/rules-of-hooks -- pre-existing design issue, tracked in #2698
+    const useImageData = (inspectionId: string): IImageData => {
         const result = useQuery({
             queryKey: ['fetchInspectionData', inspectionId],
             queryFn: async () => {
@@ -77,8 +100,7 @@ export const InspectionsProvider: FC<Props> = ({ children }) => {
         return { data: result.data, isPending: result.isPending, isError: result.isError }
     }
 
-    const fetchAnalysisData = (inspectionId: string): IImageData => {
-        // eslint-disable-next-line react-hooks/rules-of-hooks -- pre-existing design issue, tracked in #2698
+    const useAnalysisData = (inspectionId: string): IImageData => {
         const result = useQuery({
             queryKey: ['fetchAnalysisData', inspectionId],
             queryFn: async () => {
@@ -92,8 +114,7 @@ export const InspectionsProvider: FC<Props> = ({ children }) => {
         return { data: result.data, isPending: result.isPending, isError: result.isError }
     }
 
-    const fetchValueData = (inspectionId: string): IValueData => {
-        // eslint-disable-next-line react-hooks/rules-of-hooks -- pre-existing design issue, tracked in #2698
+    const useValueData = (inspectionId: string): IValueData => {
         const result = useQuery({
             queryKey: ['fetchValueData', inspectionId],
             queryFn: async () => {
@@ -110,9 +131,9 @@ export const InspectionsProvider: FC<Props> = ({ children }) => {
     return (
         <InspectionsContext.Provider
             value={{
-                fetchImageData,
-                fetchAnalysisData,
-                fetchValueData,
+                useImageData,
+                useAnalysisData,
+                useValueData,
             }}
         >
             {children}

frontend/src/pages/InspectionReportPage/InspectionReportImage.tsx

@@ -81,8 +81,8 @@ export const PendingResultPlaceholder = ({ isLargeImage }: { isLargeImage: boole
 }
 
 const InspectionImageWithPlaceholder = ({ task, isLargeImage }: { task: Task; isLargeImage: boolean }) => {
-    const { fetchImageData } = useInspectionsContext()
-    const { data, isPending, isError } = fetchImageData(task.inspection.isarInspectionId)
+    const { useImageData } = useInspectionsContext()
+    const { data, isPending, isError } = useImageData(task.inspection.isarInspectionId)
     if (isError || !data) {
         const errorMsg = 'No inspection could be found'
         return <TextAsImage isLargeImage={isLargeImage} text={errorMsg} />
@@ -97,8 +97,8 @@ const InspectionImageWithPlaceholder = ({ task, isLargeImage }: { task: Task; is
 }
 
 const InspectionValueWithPlaceholder = ({ task, isLargeImage }: { task: Task; isLargeImage: boolean }) => {
-    const { fetchValueData } = useInspectionsContext()
-    const { data, isPending, isError } = fetchValueData(task.inspection.isarInspectionId)
+    const { useValueData } = useInspectionsContext()
+    const { data, isPending, isError } = useValueData(task.inspection.isarInspectionId)
 
     if (isError || data === undefined) {
         const errorMsg = 'No inspection could be found'

frontend/src/pages/MissionPage/AnalysisResultView.tsx

@@ -27,8 +27,8 @@ const StyledImage = styled.img<{ $otherContentHeight?: string }>`
     border: none;
 `
 const AnalysisImage = ({ inspectionId }: { inspectionId: string }) => {
-    const { fetchAnalysisData } = useInspectionsContext()
-    const { data, isPending } = fetchAnalysisData(inspectionId)
+    const { useAnalysisData } = useInspectionsContext()
+    const { data, isPending } = useAnalysisData(inspectionId)
 
     if (isPending) return <PendingResultPlaceholder isLargeImage={true} />
     if (!data) return <TextAsImage isLargeImage={true} text="No inspection could be found" />