Add timer for fetching images every 10s

equinor · Dec 13, 2024 · 25b9326 · 25b9326
1 parent 76ddf53
commit 25b9326
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 14 deletions.
diff --git a/frontend/src/components/Contexts/InpectionsContext.tsx b/frontend/src/components/Contexts/InpectionsContext.tsx
@@ -37,8 +37,18 @@ export const InspectionsProvider: FC<Props> = ({ children }) => {
     }>({})
 
     const [triggerFetch, setTriggerFetch] = useState<boolean>(false)
+    const [startTimer, setStartTimer] = useState<boolean>(false)
     const imageObjectURL = useRef<string>('')
 
+    useEffect(() => {
+        const timeoutId = setTimeout(() => {
+            if (selectedInspectionTasksToFetch.length > 0)
+                setTriggerFetch((oldSetTriggerToFetch) => !oldSetTriggerToFetch)
+        }, 10000)
+        return () => clearTimeout(timeoutId)
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [startTimer])
+
     useEffect(() => {
         Object.values(selectedInspectionTasksToFetch).forEach((task, index) => {
             if (task.isarTaskId) {
@@ -56,12 +66,12 @@ export const InspectionsProvider: FC<Props> = ({ children }) => {
                             return newInspectionTaksToFetch
                         })
                     })
-
                     .catch(() => {
-                        setTriggerFetch((oldSetTriggerToFetch) => !oldSetTriggerToFetch)
+                        setStartTimer((oldValue) => !oldValue)
                     })
             }
         })
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [installationCode, selectedInspectionTasksToFetch, triggerFetch])
 
     const switchSelectedInspectionTask = (selectedName: Task | undefined) => {

diff --git a/frontend/src/components/Pages/InspectionReportPage.tsx/InspectionStyles.tsx b/frontend/src/components/Pages/InspectionReportPage.tsx/InspectionStyles.tsx
@@ -1,6 +1,6 @@
-import { Button, Card, Dialog } from "@equinor/eds-core-react"
-import { tokens } from "@equinor/eds-tokens"
-import { styled } from "styled-components"
+import { Button, Card, Dialog } from '@equinor/eds-core-react'
+import { tokens } from '@equinor/eds-tokens'
+import { styled } from 'styled-components'
 
 export const StyledInspection = styled.canvas`
     flex: 1 0 0;

diff --git a/frontend/src/components/Pages/InspectionReportPage.tsx/InspectionView.tsx b/frontend/src/components/Pages/InspectionReportPage.tsx/InspectionView.tsx
@@ -6,16 +6,30 @@ import { Icons } from 'utils/icons'
 import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import { formatDateTime } from 'utils/StringFormatting'
 import { useInspectionsContext } from 'components/Contexts/InpectionsContext'
-import { useNavigate } from 'react-router-dom'
-import { config } from 'config'
-import { StyledBottomContent, StyledCloseButton, StyledDialog, StyledDialogContent, StyledDialogHeader, StyledDialogInspectionView, StyledImageCard, StyledImagesSection, StyledInfoContent, StyledInspection, StyledInspectionCards, StyledInspectionContent, StyledInspectionData, StyledInspectionImage, StyledSection } from './InspectionStyles'
+import {
+    StyledBottomContent,
+    StyledCloseButton,
+    StyledDialog,
+    StyledDialogContent,
+    StyledDialogHeader,
+    StyledDialogInspectionView,
+    StyledImageCard,
+    StyledImagesSection,
+    StyledInfoContent,
+    StyledInspection,
+    StyledInspectionCards,
+    StyledInspectionContent,
+    StyledInspectionData,
+    StyledInspectionImage,
+    StyledSection,
+} from './InspectionStyles'
 
 interface InspectionDialogViewProps {
     task: Task
     tasks: Task[]
 }
 
-export const getMeta = async (url: string) => {
+const getMeta = async (url: string) => {
     const image = new Image()
     image.src = url
     await image.decode()
@@ -46,8 +60,8 @@ export const InspectionDialogView = ({ task, tasks }: InspectionDialogViewProps)
                 }
                 setInspectionImage(img)
             })
-            // eslint-disable-next-line react-hooks/exhaustive-deps
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [mappingInspectionTasksObjectURL])
 
     useEffect(() => {
@@ -117,7 +131,6 @@ interface InspectionsViewSectionProps {
 export const InspectionsViewSection = ({ tasks, dialogView }: InspectionsViewSectionProps) => {
     const { TranslateText } = useLanguageContext()
     const { switchSelectedInspectionTask } = useInspectionsContext()
-    let navigate = useNavigate()
 
     return (
         <>
@@ -126,7 +139,7 @@ export const InspectionsViewSection = ({ tasks, dialogView }: InspectionsViewSec
                     width: dialogView ? '350px' : 'auto',
                     borderColor: dialogView ? 'white' : 'auto',
                     padding: dialogView ? '0px' : 'auto',
-                    maxHeight: dialogView ?  '60vh' : 'auto'
+                    maxHeight: dialogView ? '60vh' : 'auto',
                 }}
             >
                 {!dialogView && <Typography variant="h4">{TranslateText('Last completed inspection')}</Typography>}
@@ -203,8 +216,8 @@ const GetInspectionImage = ({ task, tasks }: GetInspectionImageProps) => {
                 }
                 setInspectionImage(img)
             })
-            // eslint-disable-next-line react-hooks/exhaustive-deps
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [mappingInspectionTasksObjectURL])
 
     useEffect(() => {

diff --git a/frontend/src/components/Pages/MissionPage/MissionPage.tsx b/frontend/src/components/Pages/MissionPage/MissionPage.tsx
@@ -113,7 +113,7 @@ export const MissionPage = () => {
                             )}
                         </VideoStreamSection>
                         {selectedInspectionTask && selectedInspectionTask.isarTaskId && (
-                            <InspectionDialogView task={selectedInspectionTask} tasks={selectedMission.tasks}/>
+                            <InspectionDialogView task={selectedInspectionTask} tasks={selectedMission.tasks} />
                         )}
                         <InspectionsViewSection tasks={selectedMission.tasks} />
                     </>