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)
}
}, [])