refactor(hidden-frames and robot-context): 🎉 update hidden-frames and…

… add new variables on robot-context
robolaunch · Aug 11, 2023 · 44b6b92 · 44b6b92
1 parent 2b94eef
commit 44b6b92
Show file tree

Hide file tree

Showing 12 changed files with 77 additions and 88 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ui",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "private": true,
   "dependencies": {
     "@emotion/css": "^11.10.6",

diff --git a/src/components/HiddenVDIFrame/HiddenVDIFrame.tsx b/src/components/HiddenVDIFrame/HiddenVDIFrame.tsx
@@ -1,18 +1,41 @@
-import React, { Fragment, ReactElement } from "react";
+import React, { Fragment, ReactElement, useEffect, useState } from "react";
+import useRobot from "../../hooks/useRobot";
 
-interface IHiddenVDIFrame {
-  url: string;
-}
+export default function HiddenVDIFrame(): ReactElement {
+  const [iframeKey, setIframeKey] = useState<number>(0);
+  const { responseRobot } = useRobot();
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setIframeKey(iframeKey + 1);
+    }, 60000);
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, [iframeKey]);
 
-export default function HiddenVDIFrame({ url }: IHiddenVDIFrame): ReactElement {
   return (
     <Fragment>
-      {url && (
+      {responseRobot?.ideIngressEndpoint && (
+        <iframe
+          key={iframeKey}
+          title="iframe"
+          allow="clipboard-read"
+          className="absolute -top-[9999px]"
+          src={responseRobot?.ideIngressEndpoint}
+        />
+      )}
+      {responseRobot?.vdiIngressEndpoint && (
         <iframe
+          key={iframeKey + 1}
           title="iframe"
           allow="clipboard-read"
           className="absolute -top-[9999px]"
-          src={url?.replace("wss://", "https://") + "health"}
+          src={
+            responseRobot?.vdiIngressEndpoint?.replace("wss://", "https://") +
+            "health"
+          }
         />
       )}
     </Fragment>

diff --git a/src/components/RobotHeader/RobotHeader.tsx b/src/components/RobotHeader/RobotHeader.tsx
@@ -9,24 +9,19 @@ import RobotResource from "../RobotResource/RobotResource";
 import RobotConnectionsViewer from "../RobotConnectionsViewer/RobotConnectionsViewer";
 import { envOnPremise } from "../../helpers/envProvider";
 import RobotHeaderTabs from "../RobotHeaderTabs/RobotHeaderTabs";
+import useRobot from "../../hooks/useRobot";
 
 interface IRobotHeader {
-  responseRobot: any;
-  isSettedCookie: boolean | null;
   handleChangeActiveTab: any;
-  activeTab: string;
-  ros: any;
 }
 
 export default function RobotHeader({
-  responseRobot,
-  isSettedCookie,
   handleChangeActiveTab,
-  activeTab,
-  ros,
 }: IRobotHeader): ReactElement {
   const url = useParams();
 
+  const { ros, responseRobot, isSettedCookie, activeTab } = useRobot();
+
   return (
     <CardLayout className="pt-6 px-8 !pb-0">
       <Fragment>

diff --git a/src/components/RosConnector/RosConnector.tsx b/src/components/RosConnector/RosConnector.tsx
@@ -1,26 +1,20 @@
 import React, { Fragment, useEffect } from "react";
 import { useAppSelector } from "../../hooks/redux";
 import ROSLIB from "roslib";
+import useRobot from "../../hooks/useRobot";
 
-interface IRosConnector {
-  isSettedCookie: boolean | null;
-  ros: any;
-  setRos: any;
-  responseRobot: any;
-  topicList: any;
-  setTopicList: any;
-}
-
-export default function RosConnector({
-  isSettedCookie,
-  ros,
-  setRos,
-  responseRobot,
-  topicList,
-  setTopicList,
-}: IRosConnector) {
+export default function RosConnector() {
   const { urls } = useAppSelector((state) => state.robot);
 
+  const {
+    isSettedCookie,
+    ros,
+    setRos,
+    responseRobot,
+    topicList,
+    setTopicList,
+  } = useRobot();
+
   useEffect(() => {
     if (
       isSettedCookie &&

diff --git a/src/contexts/BarcodeContext.tsx b/src/contexts/BarcodeContext.tsx
@@ -1,10 +1,12 @@
 import React, { createContext, useEffect, useState } from "react";
 import ROSLIB from "roslib";
+import useRobot from "../hooks/useRobot";
 
 export const BarcodeContext: any = createContext<any>(null);
 
 // eslint-disable-next-line
-export default ({ children, ros }: any) => {
+export default ({ children }: any) => {
+  const { ros } = useRobot();
   const [robotLocation, setRobotLocation] = useState<{
     x: number;
     y: number;

diff --git a/src/contexts/MissionContext.tsx b/src/contexts/MissionContext.tsx
@@ -3,11 +3,14 @@ import randomstring from "randomstring";
 import saveAs from "file-saver";
 import { toast } from "sonner";
 import ROSLIB from "roslib";
+import useRobot from "../hooks/useRobot";
 
 export const MissionContext: any = createContext<any>(null);
 
 // eslint-disable-next-line
-export default ({ children, ros }: any) => {
+export default ({ children }: any) => {
+  const { ros } = useRobot();
+
   const [missions, setMissions] = useState<any>([
     // {
     //   id: randomstring.generate(8),

diff --git a/src/contexts/RobotContext.tsx b/src/contexts/RobotContext.tsx
@@ -28,6 +28,7 @@ export default ({ children }: any) => {
   } = useFunctions();
   const { pagesState, sidebarState } = useMain();
   const url = useParams();
+  const [isSettedCookie, setIsSettedCookie] = useState<boolean | null>(null);
 
   useEffect(() => {
     if (
@@ -230,6 +231,8 @@ export default ({ children }: any) => {
         setRos,
         topicList,
         setTopicList,
+        isSettedCookie,
+        setIsSettedCookie,
       }}
     >
       {children}

diff --git a/src/hooks/useRobot.tsx b/src/hooks/useRobot.tsx
@@ -11,6 +11,8 @@ interface IuseRobot {
   setRos: any;
   topicList: any;
   setTopicList: any;
+  isSettedCookie: boolean | null;
+  setIsSettedCookie: any;
 }
 
 const useRobot = () => {

diff --git a/src/layouts/TaskManagementLayout.tsx b/src/layouts/TaskManagementLayout.tsx
@@ -2,14 +2,11 @@ import React, { Fragment, ReactElement, useState } from "react";
 import MissionManagement from "../pages/RobotPage/TaskManagement/MissionManagement";
 import BarcodeManagement from "../pages/RobotPage/TaskManagement/BarcodeManagement";
 import CardLayout from "./CardLayout";
+import useRobot from "../hooks/useRobot";
 
-interface ITaskManagementLayout {
-  ros: any;
-}
+export default function TaskManagementLayout(): ReactElement {
+  const { ros } = useRobot();
 
-export default function TaskManagementLayout({
-  ros,
-}: ITaskManagementLayout): ReactElement {
   const [activeTab, setActiveTab] = useState<
     "Mission Management" | "Barcode Management"
   >("Mission Management");

diff --git a/src/pages/RobotPage/Overview/Overview.tsx b/src/pages/RobotPage/Overview/Overview.tsx
@@ -9,21 +9,18 @@ import BuildManagerStepsTable from "../../../components/BuildManagerStepsTable/B
 import LaunchManagerStepsTable from "../../../components/LaunchManagerStepsTable/LaunchManagerStepsTable";
 import useWindow from "../../../hooks/useWindow";
 import { envOnPremise } from "../../../helpers/envProvider";
+import useRobot from "../../../hooks/useRobot";
 interface IOverview {
-  responseRobot: any;
-  responseBuildManager: any;
-  responseLaunchManagers: any;
   informationWidgetAction: () => void;
 }
 
 export default function Overview({
-  responseRobot,
-  responseBuildManager,
-  responseLaunchManagers,
   informationWidgetAction,
 }: IOverview): ReactElement {
   const url = useParams();
   const { width } = useWindow();
+  const { responseRobot, responseBuildManager, responseLaunchManagers } =
+    useRobot();
 
   return (
     <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 animate__animated animate__fadeIn">

diff --git a/src/pages/RobotPage/RobotPage.tsx b/src/pages/RobotPage/RobotPage.tsx
@@ -1,4 +1,5 @@
 import React, { ReactElement, useState } from "react";
+import HiddenVDIFrame from "../../components/HiddenVDIFrame/HiddenVDIFrame";
 import TaskManagementLayout from "../../layouts/TaskManagementLayout";
 import RosConnector from "../../components/RosConnector/RosConnector";
 import RobotHeader from "../../components/RobotHeader/RobotHeader";
@@ -10,25 +11,20 @@ import BarcodeContext from "../../contexts/BarcodeContext";
 import RemoteDesktop from "./RemoteDesktop/RemoteDesktop";
 import Visualization from "./Visualization/Visualization";
 import Teleoperation from "./Teleoperation/Teleoperation";
-import { useAppSelector } from "../../hooks/redux";
-import Overview from "./Overview/Overview";
-import HiddenVDIFrame from "../../components/HiddenVDIFrame/HiddenVDIFrame";
 import { envOnPremise } from "../../helpers/envProvider";
+import { useAppSelector } from "../../hooks/redux";
 import useRobot from "../../hooks/useRobot";
+import Overview from "./Overview/Overview";
 
 export default function RobotPage(): ReactElement {
   const {
     activeTab,
     setActiveTab,
     responseRobot,
-    responseBuildManager,
-    responseLaunchManagers,
     ros,
-    setRos,
     topicList,
-    setTopicList,
+    setIsSettedCookie,
   } = useRobot();
-  const [isSettedCookie, setIsSettedCookie] = useState<boolean | null>(null);
 
   const { urls } = useAppSelector((state) => state.robot);
 
@@ -58,13 +54,7 @@ export default function RobotPage(): ReactElement {
   return (
     <div className="grid grid-cols-1 gap-6">
       <div className="col-span-full">
-        <RobotHeader
-          responseRobot={responseRobot}
-          isSettedCookie={isSettedCookie}
-          activeTab={activeTab}
-          handleChangeActiveTab={handleChangeActiveTab}
-          ros={ros}
-        />
+        <RobotHeader handleChangeActiveTab={handleChangeActiveTab} />
       </div>
 
       <div className="col-span-full">
@@ -73,9 +63,6 @@ export default function RobotPage(): ReactElement {
             case "Overview":
               return (
                 <Overview
-                  responseRobot={responseRobot}
-                  responseBuildManager={responseBuildManager}
-                  responseLaunchManagers={responseLaunchManagers}
                   informationWidgetAction={() => {
                     setActiveTab(
                       envOnPremise ? "Development Suite" : "Teleoperation"
@@ -85,20 +72,14 @@ export default function RobotPage(): ReactElement {
               );
             case "Task Management":
               return (
-                <TaskManagementContext ros={ros}>
-                  <BarcodeContext ros={ros}>
-                    <TaskManagementLayout ros={ros} />
+                <TaskManagementContext>
+                  <BarcodeContext>
+                    <TaskManagementLayout />
                   </BarcodeContext>
                 </TaskManagementContext>
               );
             case "Visualization":
-              return (
-                <Visualization
-                  ros={ros}
-                  topicList={topicList}
-                  handleForceUpdate={handleForceUpdate}
-                />
-              );
+              return <Visualization handleForceUpdate={handleForceUpdate} />;
             case "Teleoperation":
               return (
                 <Teleoperation
@@ -145,15 +126,8 @@ export default function RobotPage(): ReactElement {
           setIsSettedCookie={setIsSettedCookie}
         />
       </div>
-      <RosConnector
-        isSettedCookie={isSettedCookie}
-        responseRobot={responseRobot}
-        ros={ros}
-        setRos={setRos}
-        topicList={topicList}
-        setTopicList={setTopicList}
-      />
-      <HiddenVDIFrame url={responseRobot?.vdiIngressEndpoint} />
+      <RosConnector />
+      <HiddenVDIFrame />
     </div>
   );
 }
diff --git a/src/pages/RobotPage/Visualization/Visualization.tsx b/src/pages/RobotPage/Visualization/Visualization.tsx
@@ -6,16 +6,13 @@ import { GridLayout } from "../../../layouts/GridLayout";
 import { useParams } from "react-router-dom";
 import { GridStack } from "gridstack";
 import ROSLIB from "roslib";
+import useRobot from "../../../hooks/useRobot";
 
 interface IVisualization {
-  ros: any;
-  topicList: string[];
   handleForceUpdate: (page: IrobotPages["activeTab"]) => void;
 }
 
 export default function Visualization({
-  ros,
-  topicList,
   handleForceUpdate,
 }: IVisualization): ReactElement {
   const [grid, setGrid] = useState<any>();
@@ -25,6 +22,8 @@ export default function Visualization({
     JSON.parse(localStorage.getItem(localStoragePath) || JSON.stringify([])) ||
     [];
 
+  const { ros, topicList } = useRobot();
+
   useEffect(() => {
     const grid: any = GridStack.init({
       float: true,