From 4d3cab53331a7397a46f8d7c5236fb638de8e9d5 Mon Sep 17 00:00:00 2001 From: willian-pessoa Date: Thu, 9 May 2024 09:01:21 -0300 Subject: [PATCH] refactor: mais tres ws connecoes movidas para conecao global --- frontend/src/components/MessagesList/index.js | 25 +++++++++---- frontend/src/components/Ticket/index.js | 35 +++++++++++++------ .../src/components/TicketsManager/index.js | 9 +++-- frontend/src/layout/MainListItems.js | 2 +- 4 files changed, 48 insertions(+), 23 deletions(-) diff --git a/frontend/src/components/MessagesList/index.js b/frontend/src/components/MessagesList/index.js index 7e9126c..438b7ad 100644 --- a/frontend/src/components/MessagesList/index.js +++ b/frontend/src/components/MessagesList/index.js @@ -1,7 +1,9 @@ import React, { useContext, useState, useEffect, useReducer, useRef } from "react" import { isSameDay, parseISO, format } from "date-fns" -import openSocket from "socket.io-client" +//import openSocket from "socket.io-client" +import { socket } from "../../services/socket" + import clsx from "clsx" import { AuthContext } from "../../context/Auth/AuthContext" @@ -34,7 +36,7 @@ import whatsBackground from "../../assets/wa-background.png" import api from "../../services/api" import toastError from "../../errors/toastError" -import { countTicketMsgContext } from "../../context/CountTicketMsgProvider/CountTicketMsgProvider" +import { countTicketMsgContext } from "../../context/CountTicketMsgProvider/CountTicketMsgProvider" const useStyles = makeStyles((theme) => ({ messagesListWrapper: { @@ -438,11 +440,17 @@ const MessagesList = ({ ticketId, isGroup }) => { }, [pageNumber, ticketId]) useEffect(() => { - const socket = openSocket(process.env.REACT_APP_BACKEND_URL) + //const socket = openSocket(process.env.REACT_APP_BACKEND_URL) - socket.on("connect", () => socket.emit("joinChatBox", ticketId)) + const onConnectMessagesList = () => { + socket.emit("joinChatBox", ticketId) + } - socket.on("appMessage", (data) => { + onConnectMessagesList() + + socket.on("connect", onConnectMessagesList) + + onAppMessageMessagesList = (data) => { if (data.action === "create") { @@ -454,10 +462,13 @@ const MessagesList = ({ ticketId, isGroup }) => { if (data.action === "update") { dispatch({ type: "UPDATE_MESSAGE", payload: data.message }) } - }) + } + + socket.on("appMessage", onAppMessageMessagesList) return () => { - socket.disconnect() + socket.off("connect", onConnectMessagesList) + socket.off("appMessage", onAppMessageMessagesList) } }, [ticketId]) diff --git a/frontend/src/components/Ticket/index.js b/frontend/src/components/Ticket/index.js index dbf78bf..cd6cb41 100644 --- a/frontend/src/components/Ticket/index.js +++ b/frontend/src/components/Ticket/index.js @@ -2,7 +2,9 @@ import React, { useState, useEffect } from "react" import { useParams, useHistory } from "react-router-dom" import { toast } from "react-toastify" -import openSocket from "socket.io-client" +//import openSocket from "socket.io-client" +import { socket } from "../../services/socket" + import clsx from "clsx" import { Paper, makeStyles } from "@material-ui/core" @@ -132,11 +134,15 @@ const Ticket = () => { }, []) useEffect(() => { - const socket = openSocket(process.env.REACT_APP_BACKEND_URL) + //const socket = openSocket(process.env.REACT_APP_BACKEND_URL) - socket.on("connect", () => socket.emit("joinChatBox", ticketId)) + const onConnectTicket = () => socket.emit("joinChatBox", ticketId) - socket.on("ticket", (data) => { + onConnectTicket() + + socket.on("connect", onConnectTicket) + + const onTicketTicket = (data) => { if (data.action === "update") { setTicket(data.ticket) } @@ -145,9 +151,11 @@ const Ticket = () => { toast.success("Ticket deleted sucessfully.") history.push("/tickets") } - }) + } - socket.on("contact", (data) => { + socket.on("ticket", onTicketTicket) + + const onContactTicket = (data) => { if (data.action === "update") { setContact((prevState) => { if (prevState.id === data.contact?.id) { @@ -156,9 +164,11 @@ const Ticket = () => { return prevState }) } - }) + } - socket.on("remoteTickesControllIdleOpen", (data) => { + socket.on("contact", onContactTicket) + + const onRemoteTicketsControllIdleOpenTicket = (data) => { if (data.action === "update") { let url_ticketId try { @@ -175,10 +185,15 @@ const Ticket = () => { console.log('error on try do the send seen: ', error) } } - }) + } + + socket.on("remoteTickesControllIdleOpen", onRemoteTicketsControllIdleOpenTicket) return () => { - socket.disconnect() + socket.off("connect", onConnectTicket) + socket.off("ticket", onTicketTicket) + socket.off("contact", onContactTicket) + socket.off("remoteTickesControllIdleOpen", onRemoteTicketsControllIdleOpenTicket) } }, [ticketId, history]) diff --git a/frontend/src/components/TicketsManager/index.js b/frontend/src/components/TicketsManager/index.js index 19b922b..18bd1c8 100644 --- a/frontend/src/components/TicketsManager/index.js +++ b/frontend/src/components/TicketsManager/index.js @@ -19,7 +19,6 @@ import FindInPageIcon from '@material-ui/icons/FindInPage' import FormControlLabel from "@material-ui/core/FormControlLabel" import Switch from "@material-ui/core/Switch" -import openSocket from "socket.io-client" import NewTicketModal from "../NewTicketModal" import TicketsList from "../TicketsList" @@ -193,13 +192,13 @@ const TicketsManager = () => { setTabOption(tab) - }, [tab, setTabOption]) + }, [tab, setTabOption]) useEffect(() => { if (settings?.length > 0 && getSettingValue('waitingTimeTickets') !== 'enabled') return - const calculateAverageTime = () => { + const calculateAverageTime = () => { if (tickets.length > 0) { const now = new Date() const differenceTime = tickets?.map(ticket => { @@ -222,10 +221,10 @@ const TicketsManager = () => { } else return '00:00' } - setWaitingTime(calculateAverageTime()) + setWaitingTime(calculateAverageTime()) const intervalId = setInterval(() => { - setWaitingTime(calculateAverageTime()) + setWaitingTime(calculateAverageTime()) }, 10000) return () => clearInterval(intervalId) diff --git a/frontend/src/layout/MainListItems.js b/frontend/src/layout/MainListItems.js index 6530671..eedb663 100644 --- a/frontend/src/layout/MainListItems.js +++ b/frontend/src/layout/MainListItems.js @@ -31,7 +31,7 @@ import { i18n } from '../translate/i18n' import { WhatsAppsContext } from '../context/WhatsApp/WhatsAppsContext' import { AuthContext } from '../context/Auth/AuthContext' import { Can } from '../components/Can' -import openSocket from 'socket.io-client' +//import openSocket from 'socket.io-client' import { socket } from '../services/socket' import api from '../services/api'