[WIFI-10904] Websocket more resilient in case of disconnection

Signed-off-by: Charles <charles.bourque96@gmail.com>

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,

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>