From 1c0e251b244adc2fc595b876796184b4442e02eb Mon Sep 17 00:00:00 2001
From: canove <cassio@economicros.com.br>
Date: Mon, 10 Aug 2020 19:12:30 -0300
Subject: [PATCH] improvement: consider loading in all websockets handlers

---
 frontend/src/components/Tickets/index.js  | 22 ++++++++++---------
 frontend/src/pages/Contacts/index.js      | 26 ++++++++++++-----------
 frontend/src/pages/WhatsAuth/WhatsAuth.js |  6 ++----
 3 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/Tickets/index.js b/frontend/src/components/Tickets/index.js
index aa76001..8de288a 100644
--- a/frontend/src/components/Tickets/index.js
+++ b/frontend/src/components/Tickets/index.js
@@ -25,6 +25,8 @@ import TabPanel from "../TabPanel";
 
 import api from "../../services/api";
 
+const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
+
 const useStyles = makeStyles(theme => ({
 	ticketsWrapper: {
 		position: "relative",
@@ -207,18 +209,22 @@ const Tickets = () => {
 	}, [searchParam, pageNumber, token, tab]);
 
 	useEffect(() => {
-		const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
-
 		socket.emit("joinNotification");
 
+		return () => {
+			socket.disconnect();
+		};
+	}, [ticketId]);
+
+	useEffect(() => {
 		socket.on("ticket", data => {
-			if (data.action === "updateUnread") {
+			if (data.action === "updateUnread" && !loading) {
 				resetUnreadMessages(data);
 			}
 			if (data.action === "updateStatus" || data.action === "create") {
 				updateTickets(data);
 			}
-			if (data.action === "delete") {
+			if (data.action === "delete" && !loading) {
 				deleteTicket(data);
 				if (ticketId && data.ticketId === +ticketId) {
 					toast.warn("O ticket que você estava foi deletado.");
@@ -228,7 +234,7 @@ const Tickets = () => {
 		});
 
 		socket.on("appMessage", data => {
-			if (data.action === "create") {
+			if (data.action === "create" && !loading) {
 				updateTickets(data);
 				if (
 					(ticketId &&
@@ -240,11 +246,7 @@ const Tickets = () => {
 				showDesktopNotification(data);
 			}
 		});
-
-		return () => {
-			socket.disconnect();
-		};
-	}, [ticketId, userId, history]);
+	}, [history, ticketId, userId, loading]);
 
 	const loadMore = () => {
 		setPageNumber(prevState => prevState + 1);
diff --git a/frontend/src/pages/Contacts/index.js b/frontend/src/pages/Contacts/index.js
index 2ef18ac..c15cb6d 100644
--- a/frontend/src/pages/Contacts/index.js
+++ b/frontend/src/pages/Contacts/index.js
@@ -28,6 +28,8 @@ import ContactsSekeleton from "../../components/ContactsSekeleton";
 import ContactModal from "../../components/ContactModal";
 import ConfirmationModal from "../../components/ConfirmationModal/";
 
+const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
+
 const useStyles = makeStyles(theme => ({
 	mainContainer: {
 		flex: 1,
@@ -103,23 +105,23 @@ const Contacts = () => {
 	}, [searchParam, page, rowsPerPage]);
 
 	useEffect(() => {
-		const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
-
-		socket.on("contact", data => {
-			if (data.action === "update" || data.action === "create") {
-				updateContacts(data.contact);
-			}
-
-			if (data.action === "delete") {
-				deleteContact(data.contactId);
-			}
-		});
-
 		return () => {
 			socket.disconnect();
 		};
 	}, []);
 
+	useEffect(() => {
+		socket.on("contact", data => {
+			if ((data.action === "update" || data.action === "create") && !loading) {
+				updateContacts(data.contact);
+			}
+
+			if (data.action === "delete" && !loading) {
+				deleteContact(data.contactId);
+			}
+		});
+	}, [loading]);
+
 	const updateContacts = contact => {
 		setContacts(prevState => {
 			const contactIndex = prevState.findIndex(c => c.id === contact.id);
diff --git a/frontend/src/pages/WhatsAuth/WhatsAuth.js b/frontend/src/pages/WhatsAuth/WhatsAuth.js
index 997fe0f..fc8b0d0 100644
--- a/frontend/src/pages/WhatsAuth/WhatsAuth.js
+++ b/frontend/src/pages/WhatsAuth/WhatsAuth.js
@@ -10,6 +10,8 @@ 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);
+
 const useStyles = makeStyles(theme => ({
 	root: {
 		display: "flex",
@@ -53,8 +55,6 @@ const WhatsAuth = () => {
 	}, []);
 
 	useEffect(() => {
-		const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
-
 		socket.on("qrcode", data => {
 			if (data.action === "update") {
 				setQrCode(data.qr);
@@ -74,8 +74,6 @@ const WhatsAuth = () => {
 		};
 	}, [history]);
 
-	console.log(session);
-
 	return (
 		<div className={classes.root}>
 			<Grid container spacing={3}>