Skip to content

Commit 1f14550

Browse files
marianardsmarianards
committed
Refetch data on tab visible
1 parent e7114ab commit 1f14550

4 files changed

Lines changed: 125 additions & 92 deletions

File tree

‎frontend/src/components/Contexts/AssetContext.tsx‎

Lines changed: 32 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { AlertCategory } from 'components/Alerts/AlertsBanner'
88
import { InspectionArea } from 'models/InspectionArea'
99
import { useBackendApi } from 'api/UseBackendApi'
1010
import { InstallationContext } from './InstallationContext'
11+
import { useOnPageVisible } from 'hooks/usePageVisibility'
1112

1213
const upsertRobotList = (list: RobotWithoutTelemetry[], robot: RobotWithoutTelemetry) => {
1314
const newList = [...list]
@@ -98,35 +99,36 @@ export const AssetProvider: FC<Props> = ({ children }) => {
9899
}
99100
}, [registerEvent, connectionReady])
100101

102+
const fetchEnabledRobots = () => {
103+
backendApi
104+
.getEnabledRobots()
105+
.then((robots) => {
106+
setEnabledRobots(robots)
107+
})
108+
.catch(() => {
109+
setAlert(
110+
AlertType.RequestFail,
111+
<FailedRequestAlertContent translatedMessage={TranslateText('Failed to retrieve robots')} />,
112+
AlertCategory.ERROR
113+
)
114+
setListAlert(
115+
AlertType.RequestFail,
116+
<FailedRequestAlertListContent translatedMessage={TranslateText('Failed to retrieve robots')} />,
117+
AlertCategory.ERROR
118+
)
119+
})
120+
}
121+
101122
useEffect(() => {
102-
if (!enabledRobots || enabledRobots.length === 0)
103-
backendApi
104-
.getEnabledRobots()
105-
.then((robots) => {
106-
setEnabledRobots(robots)
107-
})
108-
.catch(() => {
109-
setAlert(
110-
AlertType.RequestFail,
111-
<FailedRequestAlertContent translatedMessage={TranslateText('Failed to retrieve robots')} />,
112-
AlertCategory.ERROR
113-
)
114-
setListAlert(
115-
AlertType.RequestFail,
116-
<FailedRequestAlertListContent
117-
translatedMessage={TranslateText('Failed to retrieve robots')}
118-
/>,
119-
AlertCategory.ERROR
120-
)
121-
})
123+
if (!enabledRobots || enabledRobots.length === 0) fetchEnabledRobots()
122124
}, [])
123125

124126
const filteredRobots = useMemo(
125127
() => enabledRobots.filter((r) => r.currentInstallation.id === installation.id),
126128
[enabledRobots, installation.id]
127129
)
128130

