Refactor inspection view

frontend/src/components/Pages/InspectionReportPage/InspectionOverview.tsx

@@ -0,0 +1,76 @@
+import { useInspectionsContext } from 'components/Contexts/InpectionsContext'
+import { useLanguageContext } from 'components/Contexts/LanguageContext'
+import { Task, TaskStatus } from 'models/Task'
+import {
+    StyledImageCard,
+    StyledImagesSection,
+    StyledInspectionCards,
+    StyledInspectionContent,
+    StyledInspectionData,
+    StyledInspectionOverviewDialogView,
+    StyledInspectionOverviewSection,
+} from './InspectionStyles'
+import { Typography } from '@equinor/eds-core-react'
+import { GetInspectionImage } from './InspectionReportUtilities'
+import { formatDateTime } from 'utils/StringFormatting'
+
+const InspectionOverview = ({ tasks }: { tasks: Task[] }) => {
+    const { TranslateText } = useLanguageContext()
+    const { switchSelectedInspectionTask } = useInspectionsContext()
+
+    return (
+        <StyledImagesSection>
+            <StyledInspectionCards>
+                {Object.keys(tasks).length > 0 &&
+                    tasks.map(
+                        (task) =>
+                            task.status === TaskStatus.Successful && (
+                                <StyledImageCard
+                                    key={task.isarTaskId}
+                                    onClick={() => switchSelectedInspectionTask(task)}
+                                >
+                                    <GetInspectionImage task={task} />
+                                    <StyledInspectionData>
+                                        {task.tagId && (
+                                            <StyledInspectionContent>
+                                                <Typography variant="caption">{TranslateText('Tag') + ':'}</Typography>
+                                                <Typography variant="body_short">{task.tagId}</Typography>
+                                            </StyledInspectionContent>
+                                        )}
+                                        {task.endTime && (
+                                            <StyledInspectionContent>
+                                                <Typography variant="caption">
+                                                    {TranslateText('Timestamp') + ':'}
+                                                </Typography>
+                                                <Typography variant="body_short">
+                                                    {formatDateTime(task.endTime!, 'dd.MM.yy - HH:mm')}
+                                                </Typography>
+                                            </StyledInspectionContent>
+                                        )}
+                                    </StyledInspectionData>
+                                </StyledImageCard>
+                            )
+                    )}
+            </StyledInspectionCards>
+        </StyledImagesSection>
+    )
+}
+
+export const InspectionOverviewSection = ({ tasks }: { tasks: Task[] }) => {
+    const { TranslateText } = useLanguageContext()
+
+    return (
+        <StyledInspectionOverviewSection>
+            <Typography variant="h4">{TranslateText('Last completed inspection')}</Typography>
+            <InspectionOverview tasks={tasks} />
+        </StyledInspectionOverviewSection>
+    )
+}
+
+export const InspectionOverviewDialogView = ({ tasks }: { tasks: Task[] }) => {
+    return (
+        <StyledInspectionOverviewDialogView>
+            <InspectionOverview tasks={tasks} />
+        </StyledInspectionOverviewDialogView>
+    )
+}

frontend/src/components/Pages/InspectionReportPage/InspectionReportUtilities.tsx

@@ -0,0 +1,26 @@
+import { useQuery } from '@tanstack/react-query'
+import { BackendAPICaller } from 'api/ApiCaller'
+import { Task, TaskStatus } from 'models/Task'
+import { StyledInspectionImage } from './InspectionStyles'
+
+export const fetchImageData = (task: Task) => {
+    const data = useQuery({
+        queryKey: ['fetchInspectionData', task.isarTaskId],
+        queryFn: async () => {
+            const imageBlob = await BackendAPICaller.getInspection(task.inspection.isarInspectionId)
+            return URL.createObjectURL(imageBlob)
+        },
+        retryDelay: 60 * 1000, // Waits 1 min before retrying, regardless of how many retries
+        staleTime: 10 * 60 * 1000, // If data is received, stale time is 10 min before making new API call
+        enabled:
+            task.status === TaskStatus.Successful &&
+            task.isarTaskId !== undefined &&
+            task.inspection.isarInspectionId !== undefined,
+    })
+    return data
+}
+
+export const GetInspectionImage = ({ task }: { task: Task }) => {
+    const { data } = fetchImageData(task)
+    return <>{data !== undefined && <StyledInspectionImage src={data} />}</>
+}

frontend/src/components/Pages/InspectionReportPage.tsx/InspectionStyles.tsx → frontend/src/components/Pages/InspectionReportPage/InspectionStyles.tsx

@@ -60,16 +60,25 @@ export const StyledInfoContent = styled.div`
     align-items: flex-start;
 `
 
-export const StyledSection = styled.div`
+export const StyledInspectionOverviewSection = styled.div`
     display: flex;
     padding: 24px;
     min-width: 240px;
     flex-direction: column;
     align-items: flex-start;
     gap: 8px;
     border-radius: 6px;
-    border: 1.194px solid ${tokens.colors.ui.background__medium.hex};
+    border: 1px solid ${tokens.colors.ui.background__medium.hex};
     background: ${tokens.colors.ui.background__default.hex};
+`
+
+export const StyledInspectionOverviewDialogView = styled.div`
+    display: flex;
+    max-height: 60vh;
+    width: 350px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
     overflow-y: scroll;
 `