Prevent spam-click of return home button

equinor · Jan 20, 2025 · 6da3a19 · 6da3a19
1 parent 8d869ef
commit 6da3a19
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 29 deletions.
diff --git a/frontend/src/components/Pages/RobotPage/ReturnHomeButton.tsx b/frontend/src/components/Pages/RobotPage/ReturnHomeButton.tsx
@@ -0,0 +1,54 @@
+import { BackendAPICaller } from 'api/ApiCaller'
+import { useLanguageContext } from 'components/Contexts/LanguageContext'
+import { Robot } from 'models/Robot'
+import { AlertType, useAlertContext } from 'components/Contexts/AlertContext'
+import { FailedRequestAlertContent, FailedRequestAlertListContent } from 'components/Alerts/FailedRequestAlert'
+import { AlertCategory } from 'components/Alerts/AlertsBanner'
+import { StyledButton } from 'components/Styles/StyledComponents'
+import styled from 'styled-components'
+import { useState } from 'react'
+
+const StyledTextButton = styled(StyledButton)`
+    text-align: left;
+    max-width: 12rem;
+`
+
+export const ReturnHomeButton = ({ robot }: { robot: Robot }) => {
+    const { TranslateText } = useLanguageContext()
+    const { setAlert, setListAlert } = useAlertContext()
+    const [isDisabled, setIsDisabled] = useState(false)
+
+    const returnRobotToHome = () => {
+        disableButton()
+
+        BackendAPICaller.returnRobotToHome(robot.id).catch(() => {
+            setAlert(
+                AlertType.RequestFail,
+                <FailedRequestAlertContent
+                    translatedMessage={TranslateText('Failed to send robot {0} home', [robot.name ?? ''])}
+                />,
+                AlertCategory.ERROR
+            )
+            setListAlert(
+                AlertType.RequestFail,
+                <FailedRequestAlertListContent
+                    translatedMessage={TranslateText('Failed to send robot {0} home', [robot.name ?? ''])}
+                />,
+                AlertCategory.ERROR
+            )
+        })
+    }
+
+    const disableButton = () => {
+        setIsDisabled(true)
+        setTimeout(() => {
+            setIsDisabled(false)
+        }, 1000)
+    }
+
+    return (
+        <StyledTextButton variant="outlined" disabled={isDisabled} onClick={returnRobotToHome}>
+            {TranslateText('Return robot to home')}
+        </StyledTextButton>
+    )
+}
diff --git a/frontend/src/components/Pages/RobotPage/RobotPage.tsx b/frontend/src/components/Pages/RobotPage/RobotPage.tsx
@@ -12,11 +12,7 @@ import { RobotStatus } from 'models/Robot'
 import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import { RobotType } from 'models/RobotModel'
 import { useRobotContext } from 'components/Contexts/RobotContext'
-import { BackendAPICaller } from 'api/ApiCaller'
 import { StyledButton, StyledPage } from 'components/Styles/StyledComponents'
-import { AlertType, useAlertContext } from 'components/Contexts/AlertContext'
-import { FailedRequestAlertContent, FailedRequestAlertListContent } from 'components/Alerts/FailedRequestAlert'
-import { AlertCategory } from 'components/Alerts/AlertsBanner'
 import { DocumentationSection } from './Documentation'
 import { useMediaStreamContext } from 'components/Contexts/MediaStreamContext'
 import { VideoStreamSection } from '../MissionPage/MissionPage'
@@ -28,6 +24,7 @@ import { tokens } from '@equinor/eds-tokens'
 import { StopMissionDialog } from '../FrontPage/MissionOverview/StopDialogs'
 import { TaskType } from 'models/Task'
 import { useMissionsContext } from 'components/Contexts/MissionRunsContext'
+import { ReturnHomeButton } from './ReturnHomeButton'
 
 const StyledTextButton = styled(StyledButton)`
     text-align: left;
@@ -57,7 +54,6 @@ const StatusContent = styled.div`
 
 export const RobotPage = () => {
     const { TranslateText } = useLanguageContext()
-    const { setAlert, setListAlert } = useAlertContext()
     const { robotId } = useParams()
     const { enabledRobots } = useRobotContext()
     const { mediaStreams, addMediaStreamConfigIfItDoesNotExist } = useMediaStreamContext()
@@ -82,27 +78,6 @@ export const RobotPage = () => {
     if (mission?.tasks.every((task) => task.type === TaskType.ReturnHome)) missionTaskType = TaskType.ReturnHome
     if (mission?.tasks.every((task) => task.type === TaskType.Localization)) missionTaskType = TaskType.Localization
 
-    const returnRobotToHome = () => {
-        if (robotId) {
-            BackendAPICaller.returnRobotToHome(robotId).catch(() => {
-                setAlert(
-                    AlertType.RequestFail,
-                    <FailedRequestAlertContent
-                        translatedMessage={TranslateText('Failed to send robot {0} home', [selectedRobot?.name ?? ''])}
-                    />,
-                    AlertCategory.ERROR
-                )
-                setListAlert(
-                    AlertType.RequestFail,
-                    <FailedRequestAlertListContent
-                        translatedMessage={TranslateText('Failed to send robot {0} home', [selectedRobot?.name ?? ''])}
-                    />,
-                    AlertCategory.ERROR
-                )
-            })
-        }
-    }
-
     useEffect(() => {
         if (robotId && mediaStreams && Object.keys(mediaStreams).includes(robotId)) {
             const mediaStreamConfig = mediaStreams[robotId]
@@ -179,9 +154,7 @@ export const RobotPage = () => {
                                 toggleDialog={toggleStopMissionDialog}
                             />
                         </StyledTextButton>
-                        <StyledTextButton variant="outlined" onClick={returnRobotToHome}>
-                            {TranslateText('Return robot to home')}
-                        </StyledTextButton>
+                        {selectedRobot && <ReturnHomeButton robot={selectedRobot} />}
 
                         {selectedRobot.model.type === RobotType.TaurobInspector && (
                             <MoveRobotArmSection robot={selectedRobot} />