From 31f6a2646832855683d439fbd701ca9808b4d816 Mon Sep 17 00:00:00 2001
From: gokhangunduz <mail@gokhangunduz.com.tr>
Date: Fri, 11 Aug 2023 18:34:56 +0300
Subject: [PATCH] refactor(robot-context and cookie-setter): :tada: update
 cookie logic and robot context

---
 package.json                                  |  2 +-
 .../HiddenVDIFrame/HiddenVDIFrame.tsx         |  2 ++
 src/contexts/RobotContext.tsx                 | 20 +++++++++++++++++
 src/hooks/useRobot.tsx                        |  1 +
 src/pages/RobotPage/RobotPage.tsx             | 22 +------------------
 .../RobotPage/Teleoperation/Teleoperation.tsx |  4 +---
 .../RobotPage/Visualization/Visualization.tsx | 10 ++-------
 7 files changed, 28 insertions(+), 33 deletions(-)

diff --git a/package.json b/package.json
index e6b35a52..1701a765 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ui",
-  "version": "0.11.2",
+  "version": "0.11.3",
   "private": true,
   "dependencies": {
     "@emotion/css": "^11.10.6",
diff --git a/src/components/HiddenVDIFrame/HiddenVDIFrame.tsx b/src/components/HiddenVDIFrame/HiddenVDIFrame.tsx
index 996ee75b..434c2e7f 100644
--- a/src/components/HiddenVDIFrame/HiddenVDIFrame.tsx
+++ b/src/components/HiddenVDIFrame/HiddenVDIFrame.tsx
@@ -24,6 +24,7 @@ export default function HiddenVDIFrame(): ReactElement {
           allow="clipboard-read"
           className="absolute -top-[9999px]"
           src={responseRobot?.ideIngressEndpoint}
+          onLoad={() => console.log("IDE LOADED")}
         />
       )}
       {responseRobot?.vdiIngressEndpoint && (
@@ -36,6 +37,7 @@ export default function HiddenVDIFrame(): ReactElement {
             responseRobot?.vdiIngressEndpoint?.replace("wss://", "https://") +
             "health"
           }
+          onLoad={() => console.log("VDI LOADED")}
         />
       )}
     </Fragment>
diff --git a/src/contexts/RobotContext.tsx b/src/contexts/RobotContext.tsx
index d0904171..da5cffca 100644
--- a/src/contexts/RobotContext.tsx
+++ b/src/contexts/RobotContext.tsx
@@ -219,6 +219,25 @@ export default ({ children }: any) => {
     );
   }
 
