From c7c451d227156e0afda99ec793ee17ac6295fd20 Mon Sep 17 00:00:00 2001
From: canove <cassio@economicros.com.br>
Date: Mon, 10 Aug 2020 19:24:15 -0300
Subject: [PATCH] fix: websocket handlers

---
 frontend/src/components/MessagesList/index.js |  3 ++-
 frontend/src/components/Tickets/index.js      |  5 +++--
 frontend/src/pages/Contacts/index.js          |  3 ++-
 frontend/src/pages/WhatsAuth/WhatsAuth.js     | 14 +++++++++-----
 4 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/MessagesList/index.js b/frontend/src/components/MessagesList/index.js
index ec5a6cb..f4f3be6 100644
--- a/frontend/src/components/MessagesList/index.js
+++ b/frontend/src/components/MessagesList/index.js
@@ -221,7 +221,7 @@ const useStyles = makeStyles(theme => ({
 	},
 }));
 
-const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
+let socket;
 
 const MessagesList = () => {
 	const { ticketId } = useParams();
@@ -272,6 +272,7 @@ const MessagesList = () => {
 	}, [pageNumber, ticketId, history]);
 
 	useEffect(() => {
+		socket = openSocket(process.env.REACT_APP_BACKEND_URL);
 		socket.emit("joinChatBox", ticketId, () => {});
 
 		return () => {
diff --git a/frontend/src/components/Tickets/index.js b/frontend/src/components/Tickets/index.js
index 8de288a..6769a98 100644
--- a/frontend/src/components/Tickets/index.js
+++ b/frontend/src/components/Tickets/index.js
@@ -25,7 +25,7 @@ import TabPanel from "../TabPanel";
 
 import api from "../../services/api";
 
-const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
+let socket;
 
 const useStyles = makeStyles(theme => ({
 	ticketsWrapper: {
@@ -209,12 +209,13 @@ const Tickets = () => {
 	}, [searchParam, pageNumber, token, tab]);
 
 	useEffect(() => {
+		socket = openSocket(process.env.REACT_APP_BACKEND_URL);
 		socket.emit("joinNotification");
 
 		return () => {
 			socket.disconnect();
 		};
-	}, [ticketId]);
+	}, []);
 
 	useEffect(() => {
 		socket.on("ticket", data => {
diff --git a/frontend/src/pages/Contacts/index.js b/frontend/src/pages/Contacts/index.js
index c15cb6d..16057e3 100644
--- a/frontend/src/pages/Contacts/index.js
+++ b/frontend/src/pages/Contacts/index.js
@@ -28,7 +28,7 @@ import ContactsSekeleton from "../../components/ContactsSekeleton";
 import ContactModal from "../../components/ContactModal";
 import ConfirmationModal from "../../components/ConfirmationModal/";
 
-const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
+let socket;
 
 const useStyles = makeStyles(theme => ({
 	mainContainer: {
@@ -105,6 +105,7 @@ const Contacts = () => {
 	}, [searchParam, page, rowsPerPage]);
 
 	useEffect(() => {
+		socket = openSocket(process.env.REACT_APP_BACKEND_URL);
 		return () => {
 			socket.disconnect();
 		};
diff --git a/frontend/src/pages/WhatsAuth/WhatsAuth.js b/frontend/src/pages/WhatsAuth/WhatsAuth.js
index fc8b0d0..fbe320c 100644
--- a/frontend/src/pages/WhatsAuth/WhatsAuth.js
+++ b/frontend/src/pages/WhatsAuth/WhatsAuth.js
@@ -10,7 +10,7 @@ import Paper from "@material-ui/core/Paper";
 import SessionInfo from "../../components/SessionInfo";
 import Qrcode from "../../components/Qrcode";
 
-const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
+let socket;
 
 const useStyles = makeStyles(theme => ({
 	root: {
@@ -54,6 +54,14 @@ const WhatsAuth = () => {
 		fetchSession();
 	}, []);
 
+	useEffect(() => {
+		socket = openSocket(process.env.REACT_APP_BACKEND_URL);
+
+		return () => {
+			socket.disconnect();
+		};
+	}, []);
+
 	useEffect(() => {
 		socket.on("qrcode", data => {
 			if (data.action === "update") {
@@ -68,10 +76,6 @@ const WhatsAuth = () => {
 				history.push("/chat");
 			}
 		});
-
-		return () => {
-			socket.disconnect();
-		};
 	}, [history]);
 
 	return (