Rename fetch functions to use hooks

Author: marianards

frontend/src/components/Contexts/InspectionsContext.tsx

@@ -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)
@@ -85,8 +85,7 @@ export const InspectionsProvider: FC<Props> = ({ children }) => {
         }
     }, [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 () => {
@@ -101,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 () => {
@@ -116,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 () => {
@@ -134,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" />