diff --git a/frontend/src/components/NotificationsPopOver/index.js b/frontend/src/components/NotificationsPopOver/index.js index 1e46dd1..0871f7a 100644 --- a/frontend/src/components/NotificationsPopOver/index.js +++ b/frontend/src/components/NotificationsPopOver/index.js @@ -2,7 +2,8 @@ import React, { useState, useRef, useEffect, useContext } from "react" import { useHistory } from "react-router-dom" import { format } from "date-fns" -import openSocket from "socket.io-client" +//import openSocket from "socket.io-client" +import { socket } from "../../services/socket" import useSound from "use-sound" import Popover from "@material-ui/core/Popover" @@ -115,24 +116,24 @@ const NotificationsPopOver = () => { useEffect(() => { const fetchSession = async () => { - try { - const { data } = await api.get('/settings') - setSettings(data.settings) - } catch (err) { - toastError(err) - } + try { + const { data } = await api.get('/settings') + setSettings(data.settings) + } catch (err) { + toastError(err) + } } fetchSession() - }, []) + }, []) - const getSettingValue = (key) => { + const getSettingValue = (key) => { const { value } = settings.find((s) => s.key === key) return value - } + } useEffect(() => { - const socket = openSocket(process.env.REACT_APP_BACKEND_URL) + //const socket = openSocket(process.env.REACT_APP_BACKEND_URL) socket.on("reload_page", (data) => { @@ -193,7 +194,8 @@ const NotificationsPopOver = () => { return () => { - socket.disconnect() + socket.removeAllListeners('reload_page'); + socket.removeAllListeners('onlineStatus'); } }, [user.id, handleLogout, user.profile]) @@ -201,12 +203,17 @@ const NotificationsPopOver = () => { useEffect(() => { - const socket = openSocket(process.env.REACT_APP_BACKEND_URL) + //const socket = openSocket(process.env.REACT_APP_BACKEND_URL) - socket.on("connect", () => socket.emit("joinNotification")) + const onConnectNotifications = () => { + socket.emit("joinNotification") + } + onConnectNotifications() - socket.on("ticket", data => { + socket.on("connect", onConnectNotifications) + + const onTicketNotifications = data => { if (data.action === "updateUnread" || data.action === "delete") { @@ -232,25 +239,18 @@ const NotificationsPopOver = () => { return prevState }) } - }) - - socket.on("appMessage", data => { - + } + socket.on("ticket", onTicketNotifications) + const onAppMessageNotifications = data => { if ( data.action === "create" && !data.message.read && (data.ticket.userId === user?.id || !data.ticket.userId) ) { - - - setNotifications(prevState => { - - - // prevState.forEach((e)=>{ // // }) @@ -265,8 +265,6 @@ const NotificationsPopOver = () => { return [data.ticket, ...prevState] }) - - const shouldNotNotificate = (data.message.ticketId === ticketIdRef.current && document.visibilityState === "visible") || (data.ticket.userId && data.ticket.userId !== user?.id) || data.ticket.isGroup || !data.ticket.userId @@ -275,20 +273,25 @@ const NotificationsPopOver = () => { handleNotifications(data) } - }) + } - socket.on('notifyPeding', data =>{ - if(settings?.length > 0 && getSettingValue('notificationTransferQueue') === 'enabled') handleNotifications("", data); + socket.on("appMessage", onAppMessageNotifications) + + socket.on('notifyPeding', data => { + if (settings?.length > 0 && getSettingValue('notificationTransferQueue') === 'enabled') handleNotifications("", data); }); return () => { - socket.disconnect() + socket.off('connect', onConnectNotifications); + socket.off('ticket', onTicketNotifications); + socket.off('appMessage', onAppMessageNotifications); + socket.removeAllListeners('notifyPeding'); } }, [user, settings]) - const handleNotifications = (data, notify) => { + const handleNotifications = (data, notify) => { let isQueue = false; - if(!notify){ + if (!notify) { const { message, contact, ticket } = data const options = { @@ -301,14 +304,14 @@ const NotificationsPopOver = () => { const notification = new Notification( `${i18n.t("tickets.notification.message")} ${contact.name}`, options - ) - - notification.onclick = e => { - e.preventDefault() + ) + + notification.onclick = e => { + e.preventDefault() window.focus() historyRef.current.push(`/tickets/${ticket.id}`) } - + setDesktopNotifications(prevState => { const notfiticationIndex = prevState.findIndex( n => n.tag === notification.tag @@ -319,15 +322,15 @@ const NotificationsPopOver = () => { } return [notification, ...prevState] }) - }else{ - user.queues.forEach(queue =>{ - if(queue.id === notify.data?.queue?.id){ + } else { + user.queues.forEach(queue => { + if (queue.id === notify.data?.queue?.id) { isQueue = true; } }) - if(!isQueue){ + if (!isQueue) { return; - }else { + } else { const notification = new Notification(`${i18n.t("tickets.notification.messagePeding")} ${notify.data?.queue?.name}`); notification.onclick = e => { e.preventDefault() @@ -346,7 +349,7 @@ const NotificationsPopOver = () => { return [notification, ...prevState] }) } - } + } soundAlertRef.current() } diff --git a/frontend/src/components/TicketListItem/index.js b/frontend/src/components/TicketListItem/index.js index 0d71944..931be34 100644 --- a/frontend/src/components/TicketListItem/index.js +++ b/frontend/src/components/TicketListItem/index.js @@ -22,7 +22,8 @@ import MarkdownWrapper from "../MarkdownWrapper" import { Tooltip } from "@material-ui/core" import { AuthContext } from "../../context/Auth/AuthContext" import toastError from "../../errors/toastError" -import openSocket from 'socket.io-client' +//import openSocket from 'socket.io-client' +import { socket } from "../../services/socket" const useStyles = makeStyles(theme => ({ ticket: { @@ -151,7 +152,7 @@ const TicketListItem = ({ ticket, remoteTicketsControll, settings }) => { useEffect(() => { - const socket = openSocket(process.env.REACT_APP_BACKEND_URL) + //const socket = openSocket(process.env.REACT_APP_BACKEND_URL) socket.on('remoteTickesControll', (data) => { console.log('REMOTE TICKETS CONTROLL UPDATE2: ', data.tickets) @@ -160,8 +161,7 @@ const TicketListItem = ({ ticket, remoteTicketsControll, settings }) => { } }) - - socket.on('settings', (data) => { + const onSettingsTicketListItem = (data) => { if (data.action === 'update') { setSettings((prevState) => { const aux = [...prevState] @@ -170,11 +170,13 @@ const TicketListItem = ({ ticket, remoteTicketsControll, settings }) => { return aux }) } - }) + } + socket.on('settings', onSettingsTicketListItem) return () => { - socket.disconnect() + socket.removeAllListeners('remoteTickesControll'); + socket.off('settings', onSettingsTicketListItem); } }, []) diff --git a/frontend/src/components/TicketsList/index.js b/frontend/src/components/TicketsList/index.js index a481700..36dee0a 100644 --- a/frontend/src/components/TicketsList/index.js +++ b/frontend/src/components/TicketsList/index.js @@ -1,7 +1,7 @@ import React, { useState, useEffect, useReducer, useContext } from "react" - -import openSocket from "socket.io-client" +//import openSocket from "socket.io-client" +import { socket } from "../../services/socket" import { makeStyles } from "@material-ui/core/styles" import List from "@material-ui/core/List" @@ -243,7 +243,7 @@ const TicketsList = (props) => { // if (tab=='search')return - const socket = openSocket(process.env.REACT_APP_BACKEND_URL) + //const socket = openSocket(process.env.REACT_APP_BACKEND_URL) const shouldUpdateTicket = ticket => (!ticket.userId || ticket.userId === user?.id || showAll) && @@ -252,18 +252,19 @@ const TicketsList = (props) => { const notBelongsToUserQueues = ticket => ticket.queueId && selectedQueueIds.indexOf(ticket.queueId) === -1 - socket.on("connect", () => { + const onConnectTicketList = () => { if (status) { socket.emit("joinTickets", status) } else { socket.emit("joinNotification") } + } - }) + onConnectTicketList() + socket.on("connect", onConnectTicketList) - - socket.on("ticket", data => { + const onTicketTicketList = data => { if (data.action === "updateUnread") { @@ -292,10 +293,11 @@ const TicketsList = (props) => { if (data.action === "delete") { dispatch({ type: "DELETE_TICKET", payload: data.ticketId }) } - }) + } + socket.on("ticket", onTicketTicketList) - socket.on("appMessage", data => { + const onAppMessageTicketList = data => { if (data.action === "create" && shouldUpdateTicket(data.ticket)) { @@ -307,7 +309,9 @@ const TicketsList = (props) => { payload: data, }) } - }) + } + + socket.on("appMessage", onAppMessageTicketList) socket.on("contact", data => { if (data.action === "update") { @@ -326,8 +330,7 @@ const TicketsList = (props) => { } }) - - socket.on('settings', (data) => { + const onSettingsTicketList = (data) => { if (data.action === 'update') { setSettings((prevState) => { const aux = [...prevState] @@ -336,11 +339,17 @@ const TicketsList = (props) => { return aux }) } - }) + } + socket.on('settings', onSettingsTicketList) return () => { - socket.disconnect() + socket.off("ticket", onTicketTicketList) + socket.off('appMessage', onAppMessageTicketList); + socket.removeAllListeners("contact") + socket.off('connect', onConnectTicketList); + socket.off('settings', onSettingsTicketList); + socket.removeAllListeners('remoteTickesControll'); } }, [status, showAll, user, selectedQueueIds, tab]) @@ -349,7 +358,7 @@ const TicketsList = (props) => { if (typeof updateCount === "function") { updateCount(ticketsList.length) } - if (ticketsList && status === "pending"){ + if (ticketsList && status === "pending") { setTickets(ticketsList) } // else{ diff --git a/frontend/src/hooks/useAuth.js/index.js b/frontend/src/hooks/useAuth.js/index.js index e2da363..6e3c7fb 100644 --- a/frontend/src/hooks/useAuth.js/index.js +++ b/frontend/src/hooks/useAuth.js/index.js @@ -1,6 +1,7 @@ import { useState, useEffect } from 'react' import { useHistory } from 'react-router-dom' -import openSocket from 'socket.io-client' +//import openSocket from 'socket.io-client' +import { socket } from '../../services/socket' import { toast } from 'react-toastify' @@ -62,19 +63,19 @@ const useAuth = () => { useEffect(() => { const token = localStorage.getItem('token') - ;(async () => { - if (token) { - try { - const { data } = await api.post('/auth/refresh_token') - api.defaults.headers.Authorization = `Bearer ${data.token}` - setIsAuth(true) - setUser(data.user) - } catch (err) { - toastError(err) + ; (async () => { + if (token) { + try { + const { data } = await api.post('/auth/refresh_token') + api.defaults.headers.Authorization = `Bearer ${data.token}` + setIsAuth(true) + setUser(data.user) + } catch (err) { + toastError(err) + } } - } - setLoading(false) - })() + setLoading(false) + })() }, []) useEffect(() => { @@ -90,7 +91,7 @@ const useAuth = () => { }, []) useEffect(() => { - const socket = openSocket(process.env.REACT_APP_BACKEND_URL) + //const socket = openSocket(process.env.REACT_APP_BACKEND_URL) socket.on('user', (data) => { if (data.action === 'update' && data.user.id === user.id) { @@ -98,7 +99,7 @@ const useAuth = () => { } }) - socket.on('settings', (data) => { + const onSettingsAuth = (data) => { if (data.action === 'update') { setSetting((prevState) => { const aux = [...prevState] @@ -107,10 +108,13 @@ const useAuth = () => { return aux }) } - }) + } + + socket.on('settings', onSettingsAuth) return () => { - socket.disconnect() + socket.removeAllListeners('user'); + socket.off('settings', onSettingsAuth); } }, [user]) @@ -135,7 +139,7 @@ const useAuth = () => { const handleLogout = async () => { setLoading(true) - try { + try { await api.delete(`/auth/logout/${user.id}`); setIsAuth(false) diff --git a/frontend/src/hooks/useWhatsApps/index.js b/frontend/src/hooks/useWhatsApps/index.js index 1360ac1..fe4da0a 100644 --- a/frontend/src/hooks/useWhatsApps/index.js +++ b/frontend/src/hooks/useWhatsApps/index.js @@ -1,5 +1,7 @@ import { useState, useEffect, useReducer } from "react"; -import openSocket from "socket.io-client"; +//import openSocket from "socket.io-client"; +import { socket } from "../../services/socket"; + import toastError from "../../errors/toastError"; @@ -30,7 +32,7 @@ const reducer = (state, action) => { if (whatsAppIndex !== -1) { - if ('disabled' in whatsApp) { + if ('disabled' in whatsApp) { state[whatsAppIndex].disabled = whatsApp.disabled } else { @@ -126,7 +128,7 @@ const useWhatsApps = () => { }, []); useEffect(() => { - const socket = openSocket(process.env.REACT_APP_BACKEND_URL); + //const socket = openSocket(process.env.REACT_APP_BACKEND_URL); socket.on("whatsapp", data => { if (data.action === "update") { @@ -158,7 +160,9 @@ const useWhatsApps = () => { return () => { - socket.disconnect(); + socket.removeAllListeners('whatsapp'); + socket.removeAllListeners('whatsappSession'); + socket.removeAllListeners('whatsappSessionMonit'); }; }, []); diff --git a/frontend/src/layout/MainListItems.js b/frontend/src/layout/MainListItems.js index 03339d2..6530671 100644 --- a/frontend/src/layout/MainListItems.js +++ b/frontend/src/layout/MainListItems.js @@ -32,6 +32,7 @@ import { WhatsAppsContext } from '../context/WhatsApp/WhatsAppsContext' import { AuthContext } from '../context/Auth/AuthContext' import { Can } from '../components/Can' import openSocket from 'socket.io-client' +import { socket } from '../services/socket' import api from '../services/api' @@ -118,9 +119,9 @@ const MainListItems = (props) => { } useEffect(() => { - const socket = openSocket(process.env.REACT_APP_BACKEND_URL) + //const socket = openSocket(process.env.REACT_APP_BACKEND_URL) - socket.on('settings', (data) => { + const onSettingsMainListItem = (data) => { if (data.action === 'update') { setSettings((prevState) => { const aux = [...prevState] @@ -129,10 +130,12 @@ const MainListItems = (props) => { return aux }) } - }) + } + + socket.on('settings', onSettingsMainListItem) return () => { - socket.disconnect() + socket.off('settings', onSettingsMainListItem); } }, []) diff --git a/frontend/src/services/socket.js b/frontend/src/services/socket.js new file mode 100644 index 0000000..a458f57 --- /dev/null +++ b/frontend/src/services/socket.js @@ -0,0 +1,6 @@ +import { io } from 'socket.io-client'; + +// "undefined" means the URL will be computed from the `window.location` object +const URL = process.env.REACT_APP_BACKEND_URL + +export const socket = io(URL); \ No newline at end of file