From bf03dbb591f0ea6a679060a86d14f82974370de6 Mon Sep 17 00:00:00 2001
From: "jakub.jozwiak" <kubencki@gmail.com>
Date: Sat, 28 Aug 2021 01:33:17 +0200
Subject: [PATCH] fix(client): handle socket connect and disconnect in provider
 layer

---
 .../Dashboard/sections/TogglingSection/index.tsx  | 15 ++-------------
 .../src/providers/api/WebSocketProvider/index.tsx | 12 +++++++++++-
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/packages/client/src/pages/authorized/Dashboard/sections/TogglingSection/index.tsx b/packages/client/src/pages/authorized/Dashboard/sections/TogglingSection/index.tsx
index 62afd26d..a9463b7e 100644
--- a/packages/client/src/pages/authorized/Dashboard/sections/TogglingSection/index.tsx
+++ b/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,
diff --git a/packages/client/src/providers/api/WebSocketProvider/index.tsx b/packages/client/src/providers/api/WebSocketProvider/index.tsx
index 40b38f1f..f6896c62 100644
--- a/packages/client/src/providers/api/WebSocketProvider/index.tsx
+++ b/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);