refactor(connections): 🎉 add ros connection control functions

src/components/Connections/Connections.tsx

@@ -3,26 +3,22 @@ import StateCell from "../TableInformationCells/StateCell";
 import { envApplication } from "../../helpers/envProvider";
 import { useKeycloak } from "@react-keycloak/web";
 import useRobot from "../../hooks/useRobot";
-import { ReactElement, useEffect } from "react";
+import { ReactElement } from "react";
 
 export default function Connections(): ReactElement {
   const { responseRobot, isSettedCookie, isRosConnected } = useRobot();
   const { keycloak } = useKeycloak();
 
-  useEffect(() => {
-    console.log("isRosConnected", isRosConnected);
-  }, [isRosConnected]);
-
   return (
     <div className="flex gap-4">
       {!envApplication && (
         <div className="flex gap-1" id="ros">
           <ConnectionLabel label="ROS" />
           <StateCell
             state={
-              isSettedCookie === undefined
+              isRosConnected === null
                 ? "Waiting"
-                : isSettedCookie
+                : isRosConnected === true
                 ? "Connected"
                 : "Warning"
             }

src/contexts/RobotContext.tsx

@@ -4,6 +4,7 @@ import { envApplication } from "../helpers/envProvider";
 import useFunctions from "../hooks/useFunctions";
 import { useParams } from "react-router-dom";
 import useMain from "../hooks/useMain";
+import ROSLIB from "roslib";
 
 export const RobotContext: any = createContext<any>(null);
 
@@ -33,15 +34,14 @@ export default ({ children }: any) => {
   const [responseLaunchManagers, setResponseLaunchManagers] =
     useState<any>(undefined);
 
-  const [ros, setRos] = useState<any>(null);
-  const [topicList, setTopicList] = useState<any>([]);
-
   const [iFrameId, setIFrameId] = useState<number>(0);
   const [isRobotReady, setIsRobotReady] = useState<boolean>(false);
   const [isSettedCookie, setIsSettedCookie] = useState<boolean | undefined>(
     undefined,
   );
 
+  const [ros, setRos] = useState<ROSLIB.Ros | null>(null);
+  const [topicList, setTopicList] = useState<any>([]);
   const [isRosConnected, setIsRosConnected] = useState<boolean | null>(null);
 
   // Main Functions
@@ -176,6 +176,78 @@ export default ({ children }: any) => {
   ]);
   // Cookies Reloader
 
+  // ROS Bridge Connector
+  useEffect(() => {
+    if (
+      isSettedCookie &&
+      responseRobot?.bridgeIngressEndpoint?.split("://")[0] === "wss" &&
+      !envApplication
+    ) {
+      const rosClient: ROSLIB.Ros = new ROSLIB.Ros({
+        url: responseRobot?.bridgeIngressEndpoint,
+      });
+
+      setRos(ros);
+
+      rosClient?.on("connection", function () {
+        setIsRosConnected(true);
+      });
+      rosClient?.on("error", function (error) {
+        setIsRosConnected(false);
+      });
+      rosClient?.on("close", function () {
+        setIsRosConnected(false);
+      });
+    }
+
+    return () => {
+      ros?.close();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [responseRobot, isSettedCookie]);
+  // ROS Bridge Connector
+
+  // ROS Topic Setter
+  useEffect(() => {
+    !envApplication && getTopics();
+
+    const timer = setInterval(() => {
+      !envApplication && getTopics();
+    }, 10000);
+
+    return () => {
+      clearInterval(timer);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ros]);
+
+  function getTopics() {
+    if (ros && isSettedCookie && !envApplication) {
+      const getTopics = new ROSLIB.Service({
+        ros: ros,
+        name: "/rosapi/topics",
+        serviceType: "rosapi/Topics",
+      });
+      // @ts-ignore
+      const request = new ROSLIB.ServiceRequest();
+      getTopics.callService(request, async function (result) {
+        const resultTopicsList = await result?.topics?.map(
+          (topic: string, key: number) => {
+            return {
+              name: topic,
+              type: result?.types[key],
+            };
+          },
+        );
+
+        if (resultTopicsList?.length !== topicList?.length) {
+          setTopicList(resultTopicsList);
+        }
+      });
+    }
+  }
+  // ROS Topic Setter
+
   function handleGetOrganization() {
     getOrganization(
       {

src/layouts/EnvironmentPageLayout/EnvironmentPageLayout.tsx

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