feat: routing for robot

src/components/robot/Recordings.tsx

@@ -1,12 +1,13 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 import { RecordingsTable } from "./RecordingsTable";
 import { Grid } from "@mui/material";
 import { RunSettings, RunSettingsModal } from "../run/RunSettings";
 import { ScheduleSettings, ScheduleSettingsModal } from "./ScheduleSettings";
 import { IntegrationSettings, IntegrationSettingsModal } from "../integration/IntegrationSettings";
 import { RobotSettings, RobotSettingsModal } from "./RobotSettings";
-import { RobotEditModal } from './RobotEdit';
+import { RobotEditModal } from "./RobotEdit";
-import { RobotDuplicationModal } from './RobotDuplicate';
+import { RobotDuplicationModal } from "./RobotDuplicate";
+import { useNavigate, useLocation, useParams } from "react-router-dom";
 
 interface RecordingsProps {
   handleEditRecording: (id: string, fileName: string) => void;
@@ -15,181 +16,115 @@ interface RecordingsProps {
   setRecordingInfo: (id: string, name: string) => void;
 }
 
-export const Recordings = ({ handleEditRecording, handleRunRecording, setRecordingInfo, handleScheduleRecording }: RecordingsProps) => {
+export const Recordings = ({
-  const [runSettingsAreOpen, setRunSettingsAreOpen] = useState(false);
+  handleEditRecording,
-  const [scheduleSettingsAreOpen, setScheduleSettingsAreOpen] = useState(false);
+  handleRunRecording,
-  const [integrateSettingsAreOpen, setIntegrateSettingsAreOpen] = useState(false);
+  setRecordingInfo,
-  const [robotSettingsAreOpen, setRobotSettingsAreOpen] = useState(false);
+  handleScheduleRecording,
-  const [robotEditAreOpen, setRobotEditAreOpen] = useState(false);
+}: RecordingsProps) => {
-  const [robotDuplicateAreOpen, setRobotDuplicateAreOpen] = useState(false);
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { selectedRecordingId } = useParams();
   const [params, setParams] = useState<string[]>([]);
-  const [selectedRecordingId, setSelectedRecordingId] = useState<string>('');
-  const handleIntegrateRecording = (id: string, settings: IntegrationSettings) => { };
-  const handleSettingsRecording = (id: string, settings: RobotSettings) => { };
-  const handleEditRobot = (id: string, settings: RobotSettings) => { };
-  const handleDuplicateRobot = (id: string, settings: RobotSettings) => { };
 
-  const handleSettingsAndIntegrate = (id: string, name: string, params: string[]) => {
+  const handleNavigate = (path: string, id: string, name: string, params: string[]) => {
-    if (params.length === 0) {
+    setParams(params);
-      setIntegrateSettingsAreOpen(true);
+    setRecordingInfo(id, name);
-      setRecordingInfo(id, name);
+    navigate(path);
-      setSelectedRecordingId(id);
+  };
-    } else {
-      setParams(params);
-      setIntegrateSettingsAreOpen(true);
-      setRecordingInfo(id, name);
-      setSelectedRecordingId(id);
-    }
-  }
-
-  const handleSettingsAndRun = (id: string, name: string, params: string[]) => {
-    if (params.length === 0) {
-      setRunSettingsAreOpen(true);
-      setRecordingInfo(id, name);
-      setSelectedRecordingId(id);
-    } else {
-      setParams(params);
-      setRunSettingsAreOpen(true);
-      setRecordingInfo(id, name);
-      setSelectedRecordingId(id);
-    }
-  }
-
-  const handleSettingsAndSchedule = (id: string, name: string, params: string[]) => {
-    if (params.length === 0) {
-      setScheduleSettingsAreOpen(true);
-      setRecordingInfo(id, name);
-      setSelectedRecordingId(id);
-    } else {
-      setParams(params);
-      setScheduleSettingsAreOpen(true);
-      setRecordingInfo(id, name);
-      setSelectedRecordingId(id);
-    }
-  }
-
-  const handleRobotSettings = (id: string, name: string, params: string[]) => {
-    if (params.length === 0) {
-      setRobotSettingsAreOpen(true);
-      setRecordingInfo(id, name);
-      setSelectedRecordingId(id);
-    } else {
-      setParams(params);
-      setRobotSettingsAreOpen(true);
-      setRecordingInfo(id, name);
-      setSelectedRecordingId(id);
-    }
-  }
-
-  const handleEditRobotOption = (id: string, name: string, params: string[]) => {
-    if (params.length === 0) {
-      setRobotEditAreOpen(true);
-      setRecordingInfo(id, name);
-      setSelectedRecordingId(id);
-    } else {
-      setParams(params);
-      setRobotEditAreOpen(true);
-      setRecordingInfo(id, name);
-      setSelectedRecordingId(id);
-    }
-  }
-
-  const handleDuplicateRobotOption = (id: string, name: string, params: string[]) => {
-    if (params.length === 0) {
-      setRobotDuplicateAreOpen(true);
-      setRecordingInfo(id, name);
-      setSelectedRecordingId(id);
-    } else {
-      setParams(params);
-      setRobotDuplicateAreOpen(true);
-      setRecordingInfo(id, name);
-      setSelectedRecordingId(id);
-    }
-  }
 
   const handleClose = () => {
     setParams([]);
-    setRunSettingsAreOpen(false);
+    setRecordingInfo("", "");
-    setRecordingInfo('', '');
+    navigate("/robots"); // Navigate back to the main robots page
-    setSelectedRecordingId('');
+  };
-  }
 
-  const handleIntegrateClose = () => {
+  // Determine which modal to open based on the current route
-    setParams([]);
+  const getCurrentModal = () => {
-    setIntegrateSettingsAreOpen(false);
+    const currentPath = location.pathname;
-    setRecordingInfo('', '');
-    setSelectedRecordingId('');
-  }
 
-  const handleScheduleClose = () => {
+    if (currentPath.endsWith("/run")) {
-    setParams([]);
+      return (
-    setScheduleSettingsAreOpen(false);
+        <RunSettingsModal
-    setRecordingInfo('', '');
+          isOpen={true}
-    setSelectedRecordingId('');
+          handleClose={handleClose}
-  }
+          handleStart={handleRunRecording}
-
+          isTask={params.length !== 0}
-  const handleRobotSettingsClose = () => {
+          params={params}
-    setParams([]);
+        />
-    setRobotSettingsAreOpen(false);
+      );
-    setRecordingInfo('', '');
+    } else if (currentPath.endsWith("/schedule")) {
-    setSelectedRecordingId('');
+      return (
-  }
+        <ScheduleSettingsModal
-
+          isOpen={true}
-  const handleRobotEditClose = () => {
+          handleClose={handleClose}
-    setParams([]);
+          handleStart={handleScheduleRecording}
-    setRobotEditAreOpen(false);
+        />
-    setRecordingInfo('', '');
+      );
-    setSelectedRecordingId('');
+    } else if (currentPath.endsWith("/integrate")) {
-  }
+      return (
-
+        <IntegrationSettingsModal
-  const handleRobotDuplicateClose = () => {
+          isOpen={true}
-    setParams([]);
+          handleClose={handleClose}
-    setRobotDuplicateAreOpen(false);
+          handleStart={() => {}}
-    setRecordingInfo('', '');
+        />
-    setSelectedRecordingId('');
+      );
-  }
+    } else if (currentPath.endsWith("/settings")) {
+      return (
+        <RobotSettingsModal
+          isOpen={true}
+          handleClose={handleClose}
+          handleStart={() => {}}
+        />
+      );
+    } else if (currentPath.endsWith("/edit")) {
+      return (
+        <RobotEditModal
+          isOpen={true}
+          handleClose={handleClose}
+          handleStart={() => {}}
+        />
+      );
+    } else if (currentPath.endsWith("/duplicate")) {
+      return (
+        <RobotDuplicationModal
+          isOpen={true}
+          handleClose={handleClose}
+          handleStart={() => {}}
+        />
+      );
+    }
+    return null;
+  };
 
   return (
     <React.Fragment>
-      <RunSettingsModal isOpen={runSettingsAreOpen}
+      {getCurrentModal()}
-        handleClose={handleClose}
+      <Grid container direction="column" sx={{ padding: "30px" }}>
-        handleStart={(settings) => handleRunRecording(settings)}
-        isTask={params.length !== 0}
-        params={params}
-      />
-      <ScheduleSettingsModal isOpen={scheduleSettingsAreOpen}
-        handleClose={handleScheduleClose}
-        handleStart={(settings) => handleScheduleRecording(settings)}
-      />
-      <IntegrationSettingsModal isOpen={integrateSettingsAreOpen}
-        handleClose={handleIntegrateClose}
-        handleStart={(settings) => handleIntegrateRecording(selectedRecordingId, settings)}
-      />
-      <RobotSettingsModal isOpen={robotSettingsAreOpen}
-        handleClose={handleRobotSettingsClose}
-        handleStart={(settings) => handleSettingsRecording(selectedRecordingId, settings)}
-      />
-      <RobotEditModal isOpen={robotEditAreOpen}
-        handleClose={handleRobotEditClose}
-        handleStart={(settings) => handleEditRobot(selectedRecordingId, settings)}
-      />
-      <RobotDuplicationModal isOpen={robotDuplicateAreOpen}
-        handleClose={handleRobotDuplicateClose}
-        handleStart={(settings) => handleDuplicateRobot(selectedRecordingId, settings)}
-      />
-      <Grid container direction="column" sx={{ padding: '30px' }}>
         <Grid item xs>
           <RecordingsTable
             handleEditRecording={handleEditRecording}
-            handleRunRecording={handleSettingsAndRun}
+            handleRunRecording={(id, name, params) =>
-            handleScheduleRecording={handleSettingsAndSchedule}
+              handleNavigate(`/robots/${id}/run`, id, name, params)
-            handleIntegrateRecording={handleSettingsAndIntegrate}
+            }
-            handleSettingsRecording={handleRobotSettings}
+            handleScheduleRecording={(id, name, params) =>
-            handleEditRobot={handleEditRobotOption}
+              handleNavigate(`/robots/${id}/schedule`, id, name, params)
-            handleDuplicateRobot={handleDuplicateRobotOption}
+            }
+            handleIntegrateRecording={(id, name, params) =>
+              handleNavigate(`/robots/${id}/integrate`, id, name, params)
+            }
+            handleSettingsRecording={(id, name, params) =>
+              handleNavigate(`/robots/${id}/settings`, id, name, params)
+            }
+            handleEditRobot={(id, name, params) =>
+              handleNavigate(`/robots/${id}/edit`, id, name, params)
+            }
+            handleDuplicateRobot={(id, name, params) =>
+              handleNavigate(`/robots/${id}/duplicate`, id, name, params)
+            }
           />
         </Grid>
       </Grid>
     </React.Fragment>
   );
-}
+};