From 5981f9dd5e56efd6ee05d1b85cea24b6e8c5d5ec Mon Sep 17 00:00:00 2001 From: willian-pessoa Date: Thu, 9 May 2024 15:31:30 -0300 Subject: [PATCH] refactor: mais 7 conexoes movidas para conexao ws global --- .../src/components/PositionModal/index.js | 28 +++++---- frontend/src/components/QrcodeModal/index.js | 24 ++++---- frontend/src/components/QueueModal/index.js | 14 +++-- .../src/components/QuickAnswersModal/index.js | 24 ++++---- .../components/TransferTicketModal/index.js | 19 +++--- frontend/src/pages/Campaign/index.js | 59 ++++++++++--------- frontend/src/pages/Connections/index.js | 26 ++++---- 7 files changed, 109 insertions(+), 85 deletions(-) diff --git a/frontend/src/components/PositionModal/index.js b/frontend/src/components/PositionModal/index.js index 29dcde5..d1f6f90 100644 --- a/frontend/src/components/PositionModal/index.js +++ b/frontend/src/components/PositionModal/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, @@ -51,8 +51,8 @@ const useStyles = makeStyles((theme) => ({ })) const PositionSchema = Yup.object().shape({ - name: Yup.string() - .required("Required"), + name: Yup.string() + .required("Required"), }) const PositionModal = ({ @@ -66,14 +66,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 +87,9 @@ const PositionModal = ({ useEffect(() => { - const socket = openSocket(process.env.REACT_APP_BACKEND_URL) + //const socket = openSocket(process.env.REACT_APP_BACKEND_URL) - socket.on('settings', (data) => { + const onSettingsPosition = (data) => { if (data.action === 'update') { setSettings((prevState) => { const aux = [...prevState] @@ -98,10 +98,12 @@ const PositionModal = ({ return aux }) } - }) + } + + socket.on('settings', onSettingsPosition) return () => { - socket.disconnect() + socket.off("settings", onSettingsPosition) } }, []) @@ -141,7 +143,7 @@ const PositionModal = ({ const handleSavePosition = async (values) => { try { - + if (positionId) { await api.put(`/positions/${positionId}`, values) handleClose() @@ -154,7 +156,7 @@ const PositionModal = ({ handleClose() toast.success("Cargo salvo com sucesso") } - + } catch (err) { toastError(err) } @@ -201,7 +203,7 @@ const PositionModal = ({ className={classes.textField} fullWidth /> - + {/*
{ ((settings && getSettingValue('quickAnswerByQueue') === 'enabled')) && ( diff --git a/frontend/src/components/QrcodeModal/index.js b/frontend/src/components/QrcodeModal/index.js index dcca527..4c8bd23 100644 --- a/frontend/src/components/QrcodeModal/index.js +++ b/frontend/src/components/QrcodeModal/index.js @@ -1,6 +1,8 @@ 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"; @@ -31,9 +33,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); - socket.on("whatsappSession", data => { + const onWhatsAppSessionQrCode = data => { if (data.action === "update" && data.session.id === whatsAppId) { setQrCode(data.session.qrcode); } @@ -42,21 +44,23 @@ 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.disconnect(); + socket.off("whatsappSession", onWhatsAppSessionQrCode); }; }, [whatsAppId, onClose, user.profile]); diff --git a/frontend/src/components/QueueModal/index.js b/frontend/src/components/QueueModal/index.js index eb82ee8..776f68d 100644 --- a/frontend/src/components/QueueModal/index.js +++ b/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) - socket.on('settings', (data) => { + const onSettingsQueueModal = (data) => { if (data.action === 'update') { setSettings((prevState) => { const aux = [...prevState] @@ -103,10 +103,12 @@ const QueueModal = ({ open, onClose, queueId }) => { return aux }) } - }) + } + + socket.on('settings', onSettingsQueueModal) return () => { - socket.disconnect() + socket.off("settings", onSettingsQueueModal) } }, []) diff --git a/frontend/src/components/QuickAnswersModal/index.js b/frontend/src/components/QuickAnswersModal/index.js index 10008f8..748c3ce 100644 --- a/frontend/src/components/QuickAnswersModal/index.js +++ b/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) - socket.on('settings', (data) => { + const onSettingsQuickAnswersModal = (data) => { if (data.action === 'update') { setSettings((prevState) => { const aux = [...prevState] @@ -112,14 +112,16 @@ const QuickAnswersModal = ({ return aux }) } - }) + } + + socket.on('settings', onSettingsQuickAnswersModal) return () => { - socket.disconnect() + socket.off("settings", onSettingsQuickAnswersModal) } }, []) - useEffect(() => { + useEffect(() => { // setSelectedQueueIds([]) @@ -139,7 +141,7 @@ const QuickAnswersModal = ({ if (isMounted.current) { setQuickAnswer(data) - if (data?.queues) { + if (data?.queues) { const quickQueueIds = data.queues?.map((queue) => queue.id) setSelectedQueueIds(quickQueueIds) } diff --git a/frontend/src/components/TransferTicketModal/index.js b/frontend/src/components/TransferTicketModal/index.js index 02acdfc..0b1fb5b 100644 --- a/frontend/src/components/TransferTicketModal/index.js +++ b/frontend/src/components/TransferTicketModal/index.js @@ -1,6 +1,7 @@ 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" @@ -110,9 +111,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) - socket.on('settings', (data) => { + const onSettingsTransferTicketModal = (data) => { console.log('settings updated ----------------------------xxxxxxxxxxxx') if (data.action === 'update') { @@ -123,10 +124,12 @@ const TransferTicketModal = ({ modalOpen, onClose, ticketid }) => { return aux }) } - }) + } + + socket.on('settings', onSettingsTransferTicketModal) return () => { - socket.disconnect() + socket.off("settings", onSettingsTransferTicketModal) } }, []) @@ -194,7 +197,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) @@ -228,7 +231,7 @@ const TransferTicketModal = ({ modalOpen, onClose, ticketid }) => { {i18n.t("transferTicketModal.title")} - + {/* {i18n.t("transferTicketModal.fieldQueueLabel")} */} {'Usuário'} @@ -247,7 +250,7 @@ const TransferTicketModal = ({ modalOpen, onClose, ticketid }) => { ))} - + {i18n.t("transferTicketModal.fieldQueuePlaceholder")} diff --git a/frontend/src/pages/Campaign/index.js b/frontend/src/pages/Campaign/index.js index 0cae436..db78005 100644 --- a/frontend/src/pages/Campaign/index.js +++ b/frontend/src/pages/Campaign/index.js @@ -1,7 +1,8 @@ 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' @@ -13,11 +14,11 @@ import { IconButton, Table, TableHead, - Paper, + Paper, } from '@material-ui/core' import { - Edit, - DeleteOutline, + Edit, + DeleteOutline, // Restore } from '@material-ui/icons' @@ -26,7 +27,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' @@ -51,7 +52,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) @@ -109,7 +110,7 @@ const useStyles = makeStyles((theme) => ({ buttonProgress: { color: green[500], }, -})) +})) const Campaign = () => { //-------- @@ -124,7 +125,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) @@ -152,7 +153,7 @@ const Campaign = () => { const delayDebounceFn = setTimeout(() => { const fetchContacts = async () => { - try { + try { const { data } = await apiBroker.get('/campaign', { params: { @@ -160,7 +161,7 @@ const Campaign = () => { baseURL: process.env.REACT_APP_BACKEND_URL_PRIVATE, identifier: 'campaign' } - }) + }) dispatch({ type: "LOAD_CAMPAIGNS", payload: data.campaign }) setLoading(false) @@ -174,7 +175,7 @@ const Campaign = () => { }, 500) return () => clearTimeout(delayDebounceFn) }, [user.id]) - + const handleOpenCampaignModal = () => { setSelectedCampaign(null) @@ -184,12 +185,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 }) @@ -200,10 +201,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 }) @@ -245,7 +246,7 @@ const Campaign = () => { setConfirmModalOpen(true) } - const handleSubmitConfirmationModal = async () => { + const handleSubmitConfirmationModal = async () => { if (confirmModalInfo.action === 'delete') { try { @@ -293,13 +294,12 @@ const Campaign = () => { )} ) - } + } useEffect(() => { - const socket = openSocket(process.env.REACT_APP_BACKEND_URL) + //const socket = openSocket(process.env.REACT_APP_BACKEND_URL) - - socket.on("contactsBulkInsertOnQueueStatus", (data) => { + const onContactsBulkCampaing = (data) => { if (data.action === 'update') { if (String(data.insertOnQueue.adminId) === String(user.id)) { @@ -312,19 +312,24 @@ const Campaign = () => { } } - }) + } - socket.on('campaign', (data) => { + socket.on("contactsBulkInsertOnQueueStatus", onContactsBulkCampaing) + + const onCampaignCampaign = (data) => { if (data.action === 'update') { dispatch({ type: "UPDATE_CAMPAIGNS", payload: data.campaign }) } - }) + } + + socket.on('campaign', onCampaignCampaign) + - return () => { - socket.disconnect() + socket.off("campaign", onCampaignCampaign) + socket.off("contactsBulkInsertOnQueueStatus", onContactsBulkCampaing) } }, [user.id]) diff --git a/frontend/src/pages/Connections/index.js b/frontend/src/pages/Connections/index.js index e4055e6..2df93ec 100644 --- a/frontend/src/pages/Connections/index.js +++ b/frontend/src/pages/Connections/index.js @@ -2,7 +2,8 @@ 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' @@ -144,7 +145,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([]) @@ -388,7 +389,7 @@ const Connections = () => { getSettingValue('whatsaAppCloudApi') === 'disabled') && ( - + )} {whatsApp.status === 'OPENING' && !whatsApp.isOfficial && ( @@ -433,7 +434,7 @@ const Connections = () => { try { await api.post(`/restartwhatsappsession/0`, { params: { status: 'status' }, - }) + }) setClicks((buttons) => buttons.map((e) => { @@ -451,15 +452,17 @@ const Connections = () => { }, []) useEffect(() => { - const socket = openSocket(process.env.REACT_APP_BACKEND_URL) + //const socket = openSocket(process.env.REACT_APP_BACKEND_URL) - socket.on('diskSpaceMonit', (data) => { + const onDiskSpaceMonitConnections = (data) => { if (data.action === 'update') { setDiskSpaceInfo(data.diskSpace) } - }) + } - socket.on('settings', (data) => { + socket.on('diskSpaceMonit', onDiskSpaceMonitConnections) + + const onSettingsConnections = (data) => { if (data.action === 'update') { setSettings((prevState) => { const aux = [...prevState] @@ -468,10 +471,13 @@ const Connections = () => { return aux }) } - }) + } + + socket.on('settings', onSettingsConnections) return () => { - socket.disconnect() + socket.off("settings", onSettingsConnections) + socket.off("diskSpaceMonit", onDiskSpaceMonitConnections) } }, [])