From f564efe1685b361eb3f49a6b85477c8cf5273782 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anders=20Chirico=20Indreb=C3=B8?= <ACIN@equinor.com>
Date: Mon, 7 Aug 2023 14:34:25 +0200
Subject: [PATCH] Move mission queue to react context

---
 frontend/src/App.tsx                          | 35 +++++++------
 .../Contexts/MissionControlContext.tsx        | 21 ++++----
 .../Contexts/MissionQueueContext.tsx          | 52 +++++++++++++++++++
 .../components/Pages/FrontPage/FrontPage.tsx  |  2 +
 .../MissionOverview/MissionControlButtons.tsx | 14 +++--
 .../MissionOverview/MissionQueueView.tsx      | 20 ++-----
 .../MissionOverview/StopMissionDialog.tsx     |  6 +--
 7 files changed, 99 insertions(+), 51 deletions(-)
 create mode 100644 frontend/src/components/Contexts/MissionQueueContext.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 3a1297945..1bb5b9b30 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -4,25 +4,28 @@ import { FlotillaSite } from 'components/Pages/FlotillaSite'
 import { LanguageProvider } from 'components/Contexts/LanguageContext'
 import { MissionControlProvider } from 'components/Contexts/MissionControlContext'
 import { MissionFilterProvider } from 'components/Contexts/MissionFilterContext'
+import { MissionQueueProvider } from 'components/Contexts/MissionQueueContext'
 
 function App() {
     return (
-        <LanguageProvider>
-            <MissionControlProvider>
-                <>
-                    <UnauthenticatedTemplate>
-                        <div className="sign-in-page">
-                            <SignInPage></SignInPage>
-                        </div>
-                    </UnauthenticatedTemplate>
-                    <AuthenticatedTemplate>
-                        <MissionFilterProvider>
-                            <FlotillaSite />
-                        </MissionFilterProvider>
-                    </AuthenticatedTemplate>
-                </>
-            </MissionControlProvider>
-        </LanguageProvider>
+        <MissionQueueProvider>
+            <LanguageProvider>
+                <MissionControlProvider>
+                    <>
+                        <UnauthenticatedTemplate>
+                            <div className="sign-in-page">
+                                <SignInPage></SignInPage>
+                            </div>
+                        </UnauthenticatedTemplate>
+                        <AuthenticatedTemplate>
+                            <MissionFilterProvider>
+                                <FlotillaSite />
+                            </MissionFilterProvider>
+                        </AuthenticatedTemplate>
+                    </>
+                </MissionControlProvider>
+            </LanguageProvider>
+        </MissionQueueProvider>
     )
 }
 
diff --git a/frontend/src/components/Contexts/MissionControlContext.tsx b/frontend/src/components/Contexts/MissionControlContext.tsx
index e418e1216..28b193d56 100644
--- a/frontend/src/components/Contexts/MissionControlContext.tsx
+++ b/frontend/src/components/Contexts/MissionControlContext.tsx
@@ -1,7 +1,7 @@
 import { createContext, useContext, useState, FC } from 'react'
 import { BackendAPICaller } from 'api/ApiCaller'
 import { Mission } from 'models/Mission'
