improvement: consider loading in all websockets handlers

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);

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);

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}>