From 40b9c2332463371d2744d8e07804f00e079c6cd8 Mon Sep 17 00:00:00 2001
From: gokhangunduz <me@gokhangunduz.com.tr>
Date: Wed, 20 Dec 2023 13:44:13 +0300
Subject: [PATCH] refactor(connections): :tada: add ros connection control
 functions

---
 package.json                               |  2 +-
 src/components/Connections/Connections.tsx | 49 ++++++++++------------
 2 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/package.json b/package.json
index 2d549b6a..19d780be 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ui",
-  "version": "0.23.5",
+  "version": "0.23.6",
   "private": true,
   "scripts": {
     "dev": "react-scripts start",
diff --git a/src/components/Connections/Connections.tsx b/src/components/Connections/Connections.tsx
index 44ca4f09..bab76062 100644
--- a/src/components/Connections/Connections.tsx
+++ b/src/components/Connections/Connections.tsx
@@ -13,37 +13,34 @@ export default function Connections(): ReactElement {
   const [isRosConnected, setIsRosConnected] = useState<boolean | null>(null);
 
   useEffect(() => {
-    const rosClient: ROSLIB.Ros = new ROSLIB.Ros({
-      url: responseRobot?.bridgeIngressEndpoint,
-    });
+    let rosClient: ROSLIB.Ros | null = null;
 
-    if (isRosConnected === null) {
-      if (
-        isRobotReady &&
-        isSettedCookie &&
-        responseRobot?.bridgeIngressEndpoint
-      ) {
-        rosClient?.on("connection", function () {
-          setIsRosConnected(true);
-        });
+    const establishRosConnection = () => {
+      rosClient = new ROSLIB.Ros({
+        url: responseRobot?.bridgeIngressEndpoint,
+      });
 
-        rosClient?.on("error", function (error) {
-          setIsRosConnected(false);
-        });
+      rosClient.on("connection", () => setIsRosConnected(true));
+      rosClient.on("error", () => setIsRosConnected(false));
+    };
+
+    const closeRosConnection = () => {
+      if (rosClient) {
+        rosClient.close();
       }
-    } else {
-      rosClient?.close();
+    };
+
+    if (
+      isRobotReady &&
+      isSettedCookie &&
+      responseRobot?.bridgeIngressEndpoint
+    ) {
+      closeRosConnection();
+      establishRosConnection();
     }
 
-    return () => {
-      rosClient?.close();
-    };
-  }, [
-    isRobotReady,
-    isSettedCookie,
-    isRosConnected,
-    responseRobot?.bridgeIngressEndpoint,
-  ]);
+    return closeRosConnection;
+  }, [isRobotReady, isSettedCookie, responseRobot?.bridgeIngressEndpoint]);
 
   useEffect(() => {
     console.log("isRosConnected", isRosConnected);