backend/package.json

@@ -17,7 +17,6 @@
   "license": "MIT",
   "dependencies": {
     "@sentry/node": "^5.29.2",
-    "@socket.io/redis-adapter": "^7.2.0",
     "@types/fluent-ffmpeg": "^2.1.21",
     "@types/pino": "^6.3.4",
     "axios": "^1.2.3",
@@ -42,20 +41,18 @@
     "pino": "^6.9.0",
     "pino-pretty": "^9.1.1",
     "qrcode-terminal": "^0.12.0",
-    "redis": "^4.6.13",
     "reflect-metadata": "^0.1.13",
     "sequelize": "^5.22.3",
     "sequelize-cli": "^5.5.1",
     "sequelize-typescript": "^1.1.0",
     "sharp": "^0.32.5",
-    "socket.io": "^4.7.5",
+    "socket.io": "^3.0.5",
     "socket.io-client": "^4.5.4",
     "uuid": "^8.3.2",
     "whatsapp-web.js": "github:pedroslopez/whatsapp-web.js",
     "yup": "^0.32.8"
   },
   "devDependencies": {
-    "@types/lodash": "4.14",
     "@types/bcryptjs": "^2.4.2",
     "@types/bluebird": "^3.5.32",
     "@types/cookie-parser": "^1.4.2",

backend/src/libs/socket.ts

@@ -3,9 +3,6 @@ import { Server } from "http";
 import AppError from "../errors/AppError";
 import { logger } from "../utils/logger";
 
-import { createAdapter } from "@socket.io/redis-adapter";
-import { createClient } from 'redis'; 
-
 import { v4 as uuidv4 } from "uuid";
 import ListUserParamiterService from "../services/UserServices/ListUserParamiterService";
 import {
@@ -30,7 +27,6 @@ import {
 } from "../services/WbotServices/wbotMessageListener";
 import { join } from "path";
 import Whatsapp from "../models/Whatsapp";
-import { get } from "../helpers/RedisClient"
 
 let count: number = 0;
 let listOnline: any[] = [];
@@ -46,32 +42,16 @@ let dateTime = splitDateTime(
   new Date(format(new Date(), "yyyy-MM-dd HH:mm:ss", { locale: ptBR }))
 );
 
-
+export const initIO = (httpServer: Server): SocketIO => {
-const pubClient = createClient({ url: 'redis://172.31.187.29:6379' });
-const subClient = pubClient.duplicate();
-
-
-pubClient.connect().catch(console.error);
-subClient.connect().catch(console.error); 
-
-
-export const initIO = (httpServer: Server): SocketIO => { 
-
   io = new SocketIO(httpServer, {
     cors: {
-      origin: process.env.FRONTEND_URL,
+      origin: process.env.FRONTEND_URL
-      //allowedHeaders: ["my-custom-header"],
-      //credentials: true
     },
-    maxHttpBufferSize: 1e8,
+    maxHttpBufferSize: 1e8
-    // pingInterval: 25000,
+  });
-    // pingTimeout: 60000,
-    // adapter: createAdapter(pubClient, subClient)
-  }); 
- 
 
   io.on("connection", socket => {
-    logger.info("Client Connected");  
+    logger.info("Client Connected");
 
     socket.on("joinWhatsSession", (whatsappId: string) => {
       logger.info(`A client joined a joinWhatsSession channel: ${whatsappId}`);
@@ -127,7 +107,6 @@ export const initIO = (httpServer: Server): SocketIO => {
     socket.on("online", (userId: any) => {
       // console.log('userId: ', userId)
 
-      return
       obj.uuid = uuidv4();
 
       if (userId.logoutUserId) {
@@ -254,18 +233,13 @@ export const initIO = (httpServer: Server): SocketIO => {
       if (rooms && rooms.size == 2 && ![...rooms][1].startsWith("session_"))
         return;
 
-         let whatsappIds = await get({
+      let whatsappIds: any = await Whatsapp.findAll({
-        key: "whatsapp:*",
+        attributes: ["id"],
-        parse: true
+        raw: true
       });
 
-      // let whatsappIds: any = await Whatsapp.findAll({
-      //   attributes: ["id"],
-      //   raw: true
-      // });
-
       if (whatsappIds && whatsappIds.length > 0) {
-        // whatsappIds = whatsappIds.map((e: any) => `${e.id}`);
+        whatsappIds = whatsappIds.map((e: any) => `${e.id}`);
 
         console.log(
           "whatsappIds whatsappIds whatsappIds whatsappIds whatsappIds: ",

frontend/package.json

@@ -43,7 +43,7 @@
     "yup": "^0.32.8"
   },
   "scripts": {
-    "start": "PORT=3331 react-scripts start",
+    "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

frontend/src/components/MessagesList/index.js

@@ -1,9 +1,7 @@
 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"
 
@@ -36,7 +34,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: {
@@ -440,18 +438,11 @@ 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)
 
-    const onConnectMessagesList = () => {
+    socket.on("connect", () => socket.emit("joinChatBox", ticketId))
-      socket.emit("joinChatBox", ticketId)
-    }
 
-    onConnectMessagesList()
+    socket.on("appMessage", (data) => {
-
-    socket.on("connect", onConnectMessagesList)
-
-    const onAppMessageMessagesList = (data) => {
-      if (+data.message.ticketId !== +ticketId) return
 
       if (data.action === "create") {
 
@@ -463,14 +454,10 @@ const MessagesList = ({ ticketId, isGroup }) => {
       if (data.action === "update") {
         dispatch({ type: "UPDATE_MESSAGE", payload: data.message })
       }
-    }
+    })
-
-    socket.on("appMessage", onAppMessageMessagesList)
 
     return () => {
-      socket.emit("leaveChatBox", ticketId)
+      socket.disconnect()
-      socket.off("connect", onConnectMessagesList)
-      socket.off("appMessage", onAppMessageMessagesList)
     }
   }, [ticketId])
 
@@ -962,4 +949,4 @@ const MessagesList = ({ ticketId, isGroup }) => {
   )
 }
 
-export default MessagesList
+export default MessagesList

frontend/src/components/NotificationsPopOver/index.js

@@ -2,8 +2,7 @@ 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"
@@ -116,24 +115,24 @@ const NotificationsPopOver = () => {
 
 	useEffect(() => {
 		const fetchSession = async () => {
-			try {
+		  try {
-				const { data } = await api.get('/settings')
+			const { data } = await api.get('/settings')
-				setSettings(data.settings)
+			setSettings(data.settings)
-			} catch (err) {
+		  } catch (err) {
-				toastError(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) => {
 
@@ -194,8 +193,7 @@ const NotificationsPopOver = () => {
 
 
 		return () => {
-			socket.removeAllListeners('reload_page');
+			socket.disconnect()
-			socket.removeAllListeners('onlineStatus');
 		}
 	}, [user.id, handleLogout, user.profile])
 
@@ -203,17 +201,12 @@ const NotificationsPopOver = () => {
 
 
 	useEffect(() => {
-		//const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
+		const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
 
-		const onConnectNotifications = () => {
+		socket.on("connect", () => socket.emit("joinNotification"))
-			socket.emit("joinNotification")
-		}
 
-		onConnectNotifications()
 
-		socket.on("connect", onConnectNotifications)
+		socket.on("ticket", data => {
-
-		const onTicketNotifications = data => {
 			if (data.action === "updateUnread" || data.action === "delete") {
 
 
@@ -239,18 +232,25 @@ 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,6 +265,8 @@ 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
@@ -273,25 +275,20 @@ const NotificationsPopOver = () => {
 
 				handleNotifications(data)
 			}
-		}
+		})
 
-		socket.on("appMessage", onAppMessageNotifications)
+		socket.on('notifyPeding', data =>{
-
+			if(settings?.length > 0 && getSettingValue('notificationTransferQueue') === 'enabled') handleNotifications("", data);
-		socket.on('notifyPeding', data => {
-			if (settings?.length > 0 && getSettingValue('notificationTransferQueue') === 'enabled') handleNotifications("", data);
 		});
 
 		return () => {
-			socket.off('connect', onConnectNotifications);
+			socket.disconnect()
-			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 = {
@@ -304,14 +301,14 @@ const NotificationsPopOver = () => {
 			const notification = new Notification(
 				`${i18n.t("tickets.notification.message")} ${contact.name}`,
 				options
-			)
+				)
-
+				
-			notification.onclick = e => {
+				notification.onclick = e => {
-				e.preventDefault()
+					e.preventDefault()
 				window.focus()
 				historyRef.current.push(`/tickets/${ticket.id}`)
 			}
-
+			
 			setDesktopNotifications(prevState => {
 				const notfiticationIndex = prevState.findIndex(
 					n => n.tag === notification.tag
@@ -322,15 +319,15 @@ const NotificationsPopOver = () => {
 				}
 				return [notification, ...prevState]
 			})
-		} else {
+		}else{
-			user.queues.forEach(queue => {
+			user.queues.forEach(queue =>{
-				if (queue.id === notify.data?.queue?.id) {
+				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()
@@ -349,7 +346,7 @@ const NotificationsPopOver = () => {
 					return [notification, ...prevState]
 				})
 			}
-		}
+		}		
 		soundAlertRef.current()
 	}
 

frontend/src/components/PositionModal/index.js

@@ -3,8 +3,7 @@ import React, { useState, useEffect, useRef, useContext } from "react"
 import * as Yup from "yup"
 import { Formik, Form, Field } from "formik"
 import { toast } from "react-toastify"
-//import openSocket from 'socket.io-client'
+import openSocket from 'socket.io-client'
-import { socket } from "../../services/socket"
 
 import {
   makeStyles,
@@ -51,8 +50,8 @@ const useStyles = makeStyles((theme) => ({
 }))
 
 const PositionSchema = Yup.object().shape({
-  name: Yup.string()
+  name: Yup.string() 
-    .required("Required"),
+    .required("Required"), 
 })
 
 const PositionModal = ({
@@ -66,14 +65,14 @@ const PositionModal = ({
   const isMounted = useRef(true)
 
   const initialState = {
-    name: "",
+    name: "", 
   }
 
   const [position, setPosition] = useState(initialState)
   // const [selectedQueueIds, setSelectedQueueIds] = useState([])
   const { setting } = useContext(AuthContext)
   const [settings, setSettings] = useState(setting)
-
+ 
 
   useEffect(() => {
     return () => {
@@ -87,9 +86,9 @@ const PositionModal = ({
 
 
   useEffect(() => {
-    //const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
+    const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
 
-    const onSettingsPosition = (data) => {
+    socket.on('settings', (data) => {
       if (data.action === 'update') {
         setSettings((prevState) => {
           const aux = [...prevState]
@@ -98,12 +97,10 @@ const PositionModal = ({
           return aux
         })
       }
-    }
+    })
-
-    socket.on('settings', onSettingsPosition)
 
     return () => {
-      socket.off("settings", onSettingsPosition)
+      socket.disconnect()
     }
   }, [])
 
@@ -143,7 +140,7 @@ const PositionModal = ({
 
   const handleSavePosition = async (values) => {
     try {
-
+  
       if (positionId) {
         await api.put(`/positions/${positionId}`, values)
         handleClose()
@@ -156,7 +153,7 @@ const PositionModal = ({
         handleClose()
         toast.success("Cargo salvo com sucesso")
       }
-
+     
     } catch (err) {
       toastError(err)
     }
@@ -203,7 +200,7 @@ const PositionModal = ({
                     className={classes.textField}
                     fullWidth
                   />
-                </div>
+                </div> 
                 {/* <div>
                   {
                     ((settings && getSettingValue('quickAnswerByQueue') === 'enabled')) && (

frontend/src/components/QrcodeModal/index.js

@@ -1,8 +1,6 @@
 import React, { useEffect, useState, useContext } from "react";
 import QRCode from "qrcode.react";
-//import openSocket from "socket.io-client";
+import openSocket from "socket.io-client";
-import { socket } from "../../services/socket";
-
 import toastError from "../../errors/toastError";
 
 import { Dialog, DialogContent, Paper, Typography } from "@material-ui/core";
@@ -33,9 +31,9 @@ const QrcodeModal = ({ open, onClose, whatsAppId }) => {
 
 	useEffect(() => {
 		if (!whatsAppId) return;
-		//const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
+		const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
 
-		const onWhatsAppSessionQrCode = data => {
+		socket.on("whatsappSession", data => {
 			if (data.action === "update" && data.session.id === whatsAppId) {
 				setQrCode(data.session.qrcode);
 			}
@@ -44,23 +42,21 @@ const QrcodeModal = ({ open, onClose, whatsAppId }) => {
 				onClose();
 			}
 
-			if (data.action === "error") {
+			if (data.action === "error") { 
 
-				console.log('user.profile: ', user.profile)
+					console.log('user.profile: ', user.profile)
 
-				if (user.profile === 'master') {
+				if(user.profile === 'master'){
 
 					alert(data.msg)
 
-				}
+				} 
-
+				
 			}
-		}
+		});
-
-		socket.on("whatsappSession", onWhatsAppSessionQrCode);
 
 		return () => {
-			socket.off("whatsappSession", onWhatsAppSessionQrCode);
+			socket.disconnect();
 		};
 	}, [whatsAppId, onClose, user.profile]);
 

frontend/src/components/QueueModal/index.js

@@ -23,8 +23,8 @@ import { IconButton, InputAdornment } from "@material-ui/core"
 import { Colorize } from "@material-ui/icons"
 
 import { AuthContext } from '../../context/Auth/AuthContext'
-//import openSocket from 'socket.io-client'
+import openSocket from 'socket.io-client'
-import { socket } from "../../services/socket"
+
 
 
 const useStyles = makeStyles(theme => ({
@@ -92,9 +92,9 @@ const QueueModal = ({ open, onClose, queueId }) => {
 	}, [setting])
 
 	useEffect(() => {
-		//const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
+		const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
 
-		const onSettingsQueueModal = (data) => {
+		socket.on('settings', (data) => {
 			if (data.action === 'update') {
 				setSettings((prevState) => {
 					const aux = [...prevState]
@@ -103,12 +103,10 @@ const QueueModal = ({ open, onClose, queueId }) => {
 					return aux
 				})
 			}
-		}
+		})
-
-		socket.on('settings', onSettingsQueueModal)
 
 		return () => {
-			socket.off("settings", onSettingsQueueModal)
+			socket.disconnect()
 		}
 	}, [])
 

frontend/src/components/QuickAnswersModal/index.js

@@ -3,8 +3,8 @@ import React, { useState, useEffect, useRef, useContext } from "react"
 import * as Yup from "yup"
 import { Formik, Form, Field } from "formik"
 import { toast } from "react-toastify"
-//import openSocket from 'socket.io-client'
+import openSocket from 'socket.io-client'
-import { socket } from "../../services/socket"
+
 
 import {
   makeStyles,
@@ -79,7 +79,7 @@ const QuickAnswersModal = ({
   const [quickAnswer, setQuickAnswer] = useState(initialState)
   const [selectedQueueIds, setSelectedQueueIds] = useState([])
   const { user, setting, getSettingValue } = useContext(AuthContext)
-  const [settings, setSettings] = useState(setting)
+  const [settings, setSettings] = useState(setting) 
 
   useEffect(() => {
     return () => {
@@ -92,18 +92,18 @@ const QuickAnswersModal = ({
   }, [setting])
 
   useEffect(() => {
-
+ 
     setSelectedQueueIds([])
-    if (open && selectedQueueIds.length === 0 && !quickAnswerId) {
+    if (open && selectedQueueIds.length === 0 && !quickAnswerId) { 
       setSelectedQueueIds(user.queues.map(q => q.id))
     }
 
   }, [open,])
 
   useEffect(() => {
-    //const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
+    const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
 
-    const onSettingsQuickAnswersModal = (data) => {
+    socket.on('settings', (data) => {
       if (data.action === 'update') {
         setSettings((prevState) => {
           const aux = [...prevState]
@@ -112,16 +112,14 @@ const QuickAnswersModal = ({
           return aux
         })
       }
-    }
+    })
-
-    socket.on('settings', onSettingsQuickAnswersModal)
 
     return () => {
-      socket.off("settings", onSettingsQuickAnswersModal)
+      socket.disconnect()
     }
   }, [])
 
-  useEffect(() => {
+  useEffect(() => { 
 
     // setSelectedQueueIds([])
 
@@ -141,7 +139,7 @@ const QuickAnswersModal = ({
         if (isMounted.current) {
           setQuickAnswer(data)
 
-          if (data?.queues) {
+          if (data?.queues) { 
             const quickQueueIds = data.queues?.map((queue) => queue.id)
             setSelectedQueueIds(quickQueueIds)
           }

frontend/src/components/StatusChatEndModal/index.js

@@ -3,8 +3,8 @@ import React, { useState, useEffect, useRef, useContext } from "react"
 import * as Yup from "yup"
 import { Formik, Form, Field } from "formik"
 import { toast } from "react-toastify"
-//import openSocket from 'socket.io-client'
+import openSocket from 'socket.io-client'
-import { socket } from "../../services/socket"
+
 
 import {
   makeStyles,
@@ -91,9 +91,9 @@ const StatusChatEndModal = ({
 
 
   useEffect(() => {
-    //const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
+    const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
 
-    const onSettingsStatusChatEndModal = (data) => {
+    socket.on('settings', (data) => {
       if (data.action === 'update') {
         setSettings((prevState) => {
           const aux = [...prevState]
@@ -102,12 +102,10 @@ const StatusChatEndModal = ({
           return aux
         })
       }
-    }
+    })
-
-    socket.on('settings', onSettingsStatusChatEndModal)
 
     return () => {
-      socket.off("settings", onSettingsStatusChatEndModal)
+      socket.disconnect()
     }
   }, [])
 

frontend/src/components/Ticket/index.js

@@ -2,9 +2,7 @@ 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"
@@ -134,32 +132,22 @@ const Ticket = () => {
   }, [])
 
   useEffect(() => {
-    //const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
+    const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
 
-    const onConnectTicket = () => socket.emit("joinChatBox", ticketId)
+    socket.on("connect", () => socket.emit("joinChatBox", ticketId))
-
-    onConnectTicket()
-
-    socket.on("connect", onConnectTicket)
-
-    const onTicketTicket = (data) => {
-      const isSameTicket = +data?.ticket?.id === +ticketId || +data.ticketId === +ticketId
-      if (!isSameTicket) return
 
+    socket.on("ticket", (data) => {
       if (data.action === "update") {
         setTicket(data.ticket)
       }
 
-      if (data.action === "deleteForever") {
+      if (data.action === "delete") {
-        console.log('delete forever')
         toast.success("Ticket deleted sucessfully.")
         history.push("/tickets")
       }
-    }
+    })
 
-    socket.on("ticket", onTicketTicket)
+    socket.on("contact", (data) => {
-
-    const onContactTicket = (data) => {
       if (data.action === "update") {
         setContact((prevState) => {
           if (prevState.id === data.contact?.id) {
@@ -168,11 +156,9 @@ const Ticket = () => {
           return prevState
         })
       }
-    }
+    })
 
-    socket.on("contact", onContactTicket)
+    socket.on("remoteTickesControllIdleOpen", (data) => {
-
-    const onRemoteTicketsControllIdleOpenTicket = (data) => {
       if (data.action === "update") {
         let url_ticketId
         try {
@@ -189,15 +175,10 @@ const Ticket = () => {
           console.log('error on try do the send seen: ', error)
         }
       }
-    }
+    })
-
-    socket.on("remoteTickesControllIdleOpen", onRemoteTicketsControllIdleOpenTicket)
 
     return () => {
-      socket.off("connect", onConnectTicket)
+      socket.disconnect()
-      socket.off("ticket", onTicketTicket)
-      socket.off("contact", onContactTicket)
-      socket.off("remoteTickesControllIdleOpen", onRemoteTicketsControllIdleOpenTicket)
     }
   }, [ticketId, history])
 

frontend/src/components/TicketListItem/index.js

@@ -22,8 +22,7 @@ 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: {
@@ -152,18 +151,17 @@ const TicketListItem = ({ ticket, remoteTicketsControll, settings }) => {
 
 
 	useEffect(() => {
-		//const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
+		const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
 
-		const onRemoteTickesControllTicketListItem = (data) => {
+		socket.on('remoteTickesControll', (data) => {
 			console.log('REMOTE TICKETS CONTROLL UPDATE2: ', data.tickets)
 			if (data.action === 'update') {
 				setRemoteTicketsControll(data.tickets)
 			}
-		}
+		})
 
-		socket.on('remoteTickesControll', onRemoteTickesControllTicketListItem)
 
-		const onSettingsTicketListItem = (data) => {
+		socket.on('settings', (data) => {
 			if (data.action === 'update') {
 				setSettings((prevState) => {
 					const aux = [...prevState]
@@ -172,13 +170,11 @@ const TicketListItem = ({ ticket, remoteTicketsControll, settings }) => {
 					return aux
 				})
 			}
-		}
+		})
 
-		socket.on('settings', onSettingsTicketListItem)
 
 		return () => {
-			socket.off('remoteTickesControll', onRemoteTickesControllTicketListItem);
+			socket.disconnect()
-			socket.off('settings', onSettingsTicketListItem);
 		}
 	}, [])
 

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 { socket } from "../../services/socket"
+import openSocket from "socket.io-client"
 
 import { makeStyles } from "@material-ui/core/styles"
 import List from "@material-ui/core/List"
@@ -243,29 +243,27 @@ 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 =>
-			(status === ticket.status) &&
 			(!ticket.userId || ticket.userId === user?.id || showAll) &&
 			(!ticket.queueId || selectedQueueIds.indexOf(ticket.queueId) > -1)
 
 		const notBelongsToUserQueues = ticket =>
 			ticket.queueId && selectedQueueIds.indexOf(ticket.queueId) === -1
 
-		const onConnectTicketList = () => {
+		socket.on("connect", () => {
 			if (status) {
 				socket.emit("joinTickets", status)
 			} else {
 				socket.emit("joinNotification")
 			}
-		}
 
-		onConnectTicketList()
+		})
 
-		socket.on("connect", onConnectTicketList)
 
-		const onTicketTicketList = data => {
+
+		socket.on("ticket", data => {
 
 			if (data.action === "updateUnread") {
 
@@ -294,11 +292,10 @@ const TicketsList = (props) => {
 			if (data.action === "delete") {
 				dispatch({ type: "DELETE_TICKET", payload: data.ticketId })
 			}
-		}
+		})
 
-		socket.on("ticket", onTicketTicketList)
 
-		const onAppMessageTicketList = data => {
+		socket.on("appMessage", data => {
 			if (data.action === "create" && shouldUpdateTicket(data.ticket)) {
 
 
@@ -310,9 +307,7 @@ const TicketsList = (props) => {
 					payload: data,
 				})
 			}
-		}
+		})
-
-		socket.on("appMessage", onAppMessageTicketList)
 
 		socket.on("contact", data => {
 			if (data.action === "update") {
@@ -323,16 +318,16 @@ const TicketsList = (props) => {
 			}
 		})
 
-		const onRemoteTickesControllTicketList = (data) => {
+
+		socket.on('remoteTickesControll', (data) => {
 			console.log('REMOTE TICKETS CONTROLL UPDATE 1: ', data.tickets)
 			if (data.action === 'update') {
 				setRemoteTicketsControll(data.tickets)
 			}
-		}
+		})
 
-		socket.on('remoteTickesControll', onRemoteTickesControllTicketList)
 
-		const onSettingsTicketList = (data) => {
+		socket.on('settings', (data) => {
 			if (data.action === 'update') {
 				setSettings((prevState) => {
 					const aux = [...prevState]
@@ -341,17 +336,11 @@ const TicketsList = (props) => {
 					return aux
 				})
 			}
-		}
+		})
 
-		socket.on('settings', onSettingsTicketList)
 
 		return () => {
-			socket.off("ticket", onTicketTicketList)
+			socket.disconnect()
-			socket.off('appMessage', onAppMessageTicketList);
-			socket.removeAllListeners("contact")
-			socket.off('connect', onConnectTicketList);
-			socket.off('settings', onSettingsTicketList);
-			socket.off('remoteTickesControll', onRemoteTickesControllTicketList);
 		}
 	}, [status, showAll, user, selectedQueueIds, tab])
 
@@ -360,7 +349,7 @@ const TicketsList = (props) => {
 		if (typeof updateCount === "function") {
 			updateCount(ticketsList.length)
 		}
-		if (ticketsList && status === "pending") {
+		if (ticketsList && status === "pending"){
 			setTickets(ticketsList)
 		}
 		// else{

frontend/src/components/TicketsManager/index.js

@@ -19,6 +19,7 @@ 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"
@@ -152,7 +153,7 @@ const TicketsManager = () => {
   const [openCount, setOpenCount] = useState(0)
   const [pendingCount, setPendingCount] = useState(0)
 
-  const userQueueIds = user?.queues?.map((q) => q?.id)
+  const userQueueIds = user.queues.map((q) => q.id)
   const [selectedQueueIds, setSelectedQueueIds] = useState(userQueueIds || [])
 
   const [showContentSearch, setShowContentSearch] = useState(false)
@@ -177,9 +178,9 @@ const TicketsManager = () => {
   }, [setting])
 
   useEffect(() => {
-    if (user?.profile?.toUpperCase() === "ADMIN" ||
+    if (user.profile.toUpperCase() === "ADMIN" ||
-      user?.profile?.toUpperCase() === "SUPERVISOR" ||
+      user.profile.toUpperCase() === "SUPERVISOR" ||
-      user?.profile?.toUpperCase() === "MASTER") {
+      user.profile.toUpperCase() === "MASTER") {
       setShowAllTickets(true)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -192,21 +193,21 @@ 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 => {
-          const createdAt = new Date(ticket?.createdAt)
+          const createdAt = new Date(ticket.createdAt)
           const difference = now - createdAt
           return difference
         })
-        const sumDifferences = differenceTime?.reduce((total, difference) => total + difference, 0)
+        const sumDifferences = differenceTime.reduce((total, difference) => total + difference, 0)
         const averageTimeMilliseconds = sumDifferences / tickets?.length
         let hours = Math.floor(averageTimeMilliseconds / 3600000)
         const minutes = Math.floor((averageTimeMilliseconds % 3600000) / 60000)
@@ -221,10 +222,10 @@ const TicketsManager = () => {
       } else return '00:00'
     }
 
-    setWaitingTime(calculateAverageTime())
+    setWaitingTime(calculateAverageTime()) 
 
     const intervalId = setInterval(() => {
-      setWaitingTime(calculateAverageTime())
+      setWaitingTime(calculateAverageTime()) 
     }, 10000)
 
     return () => clearInterval(intervalId)

frontend/src/components/TransferTicketModal/index.js

@@ -1,7 +1,6 @@
 import React, { useState, useContext, useMemo, 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 Button from "@material-ui/core/Button"
 import Dialog from "@material-ui/core/Dialog"
@@ -111,9 +110,9 @@ const TransferTicketModal = ({ modalOpen, onClose, ticketid }) => {
 
 
 	useEffect(() => {
-		//const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
+		const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
 
-		const onSettingsTransferTicketModal = (data) => {
+		socket.on('settings', (data) => {
 			console.log('settings updated ----------------------------xxxxxxxxxxxx')
 
 			if (data.action === 'update') {
@@ -124,12 +123,10 @@ const TransferTicketModal = ({ modalOpen, onClose, ticketid }) => {
 					return aux
 				})
 			}
-		}
+		})
-
-		socket.on('settings', onSettingsTransferTicketModal)
 
 		return () => {
-			socket.off("settings", onSettingsTransferTicketModal)
+			socket.disconnect()
 		}
 	}, [])
 
@@ -197,7 +194,7 @@ const TransferTicketModal = ({ modalOpen, onClose, ticketid }) => {
 						const { data } = await api.get(`/users/all`, {
 							params: { userId: user.id },
 						})
-
+ 
 						setUsers(data.users)
 						setQueuesByWhats(data.queues)
 						setQueues(data.queues)
@@ -231,7 +228,7 @@ const TransferTicketModal = ({ modalOpen, onClose, ticketid }) => {
 					{i18n.t("transferTicketModal.title")}
 				</DialogTitle>
 				<DialogContent dividers >
-					<FormControl variant="outlined" className={classes.maxWidth} style={{ marginBottom: '8px' }}>
+					<FormControl variant="outlined" className={classes.maxWidth} style={{marginBottom: '8px'}}>
 						{/* <InputLabel>{i18n.t("transferTicketModal.fieldQueueLabel")}</InputLabel> */}
 
 						<InputLabel>{'Usuário'}</InputLabel>
@@ -250,7 +247,7 @@ const TransferTicketModal = ({ modalOpen, onClose, ticketid }) => {
 								</MenuItem>
 							))}
 						</Select>
-					</FormControl>
+					</FormControl> 
 
 					<FormControl variant="outlined" className={classes.maxWidth}>
 						<InputLabel>{i18n.t("transferTicketModal.fieldQueuePlaceholder")}</InputLabel>
@@ -262,7 +259,7 @@ const TransferTicketModal = ({ modalOpen, onClose, ticketid }) => {
 							required
 						>
 							<MenuItem style={{ background: "white", }} value={''}>&nbsp;</MenuItem>
-							{queues?.map((queue) => (
+							{queues.map((queue) => (
 								<MenuItem
 									key={queue.id}
 									value={queue.id}

frontend/src/hooks/useAuth.js/index.js

@@ -1,7 +1,6 @@
 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'
 
@@ -63,19 +62,19 @@ const useAuth = () => {
 
   useEffect(() => {
     const token = localStorage.getItem('token')
-      ; (async () => {
+    ;(async () => {
-        if (token) {
+      if (token) {
-          try {
+        try {
-            const { data } = await api.post('/auth/refresh_token')
+          const { data } = await api.post('/auth/refresh_token')
-            api.defaults.headers.Authorization = `Bearer ${data.token}`
+          api.defaults.headers.Authorization = `Bearer ${data.token}`
-            setIsAuth(true)
+          setIsAuth(true)
-            setUser(data.user)
+          setUser(data.user)
-          } catch (err) {
+        } catch (err) {
-            toastError(err)
+          toastError(err)
-          }
         }
-        setLoading(false)
+      }
-      })()
+      setLoading(false)
+    })()
   }, [])
 
   useEffect(() => {
@@ -91,7 +90,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) {
@@ -99,7 +98,7 @@ const useAuth = () => {
       }
     })
 
-    const onSettingsAuth = (data) => {
+    socket.on('settings', (data) => {
       if (data.action === 'update') {
         setSetting((prevState) => {
           const aux = [...prevState]
@@ -108,13 +107,10 @@ const useAuth = () => {
           return aux
         })
       }
-    }
+    })
-
-    socket.on('settings', onSettingsAuth)
 
     return () => {
-      socket.removeAllListeners('user');
+      socket.disconnect()
-      socket.off('settings', onSettingsAuth);
     }
   }, [user])
 
@@ -139,7 +135,7 @@ const useAuth = () => {
   const handleLogout = async () => {
     setLoading(true)
 
-    try {
+    try { 
       await api.delete(`/auth/logout/${user.id}`);
 
       setIsAuth(false)

frontend/src/hooks/useWhatsApps/index.js

@@ -1,7 +1,5 @@
 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";
 
 
@@ -32,7 +30,7 @@ const reducer = (state, action) => {
 
 		if (whatsAppIndex !== -1) {
 
-			if ('disabled' in whatsApp) {
+			if ('disabled' in whatsApp) { 
 				state[whatsAppIndex].disabled = whatsApp.disabled
 			}
 			else {
@@ -128,7 +126,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") {
@@ -160,9 +158,7 @@ const useWhatsApps = () => {
 
 
 		return () => {
-			socket.removeAllListeners('whatsapp');
+			socket.disconnect();
-			socket.removeAllListeners('whatsappSession');
-			socket.removeAllListeners('whatsappSessionMonit');
 		};
 	}, []);
 

frontend/src/layout/MainListItems.js

@@ -31,8 +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'
 
 
@@ -119,9 +118,9 @@ const MainListItems = (props) => {
   }
 
   useEffect(() => {
-    //const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
+    const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
 
-    const onSettingsMainListItem = (data) => {
+    socket.on('settings', (data) => {
       if (data.action === 'update') {
         setSettings((prevState) => {
           const aux = [...prevState]
@@ -130,12 +129,10 @@ const MainListItems = (props) => {
           return aux
         })
       }
-    }
+    })
-
-    socket.on('settings', onSettingsMainListItem)
 
     return () => {
-      socket.off('settings', onSettingsMainListItem);
+      socket.disconnect()
     }
   }, [])
 

frontend/src/pages/Campaign/index.js

@@ -1,8 +1,7 @@
 import React, { useState, useCallback, useEffect, useReducer, useContext } from 'react'
-import { toast } from 'react-toastify'
+import { toast } from 'react-toastify' 
 
-//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 { green } from '@material-ui/core/colors'
@@ -14,11 +13,11 @@ import {
     IconButton,
     Table,
     TableHead,
-    Paper,
+    Paper,  
 } from '@material-ui/core'
 import {
-    Edit,
+    Edit,  
-    DeleteOutline,
+    DeleteOutline, 
     // Restore
 } from '@material-ui/icons'
 
@@ -27,7 +26,7 @@ import MainHeader from '../../components/MainHeader'
 import MainHeaderButtonsWrapper from '../../components/MainHeaderButtonsWrapper'
 import Title from '../../components/Title'
 import TableRowSkeleton from '../../components/TableRowSkeleton'
-
+ 
 import CampaignModal from '../../components/CampaignModal'
 import ConfirmationModal from '../../components/ConfirmationModal'
 import QrcodeModal from '../../components/QrcodeModal'
@@ -52,7 +51,7 @@ const reducer = (state, action) => {
         const campaigns = action.payload
         return [...state, ...campaigns]
     }
-    if (action.type === "UPDATE_CAMPAIGNS") {
+    if (action.type === "UPDATE_CAMPAIGNS") { 
 
         const campaign = action.payload
         const campaignIndex = state.findIndex((c) => c.id === campaign.id)
@@ -110,7 +109,7 @@ const useStyles = makeStyles((theme) => ({
     buttonProgress: {
         color: green[500],
     },
-}))
+})) 
 
 const Campaign = () => {
     //--------
@@ -125,7 +124,7 @@ const Campaign = () => {
     const [qrModalOpen, setQrModalOpen] = useState(false)
     const [selectedCampaign, setSelectedCampaign] = useState(null)
     const [confirmModalOpen, setConfirmModalOpen] = useState(false)
-
+  
     const [campaigns, dispatch] = useReducer(reducer, [])
 
     const [loading, setLoading] = useState(true)
@@ -153,7 +152,7 @@ const Campaign = () => {
         const delayDebounceFn = setTimeout(() => {
             const fetchContacts = async () => {
 
-                try {
+                try { 
 
                     const { data } = await apiBroker.get('/campaign', {
                         params: {
@@ -161,7 +160,7 @@ const Campaign = () => {
                             baseURL: process.env.REACT_APP_BACKEND_URL_PRIVATE,
                             identifier: 'campaign'
                         }
-                    })
+                    }) 
 
                     dispatch({ type: "LOAD_CAMPAIGNS", payload: data.campaign })
                     setLoading(false)
@@ -175,7 +174,7 @@ const Campaign = () => {
         }, 500)
         return () => clearTimeout(delayDebounceFn)
     }, [user.id])
-
+ 
 
     const handleOpenCampaignModal = () => {
         setSelectedCampaign(null)
@@ -185,12 +184,12 @@ const Campaign = () => {
     const handleCloseCampaignModal = useCallback(() => {
         setCampaignModalOpen(false)
         setSelectedCampaign(null)
-    }, [setSelectedCampaign, setCampaignModalOpen])
+    }, [setSelectedCampaign, setCampaignModalOpen]) 
 
-    const handleStart = async (campaign) => {
+    const handleStart = async (campaign) => { 
 
         try {
-            const { data } = await apiBroker.post(`/campaign/start/${campaign.id}`)
+            const { data } = await apiBroker.post(`/campaign/start/${campaign.id}`) 
 
             dispatch({ type: "UPDATE_CAMPAIGNS", payload: data.campaign })
 
@@ -201,10 +200,10 @@ const Campaign = () => {
         }
     }
 
-    const handleStop = async (campaign) => {
+    const handleStop = async (campaign) => { 
 
         try {
-            const { data } = await apiBroker.post(`/campaign/stop/${campaign.id}`)
+            const { data } = await apiBroker.post(`/campaign/stop/${campaign.id}`) 
 
             dispatch({ type: "UPDATE_CAMPAIGNS", payload: data.campaign })
 
@@ -246,7 +245,7 @@ const Campaign = () => {
         setConfirmModalOpen(true)
     }
 
-    const handleSubmitConfirmationModal = async () => {
+    const handleSubmitConfirmationModal = async () => { 
 
         if (confirmModalInfo.action === 'delete') {
             try {
@@ -294,12 +293,13 @@ const Campaign = () => {
                 )}
             </>
         )
-    }
+    }  
 
     useEffect(() => {
-        //const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
+        const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
 
-        const onContactsBulkCampaing = (data) => {
+
+        socket.on("contactsBulkInsertOnQueueStatus", (data) => {
             if (data.action === 'update') {
 
                 if (String(data.insertOnQueue.adminId) === String(user.id)) {
@@ -312,24 +312,19 @@ const Campaign = () => {
                 }
 
             }
-        }
+        })
 
-        socket.on("contactsBulkInsertOnQueueStatus", onContactsBulkCampaing)
+        socket.on('campaign', (data) => { 
-
-        const onCampaignCampaign = (data) => {
 
             if (data.action === 'update') {
                 dispatch({ type: "UPDATE_CAMPAIGNS", payload: data.campaign })
             }
-        }
+        }) 
-
-        socket.on('campaign', onCampaignCampaign)
-
 
+   
 
         return () => {
-            socket.off("campaign", onCampaignCampaign)
+            socket.disconnect()
-            socket.off("contactsBulkInsertOnQueueStatus", onContactsBulkCampaing)
         }
     }, [user.id])
 

frontend/src/pages/Connections/index.js

@@ -2,8 +2,7 @@ import React, { useState, useCallback, useEffect, useContext } from 'react'
 import { toast } from 'react-toastify'
 import { format, parseISO } from 'date-fns'
 
-//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 { green, red, yellow, grey } from '@material-ui/core/colors'
@@ -145,7 +144,7 @@ const Connections = () => {
   const [selectedWhatsApp, setSelectedWhatsApp] = useState(null)
   const [confirmModalOpen, setConfirmModalOpen] = useState(false)
 
-  const [diskSpaceInfo, setDiskSpaceInfo] = useState({})
+  const [diskSpaceInfo, setDiskSpaceInfo] = useState({}) 
 
   const [settings, setSettings] = useState([])
 
@@ -389,7 +388,7 @@ const Connections = () => {
           getSettingValue('whatsaAppCloudApi') === 'disabled') && (
             <CustomToolTip title={'Whatsapp Cloud API está desativado'}>
               <FiberManualRecord style={{ color: grey[500] }} />
-            </CustomToolTip>
+            </CustomToolTip> 
           )}
         {whatsApp.status === 'OPENING' && !whatsApp.isOfficial && (
           <CircularProgress size={24} className={classes.buttonProgress} />
@@ -434,7 +433,7 @@ const Connections = () => {
         try {
           await api.post(`/restartwhatsappsession/0`, {
             params: { status: 'status' },
-          })
+          }) 
 
           setClicks((buttons) =>
             buttons.map((e) => {
@@ -452,17 +451,15 @@ const Connections = () => {
   }, [])
 
   useEffect(() => {
-    //const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
+    const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
 
-    const onDiskSpaceMonitConnections = (data) => {
+    socket.on('diskSpaceMonit', (data) => {
       if (data.action === 'update') {
         setDiskSpaceInfo(data.diskSpace)
       }
-    }
+    })
 
-    socket.on('diskSpaceMonit', onDiskSpaceMonitConnections)
+    socket.on('settings', (data) => {
-
-    const onSettingsConnections = (data) => {
       if (data.action === 'update') {
         setSettings((prevState) => {
           const aux = [...prevState]
@@ -471,13 +468,10 @@ const Connections = () => {
           return aux
         })
       }
-    }
+    })
-
-    socket.on('settings', onSettingsConnections)
 
     return () => {
-      socket.off("settings", onSettingsConnections)
+      socket.disconnect()
-      socket.off("diskSpaceMonit", onDiskSpaceMonitConnections)
     }
   }, [])
 

frontend/src/pages/Contacts/index.js

@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useReducer, useCallback, useContext } from "react"
-//import openSocket from "socket.io-client"
+import openSocket from "socket.io-client"
-import { socket } from "../../services/socket"
 import { toast } from "react-toastify"
 import { useHistory } from "react-router-dom"
 
@@ -261,9 +260,9 @@ const Contacts = () => {
   }, [searchParam, pageNumber])
 
   useEffect(() => {
-    //const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
+    const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
 
-    const onContactsBulkContacts = (data) => {
+    socket.on("contactsBulkInsertOnQueueStatus", (data) => {
       if (data.action === 'update') {
 
         if (String(data.insertOnQueue.adminId) === String(user.id)) {
@@ -279,11 +278,9 @@ const Contacts = () => {
         }
 
       }
-    }
+    })
 
-    socket.on("contactsBulkInsertOnQueueStatus", onContactsBulkContacts)
+    socket.on("contact", (data) => {
-
-    const onContactContacts = (data) => {
       if (data.action === "update" || data.action === "create") {
         dispatch({ type: "UPDATE_CONTACTS", payload: data.contact })
       }
@@ -291,13 +288,10 @@ const Contacts = () => {
       if (data.action === "delete") {
         dispatch({ type: "DELETE_CONTACT", payload: +data.contactId })
       }
-    }
+    })
-
-    socket.on("contact", onContactContacts)
 
     return () => {
-      socket.off("contact", onContactContacts)
+      socket.disconnect()
-      socket.off("contactsBulkInsertOnQueueStatus", onContactsBulkContacts)
     }
   }, [user, history])
 
@@ -542,7 +536,7 @@ const Contacts = () => {
         open={contactModalOpen}
         onClose={handleCloseContactModal}
         aria-labelledby="form-dialog-title"
-        contactId={selectedContactId}
+        contactId={selectedContactId} 
       ></ContactModal>
       <ContactCreateTicketModal
         modalOpen={isCreateTicketModalOpen}

frontend/src/pages/Dashboard/index.js

@@ -17,8 +17,7 @@ import { AuthContext } from "../../context/Auth/AuthContext"
 import { i18n } from "../../translate/i18n";
 import Chart from "./Chart"
 import PieChart from "./PieChart"
-//import openSocket from "socket.io-client"
+import openSocket from "socket.io-client"
-import { socket } from "../../services/socket"
 import api from "../../services/api"
 
 import { Can } from "../../components/Can"
@@ -292,7 +291,7 @@ const Dashboard = () => {
 
           const { data } = await api.get("/reports/user/services", {
             params: { userId: null, startDate: dateToday, endDate: dateToday, userQueues: selectedQueue },
-          })
+          }) 
 
           dispatch({ type: "RESET" })
           dispatch({ type: "LOAD_QUERY", payload: data.usersProfile })
@@ -302,7 +301,7 @@ const Dashboard = () => {
           })
 
           setTicketStatusChatEnd(ticketStatusChatEndData.reportStatusChatEnd)
-
+ 
         } catch (err) {
 
         }
@@ -357,54 +356,46 @@ const Dashboard = () => {
 
 
   useEffect(() => {
-    //const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
+    const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
 
-    const onTicketsStatusDashboard = (data) => {
+    socket.on("ticketStatus", (data) => {
       if (data.action === "update") {
         setStatus("")
         setStatus(data.ticketStatus.status)
       }
-    }
+    })
 
-    socket.on("ticketStatus", onTicketsStatusDashboard)
+    socket.on("onlineStatus", (data) => {
-
-    const onOnlineStatusDashboard = (data) => {
       if (data.action === "logout" || data.action === "update") {
 
         dispatch({ type: "UPDATE_STATUS_ONLINE", payload: data.userOnlineTime })
       } else if (data.action === "delete") {
         dispatch({ type: "DELETE_USER_STATUS", payload: data.userOnlineTime })
       }
-    }
+    })
 
-    socket.on("onlineStatus", onOnlineStatusDashboard)
+    socket.on("user", (data) => {
-
-    const onUserDashboard = (data) => {
       if (data.action === "delete") {
         dispatch({ type: "DELETE_USER", payload: +data.userId })
       }
-    }
+    })
-
-    socket.on("user", onUserDashboard)
 
     return () => {
-      socket.off("user", onUserDashboard)
+      socket.disconnect()
-      socket.off("onlineStatus", onOnlineStatusDashboard)
-      socket.off("ticketStatus", onTicketsStatusDashboard)
     }
   }, [])
-
+  
   const handleSelectedQueue = useCallback((queueSelected) => {
-    if (queueSelected !== 'All') {
+    if(queueSelected !== 'All'){
       const queueIndex = user?.queues?.findIndex((q) => q.id === parseInt(queueSelected));
       const queueIds = []
       queueIds.push(user?.queues[queueIndex]?.id);
       setSelectedQueue(queueIds);
-    } else {
+    }else{
       const queueIds = user?.queues?.map((queue) => queue.id);
       setSelectedQueue(queueIds);
     }
-  }, [user, setSelectedQueue])
+  },[user, setSelectedQueue])
 
   useEffect(() => {
     if (ticketStatusChange === "") return
@@ -541,7 +532,7 @@ const Dashboard = () => {
                 <Grid item container spacing={3}>
                   <Grid item xs={12} sm={12} md={6} lg={6}>
                     <Paper className={classes.fixedHeightPaper} variant="outlined">
-                      <Chart allTickets={usersOnlineInfo} selectedQueue={selectedQueue} />
+                      <Chart allTickets={usersOnlineInfo} selectedQueue = {selectedQueue}/>
                     </Paper>
                   </Grid>
                   <Grid item xs={12} sm={12} md={6} lg={6}>

frontend/src/pages/Position/index.js

@@ -1,6 +1,5 @@
 import React, { useState, useContext, useEffect, useReducer } from "react"
-//import openSocket from "socket.io-client"
+import openSocket from "socket.io-client"
-import { socket } from "../../services/socket"
 
 import {
   Button,
@@ -126,9 +125,9 @@ const Position = () => {
   }, [searchParam, pageNumber])
 
   useEffect(() => {
-    //const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
+    const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
 
-    const onPositionPosition = (data) => {
+    socket.on("position", (data) => {
       if (data.action === "update" || data.action === "create") {
         dispatch({ type: "UPDATE_POSITIONS", payload: data.position })
       }
@@ -139,12 +138,10 @@ const Position = () => {
           payload: +data.positionId,
         })
       }
-    }
+    })
-
-    socket.on("position", onPositionPosition)
 
     return () => {
-      socket.off("position", onPositionPosition)
+      socket.disconnect()
     }
   }, [])
 

frontend/src/pages/Queues/index.js

@@ -1,7 +1,6 @@
 import React, { useEffect, useReducer, useState, useContext } from 'react'
 
-//import openSocket from 'socket.io-client'
+import openSocket from 'socket.io-client'
-import { socket } from '../../services/socket'
 
 import {
   Button,
@@ -92,7 +91,7 @@ const reducer = (state, action) => {
 const Queues = () => {
   const classes = useStyles()
 
-  const { user, setting, getSettingValue } = useContext(AuthContext)
+  const { user, setting, getSettingValue } = useContext(AuthContext) 
 
   const [queues, dispatch] = useReducer(reducer, [])
   const [loading, setLoading] = useState(false)
@@ -121,12 +120,12 @@ const Queues = () => {
         setLoading(false)
       }
     })()
-  }, [])
+  }, []) 
 
   useEffect(() => {
-    //const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
+    const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
 
-    const onQueueQueues = (data) => {
+    socket.on('queue', (data) => {
       if (data.action === 'update' || data.action === 'create') {
         dispatch({ type: 'UPDATE_QUEUES', payload: data.queue })
       }
@@ -134,11 +133,9 @@ const Queues = () => {
       if (data.action === 'delete') {
         dispatch({ type: 'DELETE_QUEUE', payload: data.queueId })
       }
-    }
+    })
 
-    socket.on('queue', onQueueQueues)
+    socket.on('settings', (data) => {
-
-    const onSettingsQueues = (data) => {
       if (data.action === 'update') {
         setSettings((prevState) => {
           const aux = [...prevState]
@@ -147,13 +144,10 @@ const Queues = () => {
           return aux
         })
       }
-    }
+    })
-
-    socket.on('settings', onSettingsQueues)
 
     return () => {
-      socket.off("settings", onSettingsQueues)
+      socket.disconnect()
-      socket.off("queue", onQueueQueues)
     }
   }, [])
 

frontend/src/pages/QuickAnswers/index.js

@@ -1,6 +1,5 @@
 import React, { useState, useContext, useEffect, useReducer } from "react"
-//import openSocket from "socket.io-client"
+import openSocket from "socket.io-client"
-import { socket } from "../../services/socket"
 
 import {
   Button,
@@ -126,9 +125,9 @@ const QuickAnswers = () => {
   }, [searchParam, pageNumber])
 
   useEffect(() => {
-    //const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
+    const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
 
-    const onQuickAnswerQuickAnswers = (data) => {
+    socket.on("quickAnswer", (data) => {
       if (data.action === "update" || data.action === "create") {
         dispatch({ type: "UPDATE_QUICK_ANSWERS", payload: data.quickAnswer })
       }
@@ -139,11 +138,10 @@ const QuickAnswers = () => {
           payload: +data.quickAnswerId,
         })
       }
-    }
+    })
-    socket.on("quickAnswer", onQuickAnswerQuickAnswers)
 
     return () => {
-      socket.off("quickAnswer", onQuickAnswerQuickAnswers)
+      socket.disconnect()
     }
   }, [])
 

frontend/src/pages/Report/index.js

@@ -18,8 +18,7 @@ import MaterialTable from 'material-table'
 import LogoutIcon from '@material-ui/icons/CancelOutlined'
 import apiBroker from "../../services/apiBroker"
 import fileDownload from 'js-file-download'
-//import openSocket from "socket.io-client"
+import openSocket from "socket.io-client"
-import { socket } from "../../services/socket"
 import { i18n } from "../../translate/i18n"
 import Switch from '@mui/material/Switch'
 
@@ -240,7 +239,7 @@ let columnsData = [
   { title: `Espera`, field: 'waiting_time' },
   { title: `Mensagens`, field: 'messagesToFilter', searchable: true, hidden: true },
   { title: `Link`, field: 'link', searchable: false, hidden: true, export: true },
-]
+]  
 
 let columnsDataSuper = [
   { title: `Tipo`, field: 'isRemote' },
@@ -382,10 +381,10 @@ const Report = () => {
             const tickets = data.tickets.map(ticket => {
               ticket.isRemote = ticket.isRemote ? 'Remoto' : 'Comum';
               return ({
-                ...ticket,
+              ...ticket,
-                messagesToFilter: ticket.messages.map(message => message.body).join(' '),
+              messagesToFilter: ticket.messages.map(message => message.body).join(' '),
-                link: `${process.env.REACT_APP_FRONTEND_URL}/tickets/${ticket.id}`
+              link: `${process.env.REACT_APP_FRONTEND_URL}/tickets/${ticket.id}`
-              })
+            })
             })
             dispatchQ({ type: "LOAD_QUERY", payload: tickets })
             setHasMore(data.hasMore)
@@ -592,9 +591,9 @@ const Report = () => {
 
   useEffect(() => {
 
-    //const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
+    const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
 
-    const onQueryOnQueueStatusReport = (data) => {
+    socket.on("queryOnQueueStatus", (data) => {
       if (data.action === 'update') {
 
         if (String(data.queryOnQueue.adminId) === String(userA.id)) {
@@ -605,39 +604,35 @@ const Report = () => {
         }
 
       }
-    }
+    })
-
-    socket.on("queryOnQueueStatus", onQueryOnQueueStatusReport)
-
-    const onOnlineStatusReport = (data) => {
-
-      let date = new Date().toLocaleDateString('pt-BR').split('/')
-      let dateToday = `${date[2]}-${date[1]}-${date[0]}`
-
-      if (data.action === "logout" || (data.action === "update" &&
-        ((`${startDate}` === `${endDate}`) && (`${endDate}` === `${dateToday}`) && (`${startDate}` === `${dateToday}`)))) {
-
-        dispatchQ({ type: "UPDATE_STATUS_ONLINE", payload: data.userOnlineTime })
-
-      }
-      else if (data.action === "delete") {
-        dispatchQ({ type: "DELETE_USER_STATUS", payload: data.userOnlineTime })
-      }
-
-    }
-
-    const onUserReport = (data) => {
-
-      if (data.action === "delete") {
-        dispatch({ type: "DELETE_USER", payload: +data.userId })
-      }
-    }
 
     if (reportOption === '2') {
 
-      socket.on("onlineStatus", onOnlineStatusReport)
 
-      socket.on("user", onUserReport)
+      socket.on("onlineStatus", (data) => {
+
+        let date = new Date().toLocaleDateString('pt-BR').split('/')
+        let dateToday = `${date[2]}-${date[1]}-${date[0]}`
+
+        if (data.action === "logout" || (data.action === "update" &&
+          ((`${startDate}` === `${endDate}`) && (`${endDate}` === `${dateToday}`) && (`${startDate}` === `${dateToday}`)))) {
+
+          dispatchQ({ type: "UPDATE_STATUS_ONLINE", payload: data.userOnlineTime })
+
+        }
+        else if (data.action === "delete") {
+          dispatchQ({ type: "DELETE_USER_STATUS", payload: data.userOnlineTime })
+        }
+
+      })
+
+      socket.on("user", (data) => {
+
+        if (data.action === "delete") {
+          dispatch({ type: "DELETE_USER", payload: +data.userId })
+        }
+      })
+
 
     }
     else if (reportOption === "1") {
@@ -646,9 +641,7 @@ const Report = () => {
     }
 
     return () => {
-      socket.off("onlineStatus", onOnlineStatusReport)
+      socket.disconnect()
-      socket.off("user", onUserReport)
-      socket.off("queryOnQueueStatus", onQueryOnQueueStatusReport)
     }
 
 
@@ -694,7 +687,7 @@ const Report = () => {
 
 
   const renderSwitch = (param) => {
-    if (userA.profile !== 'supervisor') {
+    if(userA.profile !== 'supervisor'){
       switch (param) {
         case 'empty':
           return (
@@ -887,7 +880,7 @@ const Report = () => {
                 <>
                   <MTable data={query}
                     columns={userA.profile !== 'supervisor' ? columnsData : columnsDataSuper}
-                    hasChild={userA.profile !== 'supervisor' ? true : false}
+                    hasChild={userA.profile !== 'supervisor' ? true :false}
                     removeClickRow={false}
 
                     handleScroll={handleScroll}

frontend/src/pages/SchedulesReminder/index.js

@@ -28,8 +28,8 @@ import { render } from '@testing-library/react'
 // import Modal from "../../../..ChatEnd/ModalChatEnd";  
 import Modal from "../../components/ModalUpdateScheduleReminder"
 
-//import openSocket from "socket.io-client"
+import openSocket from "socket.io-client"
-import { socket } from "../../services/socket"
+
 
 
 
@@ -204,9 +204,11 @@ const SchedulesReminder = () => {
 
   useEffect(() => {
 
-    //const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
+    const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
+
+    socket.on("schedulingNotify", (data) => {
+
 
-    const onSchedulingNotifySchedulesRemider = (data) => {
 
       setLoading(true)
 
@@ -226,12 +228,10 @@ const SchedulesReminder = () => {
       setLoading(false)
 
 
-    }
+    })
-
-    socket.on("schedulingNotify", onSchedulingNotifySchedulesRemider)
 
     return () => {
-      socket.off("schedulingNotify", onSchedulingNotifySchedulesRemider)
+      socket.disconnect()
     }
   }, [])
 
@@ -300,9 +300,9 @@ const SchedulesReminder = () => {
 
 
 
-  useEffect(() => {
+  useEffect(() => { 
 
-    if (!loading) {
+    if (!loading) { 
 
       setData(query.map(({ scheduleReminder, ...others }) => (
         {

frontend/src/pages/Settings/index.js

@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useContext } from 'react'
-//import openSocket from 'socket.io-client'
+import openSocket from 'socket.io-client'
-import { socket } from '../../services/socket.js'
 
 import { makeStyles } from '@material-ui/core/styles'
 import Paper from '@material-ui/core/Paper'
@@ -125,9 +124,9 @@ const Settings = () => {
 
 
   useEffect(() => {
-    //const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
+    const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
 
-    const onSettingsSettings = (data) => {
+    socket.on('settings', (data) => {
       console.log('settings updated ----------------------------')
 
       if (data.action === 'update') {
@@ -138,12 +137,10 @@ const Settings = () => {
           return aux
         })
       }
-    }
+    })
-
-    socket.on('settings', onSettingsSettings)
 
     return () => {
-      socket.off("settings", onSettingsSettings)
+      socket.disconnect()
     }
   }, [])
 
@@ -182,11 +179,7 @@ const Settings = () => {
   }
 
   const getSettingValue = (key, _obj = false) => {
-    //const { value, obj } = settings.find((s) => s.key === key)
+    const { value, obj } = settings.find((s) => s.key === key)
-    const setting = settings.find((s) => s.key === key)
-
-    const value = setting?.value || ""
-    const obj = setting?.obj || null
 
     if (_obj)
       return obj
@@ -648,7 +641,7 @@ const Settings = () => {
                 </Select>
               </Paper>
             </Container>
-          </div>
+          </div>        
         </div>
       )}
     />

frontend/src/pages/StatusChatEnd/index.js

@@ -1,6 +1,5 @@
 import React, { useState, useContext, useEffect, useReducer } from "react"
-//import openSocket from "socket.io-client"
+import openSocket from "socket.io-client"
-import { socket } from "../../services/socket"
 
 import {
   Button,
@@ -116,7 +115,7 @@ const StatusChatEnd = () => {
           const { data } = await api.get("/statusChatEnd", {
             params: { searchParam, pageNumber },
           })
-
+         
           setChecked(data?.statusChatEnd?.map(s => s.isDefault ? true : false))
 
           dispatch({ type: "LOAD_STATUS_CHAT_END", payload: data.statusChatEnd })
@@ -132,9 +131,9 @@ const StatusChatEnd = () => {
   }, [searchParam, pageNumber])
 
   useEffect(() => {
-    //const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
+    const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
 
-    const onStatusChatEndStatusChatEnd = (data) => {
+    socket.on("statusChatEnd", (data) => {
       if (data.action === "update" || data.action === "create") {
         dispatch({ type: "UPDATE_STATUS_CHAT_END", payload: data.statusChatEnd })
       }
@@ -145,12 +144,10 @@ const StatusChatEnd = () => {
           payload: +data.statusChatEndId,
         })
       }
-    }
+    })
-
-    socket.on("statusChatEnd", onStatusChatEndStatusChatEnd)
 
     return () => {
-      socket.off("statusChatEnd", onStatusChatEndStatusChatEnd)
+      socket.disconnect()
     }
   }, [])
 
@@ -190,14 +187,14 @@ const StatusChatEnd = () => {
   }
 
   const handleChange = async (event, statusChatEnd, index) => {
-
+ 
     const newChecked = new Array(statusChatEnds.length).fill(false)
     newChecked[index] = event.target.checked
     setChecked(newChecked)
 
     try {
       const { id } = statusChatEnd
-      await api.put(`/statusChatEnd/${id}`, { isDefault: event.target.checked })
+      await api.put(`/statusChatEnd/${id}`, { isDefault: event.target.checked }) 
       toast.success("Status de encerramento padrão salvo com sucesso")
 
     } catch (error) {

frontend/src/pages/Users/index.js

@@ -1,7 +1,6 @@
 import React, { useState, useEffect, useReducer, useContext } from "react"
 import { toast } from "react-toastify"
-//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 Paper from "@material-ui/core/Paper"
@@ -166,9 +165,9 @@ const Users = () => {
 
 
   useEffect(() => {
-    //const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
+    const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
 
-    const onUserUsers = (data) => {
+    socket.on("user", (data) => {
       if (data.action === "update" || data.action === "create") {
         dispatch({ type: "UPDATE_USERS", payload: data.user })
       }
@@ -176,11 +175,10 @@ const Users = () => {
       if (data.action === "delete") {
         dispatch({ type: "DELETE_USER", payload: +data.userId })
       }
-    }
+    })
 
-    socket.on("user", onUserUsers)
 
-    const onSettingsUsers = (data) => {
+    socket.on('settings', (data) => {
       if (data.action === 'update') {
         setSettings((prevState) => {
           const aux = [...prevState]
@@ -189,12 +187,10 @@ const Users = () => {
           return aux
         })
       }
-    }
+    })
-    socket.on('settings', onSettingsUsers)
 
     return () => {
-      socket.off("settings", onSettingsUsers)
+      socket.disconnect()
-      socket.off("user", onUserUsers)
     }
   }, [])
 

frontend/src/services/socket.js

@@ -1,14 +0,0 @@
-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, 
-//{
-//     withCredentials: true,
-//     extraHeaders: {
-//         "my-custom-header": "abcd"
-//     },
-    // transports: ['websocket',  'polling']
-//}
-);