-import { ControlButton } from 'components/Pages/FrontPage/MissionOverview/StopMissionDialog'
+import { MissionStatusRequest } from 'components/Pages/FrontPage/MissionOverview/StopMissionDialog'
 
 interface IMissionControlState {
     isWaitingForResponse: boolean
@@ -13,14 +13,12 @@ interface Props {
 
 export interface IMissionControlContext {
     missionControlState: IMissionControlState
-    setIsWaitingForResponse: (isWaiting: boolean) => void
-    handleClick: (button: ControlButton, mission: Mission) => void
+    updateMissionState: (newState: MissionStatusRequest, mission: Mission) => void
 }
 
 const defaultMissionControlInterface = {
     missionControlState: { isWaitingForResponse: false },
-    setIsWaitingForResponse: (isWaiting: boolean) => {},
-    handleClick: (button: ControlButton, mission: Mission) => {},
+    updateMissionState: (newState: MissionStatusRequest, mission: Mission) => {},
 }
 
 export const MissionControlContext = createContext<IMissionControlContext>(defaultMissionControlInterface)
@@ -35,19 +33,19 @@ export const MissionControlProvider: FC<Props> = ({ children }) => {
         setMissionControlState({ isWaitingForResponse: isWaiting })
     }
 
-    const handleClick = (button: ControlButton, mission: Mission) => {
-        switch (button) {
-            case ControlButton.Pause: {
+    const updateMissionState = (newState: MissionStatusRequest, mission: Mission) => {
+        switch (newState) {
+            case MissionStatusRequest.Pause: {
                 setIsWaitingForResponse(true)
                 BackendAPICaller.pauseMission(mission.robot.id).then((_) => setIsWaitingForResponse(false))
                 break
             }
-            case ControlButton.Resume: {
+            case MissionStatusRequest.Resume: {
                 setIsWaitingForResponse(true)
                 BackendAPICaller.resumeMission(mission.robot.id).then((_) => setIsWaitingForResponse(false))
                 break
             }
-            case ControlButton.Stop: {
+            case MissionStatusRequest.Stop: {
                 setIsWaitingForResponse(true)
                 BackendAPICaller.stopMission(mission.robot.id).then((_) => setIsWaitingForResponse(false))
                 break
@@ -59,8 +57,7 @@ export const MissionControlProvider: FC<Props> = ({ children }) => {
         <MissionControlContext.Provider
             value={{
                 missionControlState,
-                setIsWaitingForResponse,
-                handleClick,
+                updateMissionState,
             }}
         >
             {children}
diff --git a/frontend/src/components/Contexts/MissionQueueContext.tsx b/frontend/src/components/Contexts/MissionQueueContext.tsx
new file mode 100644
index 000000000..18cf985b5
--- /dev/null
+++ b/frontend/src/components/Contexts/MissionQueueContext.tsx
@@ -0,0 +1,52 @@
+import { createContext, FC, useContext, useEffect, useState } from 'react'
+import { Mission, MissionStatus } from 'models/Mission'
+import { refreshInterval } from 'components/Pages/FrontPage/FrontPage'
+import { BackendAPICaller } from 'api/ApiCaller'
+
+interface IMissionQueueContext {
+    missionQueue: Mission[]
+}
+
+interface Props {
+    children: React.ReactNode
+}
+
+const defaultMissionQueueInterface = {
+    missionQueue: [],
+}
+
+export const MissionQueueContext = createContext<IMissionQueueContext>(defaultMissionQueueInterface)
+
+export const MissionQueueProvider: FC<Props> = ({ children }) => {
+    const missionPageSize = 100
+    const [missionQueue, setMissionQueue] = useState<Mission[]>(defaultMissionQueueInterface.missionQueue)
+
+    useEffect(() => {
+        const id = setInterval(() => {
+            BackendAPICaller.getMissionRuns({
+                statuses: [MissionStatus.Pending],
+                pageSize: missionPageSize,
+                orderBy: 'DesiredStartTime',
+            }).then((missions) => {
+                setMissionQueue(missions.content)
+            })
+        }, refreshInterval)
+        return () => clearInterval(id)
+    }, [refreshInterval])
+
+    // If we ever want a view which integrates the control of the
+    // current mission with the queue, then we could combine this
+    // context with MissionControlContext.tsx
+
+    return (
+        <MissionQueueContext.Provider
+            value={{
+                missionQueue,
+            }}
+        >
+            {children}
+        </MissionQueueContext.Provider>
+    )
+}
+
+export const useMissionQueueContext = () => useContext(MissionQueueContext)
diff --git a/frontend/src/components/Pages/FrontPage/FrontPage.tsx b/frontend/src/components/Pages/FrontPage/FrontPage.tsx
index 0543be42d..02a24f0a7 100644
--- a/frontend/src/components/Pages/FrontPage/FrontPage.tsx
+++ b/frontend/src/components/Pages/FrontPage/FrontPage.tsx
@@ -30,6 +30,8 @@ export type RefreshProps = {
     refreshInterval: number
 }
 
+export const refreshInterval = 1000
+
 export function FrontPage() {
     const refreshInterval = 1000
 
diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/MissionControlButtons.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/MissionControlButtons.tsx
index d31dbe491..2682d5fb0 100644
--- a/frontend/src/components/Pages/FrontPage/MissionOverview/MissionControlButtons.tsx
+++ b/frontend/src/components/Pages/FrontPage/MissionOverview/MissionControlButtons.tsx
@@ -7,7 +7,7 @@ import styled from 'styled-components'
 import { Typography } from '@equinor/eds-core-react'
 import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import { useMissionControlContext } from 'components/Contexts/MissionControlContext'
-import { StopMissionDialog, ControlButton } from './StopMissionDialog'
+import { StopMissionDialog, MissionStatusRequest } from './StopMissionDialog'
 
 interface MissionProps {
     mission: Mission
@@ -31,7 +31,7 @@ const checkIfTasksStarted = (tasks: Task[]): boolean => {
 
 export function MissionControlButtons({ mission }: MissionProps) {
     const { TranslateText } = useLanguageContext()
-    const { missionControlState, handleClick } = useMissionControlContext()
+    const { missionControlState, updateMissionState } = useMissionControlContext()
 
     const renderControlIcon = (missionStatus: MissionStatus) => {
         if (missionControlState.isWaitingForResponse) {
@@ -44,7 +44,10 @@ export function MissionControlButtons({ mission }: MissionProps) {
                         <Typography variant="caption">{TranslateText('Stop')}</Typography>
                     </ButtonText>
                     <ButtonText>
-                        <Button variant="ghost_icon" onClick={() => handleClick(ControlButton.Pause, mission)}>
+                        <Button
+                            variant="ghost_icon"
+                            onClick={() => updateMissionState(MissionStatusRequest.Pause, mission)}
+                        >
                             <Icon
                                 name={Icons.PauseButton}
                                 style={{ color: tokens.colors.interactive.secondary__resting.rgba }}
@@ -63,7 +66,10 @@ export function MissionControlButtons({ mission }: MissionProps) {
                         <Typography variant="caption">{TranslateText('Stop')}</Typography>
                     </ButtonText>
                     <ButtonText>
-                        <Button variant="ghost_icon" onClick={() => handleClick(ControlButton.Resume, mission)}>
+                        <Button
+                            variant="ghost_icon"
+                            onClick={() => updateMissionState(MissionStatusRequest.Resume, mission)}
+                        >
                             <Icon
                                 name={Icons.PlayButton}
                                 style={{ color: tokens.colors.interactive.secondary__resting.rgba }}
diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueView.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueView.tsx
index 8d13a34d4..96c767078 100644
--- a/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueView.tsx
+++ b/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueView.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { MissionQueueCard } from './MissionQueueCard'
 import { BackendAPICaller } from 'api/ApiCaller'
 import { useEffect, useState } from 'react'
-import { Mission, MissionStatus } from 'models/Mission'
+import { Mission } from 'models/Mission'
 import { EmptyMissionQueuePlaceholder } from './NoMissionPlaceholder'
 import { ScheduleMissionDialog } from './ScheduleMissionDialog'
 import { Robot } from 'models/Robot'
@@ -12,6 +12,7 @@ import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import { useInstallationContext } from 'components/Contexts/InstallationContext'
 import { CreateMissionButton } from './CreateMissionButton'
 import { MissionDefinition } from 'models/MissionDefinition'
+import { useMissionQueueContext } from 'components/Contexts/MissionQueueContext'
 
 const StyledMissionView = styled.div`
     display: grid;
@@ -40,8 +41,8 @@ const mapEchoMissionToString = (missions: MissionDefinition[]): Map<string, Miss
 
 export function MissionQueueView({ refreshInterval }: RefreshProps) {
     const { TranslateText } = useLanguageContext()
-    const missionPageSize = 100
-    const [missionQueue, setMissionQueue] = useState<Mission[]>([])
+    const { missionQueue } = useMissionQueueContext()
+
     const [selectedEchoMissions, setSelectedEchoMissions] = useState<MissionDefinition[]>([])
     const [selectedRobot, setSelectedRobot] = useState<Robot>()
     const [echoMissions, setEchoMissions] = useState<Map<string, MissionDefinition>>(
@@ -102,19 +103,6 @@ export function MissionQueueView({ refreshInterval }: RefreshProps) {
         return () => clearInterval(id)
     }, [refreshInterval])
 
-    useEffect(() => {
-        const id = setInterval(() => {
-            BackendAPICaller.getMissionRuns({
-                statuses: [MissionStatus.Pending],
-                pageSize: missionPageSize,
-                orderBy: 'DesiredStartTime',
-            }).then((missions) => {
-                setMissionQueue(missions.content)
-            })
-        }, refreshInterval)
-        return () => clearInterval(id)
-    }, [refreshInterval])
-
     useEffect(() => {
         if (selectedRobot === undefined || selectedEchoMissions.length === 0) {
             setScheduleButtonDisabled(true)
diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/StopMissionDialog.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/StopMissionDialog.tsx
index fcafa953b..fae30961b 100644
--- a/frontend/src/components/Pages/FrontPage/MissionOverview/StopMissionDialog.tsx
+++ b/frontend/src/components/Pages/FrontPage/MissionOverview/StopMissionDialog.tsx
@@ -30,7 +30,7 @@ interface MissionProps {
     mission: Mission
 }
 
-export enum ControlButton {
+export enum MissionStatusRequest {
     Pause,
     Stop,
     Resume,
@@ -40,7 +40,7 @@ export const StopMissionDialog = ({ mission }: MissionProps): JSX.Element => {
     const { TranslateText } = useLanguageContext()
     const [isStopMissionDialogOpen, setIsStopMissionDialogOpen] = useState<boolean>(false)
     const [missionId, setMissionId] = useState<string>()
-    const { handleClick } = useMissionControlContext()
+    const { updateMissionState } = useMissionControlContext()
 
     const openDialog = () => {
         setIsStopMissionDialogOpen(true)
@@ -91,7 +91,7 @@ export const StopMissionDialog = ({ mission }: MissionProps): JSX.Element => {
                         <Button
                             variant="contained"
                             color="danger"
-                            onClick={() => handleClick(ControlButton.Stop, mission)}
+                            onClick={() => updateMissionState(MissionStatusRequest.Stop, mission)}
                         >
                             {TranslateText('Stop mission')}
                         </Button>