fix(client): handle socket connect and disconnect in provider layer

packages/client/src/pages/authorized/Dashboard/sections/TogglingSection/index.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useMemo } from 'react';
+import React, { useContext, useMemo } from 'react';
 
 import { ToggleSlider } from '../../../../../elements';
 import { ConnectionState } from '../../../../../enums/connectionState.enum';
@@ -8,18 +8,7 @@ import GateDisconnected from './components/GateDisconnected';
 import { ToggleSliderWrapper } from './TogglingSection.styled';
 
 const TogglingSection = () => {
-  const { connect, disconnect, toggleGate, connectionState, deviceStatus } =
-    useContext(WebSocketContext);
-
-  useEffect(() => {
-    void connect();
-  }, [connect]);
-
-  useEffect(() => {
-    return () => {
-      disconnect();
-    };
-  }, [disconnect]);
+  const { toggleGate, connectionState, deviceStatus } = useContext(WebSocketContext);
 
   const isConnected = useMemo(
     () => connectionState === ConnectionState.CONNECTED && deviceStatus === DeviceStatus.CONNECTED,

packages/client/src/providers/api/WebSocketProvider/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import socketIOClient, { Socket } from 'socket.io-client';
 
 import { ConnectionState } from '../../../enums/connectionState.enum';
@@ -64,6 +64,16 @@ const WebSocketProvider = ({ children }: WebSocketProviderProps) => {
     }
   }, [socket]);
 
+  useEffect(() => {
+    void connect();
+  }, [connect]);
+
+  useEffect(() => {
+    return () => {
+      disconnect();
+    };
+  }, [disconnect]);
+
   const toggleGate = useCallback(() => {
     if (socket) {
       socket.emit(WebSocketEvent.TOGGLE_GATE);