Skip to content

Commit b74bc72

Browse files
marianardsmarianards
committed
Enable React Compiler eslint rules, fix issues
1 parent d73dcd6 commit b74bc72

22 files changed

Lines changed: 241 additions & 301 deletions

‎frontend/eslint.config.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,18 @@ import reactRefresh from 'eslint-plugin-react-refresh'
88
export default tseslint.config(
99
{ ignores: ['dist'] },
1010
{
11-
extends: [js.configs.recommended, ...tseslint.configs.recommended],
11+
extends: [
12+
js.configs.recommended,
13+
...tseslint.configs.recommended,
14+
reactHooks.configs.flat['recommended-latest'],
15+
],
1216
files: ['**/*.{ts,tsx}'],
1317
languageOptions: {
1418
ecmaVersion: 2024,
1519
globals: globals.browser,
1620
},
1721
plugins: {
1822
react: pluginReact,
19-
'react-hooks': reactHooks,
2023
'react-refresh': reactRefresh,
2124
},
2225
rules: {

‎frontend/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@
6767
"@types/styled-components": "^5.1.36",
6868
"eslint": "^9.39.3",
6969
"eslint-plugin-react": "^7.37.5",
70-
"eslint-plugin-react-hooks": "^6.0.0",
70+
"eslint-plugin-react-hooks": "^7.1.1",
7171
"eslint-plugin-react-refresh": "^0.4.26",
7272
"globals": "^17.4.0",
7373
"jsdom": "^28.1.0",

‎frontend/pnpm-lock.yaml‎

Lines changed: 19 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 60 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -286,36 +286,6 @@ export const AlertProvider: FC<Props> = ({ children }) => {
286286
}
287287
}, [registerEvent, connectionReady, installation, enabledRobots])
288288

289-
useEffect(() => {
290-
if (recentFailedMissions.length > 0) {
291-
setAlert(
292-
AlertType.MissionFail,
293-
<FailedMissionAlertContent missions={recentFailedMissions} />,
294-
AlertCategory.ERROR
295-
)
296-
setListAlert(
297-
AlertType.MissionFail,
298-
<FailedMissionAlertListContent missions={recentFailedMissions} />,
299-
AlertCategory.ERROR
300-
)
301-
}
302-
}, [recentFailedMissions])
303-
304-
useEffect(() => {
305-
if (Object.keys(autoScheduleFailedMissionDict).length > 0) {
306-
setListAlert(
307-
AlertType.AutoScheduleFail,
308-
<FailedAutoMissionAlertContent autoScheduleFailedMissionDict={autoScheduleFailedMissionDict} />,
309-
AlertCategory.ERROR
310-
)
311-
setAlert(
312-
AlertType.AutoScheduleFail,
313-
<FailedAutoMissionAlertContent autoScheduleFailedMissionDict={autoScheduleFailedMissionDict} />,
314-
AlertCategory.ERROR
315-
)
316-
}
317-
}, [connectionReady, autoScheduleFailedMissionDict])
318-
319289
const robotsWithFrozenQueue = enabledRobots.filter((robot) => robot.status === RobotStatus.Lockdown)
320290

321291
const getActiveSendToDockAlertType = () => {
@@ -324,48 +294,80 @@ export const AlertProvider: FC<Props> = ({ children }) => {
324294
else return AlertType.DockSuccess
325295
}
326296

297+
const computedDockAlertType = getActiveSendToDockAlertType()
327298
const [activeSendToDockAlertType, setActiveSendToDockAlertType] = useState<AlertType | undefined>(
328-
getActiveSendToDockAlertType()
299+
computedDockAlertType
329300
)
301+
const [prevComputedDockAlertType, setPrevComputedDockAlertType] = useState<AlertType | undefined>(
302+
computedDockAlertType
303+
)
304+
const [dismissedDockAlertType, setDismissedDockAlertType] = useState<AlertType | undefined>(undefined)
305+
306+
if (computedDockAlertType !== prevComputedDockAlertType) {
307+
setPrevComputedDockAlertType(computedDockAlertType)
308+
setDismissedDockAlertType(undefined)
309+
setActiveSendToDockAlertType((current) => {
310+
if (current === computedDockAlertType) return current
311+
if (current !== undefined && computedDockAlertType === undefined) return AlertType.DismissDock
312+
return computedDockAlertType
313+
})
314+
}
330315

331-
useEffect(() => {
332-
let newActiveSendToDockAlertType = getActiveSendToDockAlertType()
333-
if (activeSendToDockAlertType === newActiveSendToDockAlertType) return
316+
const showDockAlert =
317+
activeSendToDockAlertType !== undefined && activeSendToDockAlertType !== dismissedDockAlertType
318+
319+
const combinedAlerts: AlertDictionaryType = { ...alerts }
320+
const combinedListAlerts: AlertDictionaryType = { ...listAlerts }
334321

335-
if (activeSendToDockAlertType !== undefined && newActiveSendToDockAlertType === undefined) {
336-
newActiveSendToDockAlertType = AlertType.DismissDock
322+
if (recentFailedMissions.length > 0) {
323+
combinedAlerts[AlertType.MissionFail] = {
324+
content: <FailedMissionAlertContent missions={recentFailedMissions} />,
325+
dismissFunction: () => clearAlert(AlertType.MissionFail),
326+
alertCategory: AlertCategory.ERROR,
337327
}
338-
setActiveSendToDockAlertType(newActiveSendToDockAlertType)
339-
}, [robotsWithFrozenQueue])
328+
combinedListAlerts[AlertType.MissionFail] = {
329+
content: <FailedMissionAlertListContent missions={recentFailedMissions} />,
330+
dismissFunction: () => clearListAlert(AlertType.MissionFail),
331+
alertCategory: AlertCategory.ERROR,
332+
}
333+
}
340334

341-
useEffect(() => {
342-
clearListAlert(AlertType.DismissDock)
343-
clearAlert(AlertType.DismissDock)
344-
clearListAlert(AlertType.RequestDock)
345-
clearAlert(AlertType.RequestDock)
346-
clearListAlert(AlertType.DockSuccess)
347-
clearAlert(AlertType.DockSuccess)
348-
349-
if (activeSendToDockAlertType === undefined) return
350-
const alertCategory =
351-
activeSendToDockAlertType === AlertType.RequestDock ? AlertCategory.WARNING : AlertCategory.INFO
335+
if (Object.keys(autoScheduleFailedMissionDict).length > 0) {
336+
combinedAlerts[AlertType.AutoScheduleFail] = {
337+
content: <FailedAutoMissionAlertContent autoScheduleFailedMissionDict={autoScheduleFailedMissionDict} />,
338+
dismissFunction: () => clearAlert(AlertType.AutoScheduleFail),
339+
alertCategory: AlertCategory.ERROR,
340+
}
341+
combinedListAlerts[AlertType.AutoScheduleFail] = {
342+
content: <FailedAutoMissionAlertContent autoScheduleFailedMissionDict={autoScheduleFailedMissionDict} />,
343+
dismissFunction: () => clearListAlert(AlertType.AutoScheduleFail),
344+
alertCategory: AlertCategory.ERROR,
345+
}
346+
}
352347

353-
setListAlert(
354-
AlertType.RequestDock,
355-
<DockAlertListContent alertType={activeSendToDockAlertType} />,
356-
alertCategory
357-
)
358-
setAlert(AlertType.RequestDock, <DockAlertContent alertType={activeSendToDockAlertType} />, alertCategory)
359-
}, [activeSendToDockAlertType])
348+
if (showDockAlert) {
349+
const dockAlertCategory =
350+
activeSendToDockAlertType === AlertType.RequestDock ? AlertCategory.WARNING : AlertCategory.INFO
351+
combinedAlerts[AlertType.RequestDock] = {
352+
content: <DockAlertContent alertType={activeSendToDockAlertType!} />,
353+
dismissFunction: () => setDismissedDockAlertType(activeSendToDockAlertType),
354+
alertCategory: dockAlertCategory,
355+
}
356+
combinedListAlerts[AlertType.RequestDock] = {
357+
content: <DockAlertListContent alertType={activeSendToDockAlertType!} />,
358+
dismissFunction: () => setDismissedDockAlertType(activeSendToDockAlertType),
359+
alertCategory: dockAlertCategory,
360+
}
361+
}
360362

361363
return (
362364
<AlertContext.Provider
363365
value={{
364-
alerts,
366+
alerts: combinedAlerts,
365367
setAlert,
366368
clearAlerts,
367369
clearAlert,
368-
listAlerts,
370+
listAlerts: combinedListAlerts,
369371
setListAlert,
370372
clearListAlerts,
371373
clearListAlert,

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

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { createContext, useContext, useState, FC, useEffect } from 'react'
1+
import { createContext, useContext, useState, FC, useEffect, useMemo } from 'react'
22
import { RobotPropertyUpdate, RobotWithoutTelemetry, robotTelemetryPropsList } from 'models/Robot'
33
import { SignalREventLabels, useSignalRContext } from './SignalRContext'
44
import { useLanguageContext } from './LanguageContext'
@@ -121,11 +121,10 @@ export const AssetProvider: FC<Props> = ({ children }) => {
121121
})
122122
}, [])
123123

124-
const [filteredRobots, setFilteredRobots] = useState<RobotWithoutTelemetry[]>([])
125-
126-
useEffect(() => {
127-
setFilteredRobots(enabledRobots.filter((r) => r.currentInstallation.id === installation.id))
128-
}, [installation, enabledRobots])
124+
const filteredRobots = useMemo(
125+
() => enabledRobots.filter((r) => r.currentInstallation.id === installation.id),
126+
[enabledRobots, installation.id]
127+
)
129128

130129
useEffect(() => {
131130
backendApi
@@ -194,12 +193,10 @@ export const AssetProvider: FC<Props> = ({ children }) => {
194193
}
195194
}, [registerEvent, connectionReady])
196195

197-
const [filteredInstallationInspectionAreas, setFilteredInstallationInspectionAreas] = useState<InspectionArea[]>([])
198-
useEffect(() => {
199-
setFilteredInstallationInspectionAreas(
200-
installationInspectionAreas.filter((d) => d.installationCode === installation.installationCode)
201-
)
202-
}, [installation, installationInspectionAreas])
196+
const filteredInstallationInspectionAreas = useMemo(
197+
() => installationInspectionAreas.filter((d) => d.installationCode === installation.installationCode),
198+
[installationInspectionAreas, installation.installationCode]
199+
)
203200

204201
return (
205202
<AssetContext.Provider

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

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -36,23 +36,6 @@ export const MediaStreamProvider: FC<Props> = ({ children }) => {
3636
)
3737
const backendApi = useBackendApi()
3838

39-
useEffect(() => {
40-
// Here we maintain the localstorage with the connection details
41-
const updatedConfigs: MediaStreamConfigDictionaryType = {}
42-
Object.keys(mediaStreams).forEach((robotId) => {
43-
const conf = mediaStreams[robotId]
44-
45-
if (conf.streams.length === 0 && !conf.isLoading) refreshRobotMediaConfig(robotId)
46-
updatedConfigs[robotId] = {
47-
url: conf.url,
48-
token: conf.token,
49-
mediaConnectionType: conf.mediaConnectionType,
50-
robotId: conf.robotId,
51-
}
52-
})
53-
window.localStorage.setItem('mediaConfigs', JSON.stringify(updatedConfigs))
54-
}, [mediaStreams])
55-
5639
const addTrackToConnection = (newTrack: MediaStreamTrack, robotId: string) => {
5740
setMediaStreams((oldStreams) => {
5841
if (
@@ -151,6 +134,22 @@ export const MediaStreamProvider: FC<Props> = ({ children }) => {
151134
.catch(() => console.log(`No media config found for robot with ID ${robotId}`))
152135
}
153136

137+
useEffect(() => {
138+
const updatedConfigs: MediaStreamConfigDictionaryType = {}
139+
Object.keys(mediaStreams).forEach((robotId) => {
140+
const conf = mediaStreams[robotId]
141+
142+
if (conf.streams.length === 0 && !conf.isLoading) refreshRobotMediaConfig(robotId)
143+
updatedConfigs[robotId] = {
144+
url: conf.url,
145+
token: conf.token,
146+
mediaConnectionType: conf.mediaConnectionType,
147+
robotId: conf.robotId,
148+
}
149+
})
150+
window.localStorage.setItem('mediaConfigs', JSON.stringify(updatedConfigs))
151+
}, [mediaStreams])
152+
154153
return (
155154
<MediaStreamContext.Provider
156155
value={{

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

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { createContext, FC, useContext, useEffect, useState } from 'react'
1+
import { createContext, FC, useContext, useEffect, useMemo, useState } from 'react'
22
import { SignalREventLabels, useSignalRContext } from './SignalRContext'
33
import { MissionDefinition } from 'models/MissionDefinition'
44
import { useLanguageContext } from './LanguageContext'
@@ -99,15 +99,13 @@ const useMissionDefinitions = (): IMissionDefinitionsContext => {
9999
fetchAndUpdateMissionDefinitions()
100100
}, [installation])
101101

102-
const [filteredMissionDefinitions, setFilteredMissionDefinitions] = useState<MissionDefinition[]>([])
103-
104-
useEffect(() => {
105-
setFilteredMissionDefinitions(
102+
const filteredMissionDefinitions = useMemo(
103+
() =>
106104
missionDefinitions.filter(
107105
(m) => m.installationCode.toLowerCase() === installation.installationCode.toLowerCase()
108-
)
109-
)
110-
}, [installation, missionDefinitions])
106+
),
107+
[missionDefinitions, installation.installationCode]
108+
)
111109

112110
return { missionDefinitions: filteredMissionDefinitions }
113111
}

0 commit comments

Comments
 (0)