refactor: mais tres ws connecoes movidas para conecao global

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

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

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)

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'