129-
useEffect(() => {
131+
const fetchInstallationInspectionAreas = () => {
130132
backendApi
131133
.getInspectionAreasByInstallationCode(installation.installationCode)
132134
.then((inspectionAreas: InspectionArea[]) => {
@@ -152,8 +154,17 @@ export const AssetProvider: FC<Props> = ({ children }) => {
152154
AlertCategory.ERROR
153155
)
154156
})
157+
}
158+
159+
useEffect(() => {
160+
fetchInstallationInspectionAreas()
155161
}, [])
156162

163+
useOnPageVisible(() => {
164+
fetchEnabledRobots()
165+
fetchInstallationInspectionAreas()
166+
})
167+
157168
useEffect(() => {
158169
if (connectionReady) {
159170
registerEvent(SignalREventLabels.inspectionAreaCreated, (username: string, message: string) => {

‎frontend/src/components/Contexts/MissionDefinitionsContext.tsx‎

Lines changed: 34 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { FailedRequestAlertContent, FailedRequestAlertListContent } from 'compon
77
import { AlertCategory } from 'components/Alerts/AlertsBanner'
88
import { useBackendApi } from 'api/UseBackendApi'
99
import { InstallationContext } from './InstallationContext'
10+
import { useOnPageVisible } from 'hooks/usePageVisibility'
1011

1112
interface IMissionDefinitionsContext {
1213
missionDefinitions: MissionDefinition[]
@@ -67,38 +68,43 @@ const useMissionDefinitions = (): IMissionDefinitionsContext => {
6768
}
6869
}, [registerEvent, connectionReady])
6970

71+
const fetchAndUpdateMissionDefinitions = () => {
72+
backendApi
73+
.getMissionDefinitions({
74+
installationCode: installation.installationCode,
75+
pageSize: 100,
76+
orderBy: 'InstallationCode installationCode',
77+
})
78+
.then((response) => {
79+
const missionDefinitionsInInstallation = response.content
80+
setMissionDefinitions(missionDefinitionsInInstallation ?? [])
81+
})
82+
.catch(() => {
83+
setAlert(
84+
AlertType.RequestFail,
85+
<FailedRequestAlertContent
86+
translatedMessage={TranslateText('Failed to retrieve inspection plans')}
87+
/>,
88+
AlertCategory.ERROR
89+
)
90+
setListAlert(
91+
AlertType.RequestFail,
92+
<FailedRequestAlertListContent
93+
translatedMessage={TranslateText('Failed to retrieve inspection plans')}
94+
/>,
95+
AlertCategory.ERROR
96+
)
97+
})
98+
}
99+
70100
useEffect(() => {
71-
const fetchAndUpdateMissionDefinitions = () => {
72-
backendApi
73-
.getMissionDefinitions({
74-
installationCode: installation.installationCode,
75-
pageSize: 100,
76-
orderBy: 'InstallationCode installationCode',
77-
})
78-
.then((response) => {
79-
const missionDefinitionsInInstallation = response.content
80-
setMissionDefinitions(missionDefinitionsInInstallation ?? [])
81-
})
82-
.catch(() => {
83-
setAlert(
84-
AlertType.RequestFail,
85-
<FailedRequestAlertContent
86-
translatedMessage={TranslateText('Failed to retrieve inspection plans')}
87-
/>,
88-
AlertCategory.ERROR
89-
)
90-
setListAlert(
91-
AlertType.RequestFail,
92-
<FailedRequestAlertListContent
93-
translatedMessage={TranslateText('Failed to retrieve inspection plans')}
94-
/>,
95-
AlertCategory.ERROR
96-
)
97-
})
98-
}
99101
fetchAndUpdateMissionDefinitions()
100102
}, [installation])
101103

104+
useOnPageVisible(() => {
105+
fetchAndUpdateMissionDefinitions()
106+
})
107+
102108
const filteredMissionDefinitions = useMemo(
103109
() =>
104110
missionDefinitions.filter(

‎frontend/src/components/Contexts/MissionRunsContext.tsx‎

Lines changed: 42 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { AlertCategory } from 'components/Alerts/AlertsBanner'
99
import { useBackendApi } from 'api/UseBackendApi'
1010
import { AuthContext } from './AuthContext'
1111
import { InstallationContext } from './InstallationContext'
12+
import { useOnPageVisible } from 'hooks/usePageVisibility'
1213

1314
const upsertMissionList = (list: Mission[], mission: Mission) => {
1415
const newMissionList = [...list]
@@ -135,56 +136,54 @@ const useMissionRuns = (): IMissionRunsContext => {
135136
}
136137
}, [registerEvent, connectionReady])
137138

138-
useEffect(() => {
139-
if (!isAuthenticated) return
140-
const fetchAndUpdateMissions = async () => {
141-
const ongoing = await fetchMissionRuns({
142-
installationCode: installation.installationCode,
143-
statuses: [MissionStatus.Ongoing, MissionStatus.Pending, MissionStatus.Paused],
144-
pageSize: 100,
145-
orderBy: 'StartTime desc',
146-
}).catch(() => {
147-
setAlert(
148-
AlertType.RequestFail,
149-
<FailedRequestAlertContent translatedMessage={TranslateText('Failed to retrieve mission runs')} />,
150-
AlertCategory.ERROR
151-
)
152-
setListAlert(
153-
AlertType.RequestFail,
154-
<FailedRequestAlertListContent
155-
translatedMessage={TranslateText('Failed to retrieve mission runs')}
156-
/>,
157-
AlertCategory.ERROR
158-
)
139+
const fetchAndUpdateMissions = () => {
140+
const onFetchError = () => {
141+
setAlert(
142+
AlertType.RequestFail,
143+
<FailedRequestAlertContent translatedMessage={TranslateText('Failed to retrieve mission runs')} />,
144+
AlertCategory.ERROR
145+
)
146+
setListAlert(
147+
AlertType.RequestFail,
148+
<FailedRequestAlertListContent translatedMessage={TranslateText('Failed to retrieve mission runs')} />,
149+
AlertCategory.ERROR
150+
)
151+
}
152+
153+
fetchMissionRuns({
154+
installationCode: installation.installationCode,
155+
statuses: [MissionStatus.Ongoing, MissionStatus.Pending, MissionStatus.Paused],
156+
pageSize: 100,
157+
orderBy: 'StartTime desc',
158+
})
159+
.then((ongoing) => setOngoingMissions(ongoing ?? []))
160+
.catch(() => {
161+
onFetchError()
162+
setOngoingMissions([])
159163
})
160164

161-
setOngoingMissions(ongoing ?? [])
162-
163-
const queue = await fetchMissionRuns({
164-
installationCode: installation.installationCode,
165-
statuses: [MissionStatus.Queued],
166-
pageSize: 100,
167-
orderBy: 'CreationTime',
168-
}).catch(() => {
169-
setAlert(
170-
AlertType.RequestFail,
171-
<FailedRequestAlertContent translatedMessage={TranslateText('Failed to retrieve mission runs')} />,
172-
AlertCategory.ERROR
173-
)
174-
setListAlert(
175-
AlertType.RequestFail,
176-
<FailedRequestAlertListContent
177-
translatedMessage={TranslateText('Failed to retrieve mission runs')}
178-
/>,
179-
AlertCategory.ERROR
180-
)
165+
fetchMissionRuns({
166+
installationCode: installation.installationCode,
167+
statuses: [MissionStatus.Queued],
168+
pageSize: 100,
169+
orderBy: 'CreationTime',
170+
})
171+
.then((queue) => setMissionQueue(queue ?? []))
172+
.catch(() => {
173+
onFetchError()
174+
setMissionQueue([])
181175
})
176+
}
182177

183-
setMissionQueue(queue ?? [])
184-
}
178+
useEffect(() => {
179+
if (!isAuthenticated) return
185180
fetchAndUpdateMissions()
186181
}, [installation])
187182

183+
useOnPageVisible(() => {
184+
if (isAuthenticated) fetchAndUpdateMissions()
185+
})
186+
188187
const filteredOngoingMissions = useMemo(
189188
() => ongoingMissions.filter((m) => m.installationCode === installation.installationCode),
190189
[ongoingMissions, installation.installationCode]

‎frontend/src/hooks/usePageVisibility.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { useEffect, useRef } from 'react'
2+
3+
export const useOnPageVisible = (onVisible: () => void) => {
4+
const savedCallback = useRef(onVisible)
5+
6+
useEffect(() => {
7+
savedCallback.current = onVisible
8+
}, [onVisible])
9+
10+
useEffect(() => {
11+
const handleVisibilityChange = () => {
12+
if (document.visibilityState === 'visible') savedCallback.current()
13+
}
14+
document.addEventListener('visibilitychange', handleVisibilityChange)
15+
return () => document.removeEventListener('visibilitychange', handleVisibilityChange)
16+
}, [])
17+
}

0 commit comments

Comments
 (0)