From 78c48e004c74d8f93ffc24b7d7d1604919c47c0c Mon Sep 17 00:00:00 2001
From: Charles <charles.bourque96@gmail.com>
Date: Fri, 23 Sep 2022 12:41:00 +0100
Subject: [PATCH] [WIFI-10904] Websocket more resilient in case of
 disconnection

Signed-off-by: Charles <charles.bourque96@gmail.com>
---
 src/contexts/WebSocketProvider/index.js | 30 +++++++++++++++----------
 src/layout/Devices.js                   |  4 ++--
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/contexts/WebSocketProvider/index.js b/src/contexts/WebSocketProvider/index.js
index b687526..b2cf571 100644
--- a/src/contexts/WebSocketProvider/index.js
+++ b/src/contexts/WebSocketProvider/index.js
@@ -39,24 +39,29 @@ 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);
+    };
+  };
+
   // useEffect for created the WebSocket and 'storing' it in useRef
   useEffect(() => {
     if (endpoints?.owgw !== undefined) {
-      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);
-      };
-      ws.current.onerror = () => {
-        setIsOpen(false);
-      };
+      onStartWebSocket();
     }
     const wsCurrent = ws?.current;
     return () => wsCurrent?.close();
-  }, []);
+  }, [endpoints]);
 
   // useEffect for generating global notifications
   useEffect(() => {
@@ -69,6 +74,7 @@ export const WebSocketProvider = ({ children, setNewConnectionData }) => {
       if (wsCurrent) wsCurrent.removeEventListener('message', onMessage);
     };
   }, [ws?.current]);
+
   const values = useMemo(
     () => ({
       lastMessage,
diff --git a/src/layout/Devices.js b/src/layout/Devices.js
index 7050630..862d64b 100644
--- a/src/layout/Devices.js
+++ b/src/layout/Devices.js
@@ -80,8 +80,8 @@ const SidebarDevices = ({ newData }) => {
         borderTop: '3px solid #d8dbe0',
         color: 'white',
         textAlign: 'center',
-        paddingTop: '5px',
-        paddingBottom: '5px',
+        paddingTop: '15px',
+        paddingBottom: '25px',
       }}
     >
       <h3 style={{ marginBottom: '0px' }}>{stats?.connectedDevices ?? stats?.numberOfDevices}</h3>