+  function handleForceUpdate(
+    page:
+      | "Overview"
+      | "Teleoperation"
+      | "Task Management"
+      | "Visualization"
+      | "Loading"
+      | "Settings"
+      | "Remote Desktop"
+      | "Development Suite"
+      | "Code Editor"
+  ) {
+    setActiveTab("Loading");
+
+    setTimeout(() => {
+      setActiveTab(page);
+    }, 500);
+  }
+
   return (
     <RobotContext.Provider
       value={{
@@ -233,6 +252,7 @@ export default ({ children }: any) => {
         setTopicList,
         isSettedCookie,
         setIsSettedCookie,
+        handleForceUpdate,
       }}
     >
       {children}
diff --git a/src/hooks/useRobot.tsx b/src/hooks/useRobot.tsx
index a37eb229..cf97014c 100644
--- a/src/hooks/useRobot.tsx
+++ b/src/hooks/useRobot.tsx
@@ -13,6 +13,7 @@ interface IuseRobot {
   setTopicList: any;
   isSettedCookie: boolean | null;
   setIsSettedCookie: any;
+  handleForceUpdate: any;
 }
 
 const useRobot = () => {
diff --git a/src/pages/RobotPage/RobotPage.tsx b/src/pages/RobotPage/RobotPage.tsx
index 8c992c93..e786abc8 100644
--- a/src/pages/RobotPage/RobotPage.tsx
+++ b/src/pages/RobotPage/RobotPage.tsx
@@ -25,25 +25,6 @@ export default function RobotPage(): ReactElement {
     setActiveTab(tab);
   }
 
-  function handleForceUpdate(
-    page:
-      | "Overview"
-      | "Teleoperation"
-      | "Task Management"
-      | "Visualization"
-      | "Loading"
-      | "Settings"
-      | "Remote Desktop"
-      | "Development Suite"
-      | "Code Editor"
-  ) {
-    setActiveTab("Loading");
-
-    setTimeout(() => {
-      setActiveTab(page);
-    }, 500);
-  }
-
   return (
     <div className="grid grid-cols-1 gap-6">
       <div className="col-span-full">
@@ -72,14 +53,13 @@ export default function RobotPage(): ReactElement {
                 </TaskManagementContext>
               );
             case "Visualization":
-              return <Visualization handleForceUpdate={handleForceUpdate} />;
+              return <Visualization />;
             case "Teleoperation":
               return (
                 <Teleoperation
                   vdiIngressEndpoint={
                     urls?.vdi || responseRobot?.vdiIngressEndpoint
                   }
-                  handleForceUpdate={handleForceUpdate}
                 />
               );
             case "Development Suite":
diff --git a/src/pages/RobotPage/Teleoperation/Teleoperation.tsx b/src/pages/RobotPage/Teleoperation/Teleoperation.tsx
index 775af6e1..42490d24 100644
--- a/src/pages/RobotPage/Teleoperation/Teleoperation.tsx
+++ b/src/pages/RobotPage/Teleoperation/Teleoperation.tsx
@@ -17,12 +17,10 @@ import useRobot from "../../../hooks/useRobot";
 
 interface ITeleoperation {
   vdiIngressEndpoint: string;
-  handleForceUpdate: (page: IrobotPages["activeTab"]) => void;
 }
 
 export default function Teleoperation({
   vdiIngressEndpoint,
-  handleForceUpdate,
 }: ITeleoperation): ReactElement {
   const [grid, setGrid] = useState<any>();
   const url = useParams();
@@ -36,7 +34,7 @@ export default function Teleoperation({
   const [selectableTopic, setSelectableTopic] = useState<any>([]);
   const [selectedTopic, setSelectedTopic] = useState<string>("");
   const handleFullScreen = useFullScreenHandle();
-  const { ros, topicList } = useRobot();
+  const { ros, topicList, handleForceUpdate } = useRobot();
 
   // GRID
   useEffect(() => {
diff --git a/src/pages/RobotPage/Visualization/Visualization.tsx b/src/pages/RobotPage/Visualization/Visualization.tsx
index 7c086a24..85ba35f3 100644
--- a/src/pages/RobotPage/Visualization/Visualization.tsx
+++ b/src/pages/RobotPage/Visualization/Visualization.tsx
@@ -8,13 +8,7 @@ import { GridStack } from "gridstack";
 import ROSLIB from "roslib";
 import useRobot from "../../../hooks/useRobot";
 
-interface IVisualization {
-  handleForceUpdate: (page: IrobotPages["activeTab"]) => void;
-}
-
-export default function Visualization({
-  handleForceUpdate,
-}: IVisualization): ReactElement {
+export default function Visualization(): ReactElement {
   const [grid, setGrid] = useState<any>();
   const url = useParams();
   const localStoragePath = `visualization_${url?.organizationName}_${url.roboticsCloudName}_${url.instanceName}_${url.fleetName}_${url.robotName}`;
@@ -22,7 +16,7 @@ export default function Visualization({
     JSON.parse(localStorage.getItem(localStoragePath) || JSON.stringify([])) ||
     [];
 
-  const { ros, topicList } = useRobot();
+  const { ros, topicList, handleForceUpdate } = useRobot();
 
   useEffect(() => {
     const grid: any = GridStack.init({