refactor(connections): 🎉 add ros connection control functions

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui",
-  "version": "0.23.9",
+  "version": "0.24.1",
   "private": true,
   "scripts": {
     "dev": "react-scripts start",

src/components/Connections/Connections.tsx

@@ -3,51 +3,12 @@ import StateCell from "../TableInformationCells/StateCell";
 import { envApplication } from "../../helpers/envProvider";
 import { useKeycloak } from "@react-keycloak/web";
 import useRobot from "../../hooks/useRobot";
-import { ReactElement, useEffect, useState } from "react";
-import ROSLIB from "roslib";
+import { ReactElement, useEffect } from "react";
 
 export default function Connections(): ReactElement {
-  const { responseRobot, isSettedCookie, isRobotReady } = useRobot();
+  const { responseRobot, isSettedCookie, isRosConnected } = useRobot();
   const { keycloak } = useKeycloak();
 
-  const [isRosConnected, setIsRosConnected] = useState<boolean | null>(null);
-
-  useEffect(() => {
-    let rosClient: ROSLIB.Ros | null = null;
-
-    function tryConnection() {
-      rosClient = new ROSLIB.Ros({
-        url: responseRobot?.bridgeIngressEndpoint,
-      });
-
-      rosClient.on("connection", () => setIsRosConnected(true));
-      rosClient.on(
-        "error",
-        () => isRosConnected === null && setIsRosConnected(false),
-      );
-    }
-
-    function closeRosConnection() {
-      // rosClient?.close();
-    }
-
-    if (
-      isRobotReady &&
-      isSettedCookie &&
-      responseRobot?.bridgeIngressEndpoint
-    ) {
-      closeRosConnection();
-      isRosConnected === null && tryConnection();
-    }
-
-    return closeRosConnection();
-  }, [
-    isRobotReady,
-    isRosConnected,
-    isSettedCookie,
-    responseRobot?.bridgeIngressEndpoint,
-  ]);
-
   useEffect(() => {
     console.log("isRosConnected", isRosConnected);
   }, [isRosConnected]);

src/components/RosConnector/RosConnector.tsx

@@ -13,6 +13,7 @@ export default function RosConnector(): ReactElement {
     responseRobot,
     topicList,
     setTopicList,
+    setIsRosConnected,
   } = useRobot();
 
   useEffect(() => {
@@ -27,11 +28,10 @@ export default function RosConnector(): ReactElement {
       setRos(ros);
 
       ros?.on("connection", function () {
-        console.log("Connected to websocket server.");
-        console.info("ROSBRIDGE URL: ", ros);
+        setIsRosConnected(true);
       });
       ros?.on("error", function (error) {
-        console.warn("Error connecting to websocket server: ", error);
+        setIsRosConnected(false);
       });
       ros?.on("close", function () {
         console.log("Connection to websocket server closed.");

src/contexts/RobotContext.tsx

@@ -42,6 +42,8 @@ export default ({ children }: any) => {
     undefined,
   );
 
+  const [isRosConnected, setIsRosConnected] = useState<boolean | null>(null);
+
   // Main Functions
   useEffect(() => {
     if (
@@ -357,6 +359,8 @@ export default ({ children }: any) => {
         topicList,
         isSettedCookie,
         setIsSettedCookie,
+        isRosConnected,
+        setIsRosConnected,
         setTopicList,
         handleForceUpdate,
         handleResetRobot,

src/hooks/useRobot.tsx

@@ -15,6 +15,8 @@ interface IuseRobot {
   setTopicList: any;
   isSettedCookie: boolean | null;
   setIsSettedCookie: any;
+  isRosConnected: boolean | null;
+  setIsRosConnected: any;
   adrinState: any;
   setAdrinState: any;
   handleForceUpdate: any;

src/layouts/EnvironmentPageLayout/EnvironmentPageLayout.tsx

@@ -2,7 +2,7 @@ import { Fragment, ReactElement } from "react";
 import EnvironmentHeader from "../../components/EnvironmentHeader/EnvironmentHeader";
 import HiddenFrame from "../../components/HiddenFrame/HiddenFrame";
 import { envApplication } from "../../helpers/envProvider";
-// import RosConnector from "../../components/RosConnector/RosConnector";
+import RosConnector from "../../components/RosConnector/RosConnector";
 import Overview from "../../pages/EnvironmentPage/Overview/Overview";
 import MissionContext from "../../contexts/MissionContext";
 import BarcodeContext from "../../contexts/BarcodeContext";
@@ -24,7 +24,7 @@ export default function EnvironmentPageLayout(): ReactElement {
     <Fragment>
       <div className="flex h-full flex-col gap-6">
         <EnvironmentHeader />
-        {/* {!envApplication && <RosConnector />} */}
+        {!envApplication && <RosConnector />}
 
         {(() => {
           switch (activeTab) {