From 31bdda8bf86cdb8c5577086e627a5c29f9c99cd9 Mon Sep 17 00:00:00 2001
From: Charles <charles.bourque96@gmail.com>
Date: Mon, 10 Oct 2022 10:02:13 +0100
Subject: [PATCH] [WIFI-10931] Fixed using ws websockets when using http GW
 endpoint

Signed-off-by: Charles <charles.bourque96@gmail.com>
---
 package-lock.json                       |  4 +-
 package.json                            |  2 +-
 src/components/DeviceSearchBar/index.js | 10 ++++-
 src/contexts/WebSocketProvider/index.js | 59 +++++++++++++++++++------
 4 files changed, 57 insertions(+), 18 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0988379..cbf71ee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "ucentral-client",
-  "version": "2.7.0(8)",
+  "version": "2.7.0(9)",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "ucentral-client",
-      "version": "2.7.0(8)",
+      "version": "2.7.0(9)",
       "dependencies": {
         "@coreui/coreui": "^3.4.0",
         "@coreui/icons": "^2.0.1",
diff --git a/package.json b/package.json
index 189b234..c192f2e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ucentral-client",
-  "version": "2.7.0(8)",
+  "version": "2.7.0(9)",
   "dependencies": {
     "@coreui/coreui": "^3.4.0",
     "@coreui/icons": "^2.0.1",
diff --git a/src/components/DeviceSearchBar/index.js b/src/components/DeviceSearchBar/index.js
index 663ef91..b0cc8ed 100644
--- a/src/components/DeviceSearchBar/index.js
+++ b/src/components/DeviceSearchBar/index.js
@@ -25,7 +25,11 @@ const DeviceSearchBar = ({ action }) => {
         }
       } else if (socket.readyState !== WebSocket.CONNECTING && endpoints?.owgw !== undefined) {
         setWaitingSearch(value);
-        setSocket(new WebSocket(`${endpoints.owgw.replace('https', 'wss')}/api/v1/ws`));
+        setSocket(
+          new WebSocket(
+            `${endpoints.owgw.replace('https', 'wss').replace('http', 'ws')}/api/v1/ws`,
+          ),
+        );
       } else {
         setWaitingSearch(value);
       }
@@ -61,7 +65,9 @@ const DeviceSearchBar = ({ action }) => {
 
   useEffect(() => {
     if (socket === null && endpoints?.owgw !== undefined) {
-      setSocket(new WebSocket(`${endpoints.owgw.replace('https', 'wss')}/api/v1/ws`));
+      setSocket(
+        new WebSocket(`${endpoints.owgw.replace('https', 'wss').replace('http', 'ws')}/api/v1/ws`),
+      );
     }
   }, []);
 
diff --git a/src/contexts/WebSocketProvider/index.js b/src/contexts/WebSocketProvider/index.js
index b2cf571..68e2180 100644
--- a/src/contexts/WebSocketProvider/index.js
+++ b/src/contexts/WebSocketProvider/index.js
@@ -39,19 +39,25 @@ export const WebSocketProvider = ({ children, setNewConnectionData }) => {
     }
   }, []);
 
-  const onStartWebSocket = () => {
-    ws.current = new WebSocket(`${endpoints.owgw?.replace('https', 'wss')}/api/v1/ws`);
-    ws.current.onopen = () => {
-      setIsOpen(true);
-      ws.current?.send(`token:${currentToken}`);
-    };
-    ws.current.onclose = () => {
-      setIsOpen(false);
-      setTimeout(onStartWebSocket, 3000);
-    };
-    ws.current.onerror = () => {
-      setIsOpen(false);
-    };
+  const onStartWebSocket = (tries = 0) => {
+    const newTries = tries + 1;
+    if (tries <= 10) {
+      ws.current = new WebSocket(
+        `${endpoints.owgw?.replace('https', 'wss').replace('http', 'ws')}/api/v1/ws`,
+      );
+      ws.current.onopen = () => {
+        setIsOpen(true);
+        ws.current?.send(`token:${currentToken}`);
+      };
+      ws.current.onclose = () => {
+        setIsOpen(false);
+        setTimeout(() => onStartWebSocket(newTries), 3000);
+      };
+      ws.current.onerror = () => {
+        setIsOpen(false);
+        setTimeout(() => onStartWebSocket(newTries), 3000);
+      };
+    }
   };
 
   // useEffect for created the WebSocket and 'storing' it in useRef
@@ -75,6 +81,33 @@ export const WebSocketProvider = ({ children, setNewConnectionData }) => {
     };
   }, [ws?.current]);
 
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      let timeoutId;
+
+      if (ws?.current) {
+        if (document.visibilityState === 'hidden') {
+          timeoutId = setTimeout(() => {
+            ws.current.onclose = () => {};
+            ws.current?.close();
+            setIsOpen(false);
+          }, 5000);
+        } else {
+          clearTimeout(timeoutId);
+
+          if (!isOpen && endpoints?.owgw !== undefined) {
+            onStartWebSocket();
+          }
+        }
+      }
+    };
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  }, [ws?.current, isOpen]);
+
   const values = useMemo(
     () => ({
       lastMessage,