refactor: restantes das conexoes para a conexao ws global

websocket
willian-pessoa 2024-05-09 15:59:02 -03:00
parent 5981f9dd5e
commit dac57f9d48
11 changed files with 169 additions and 124 deletions

View File

@ -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)
socket.on('settings', (data) => {
const onSettingsStatusChatEndModal = (data) => {
if (data.action === 'update') {
setSettings((prevState) => {
const aux = [...prevState]
@ -102,10 +102,12 @@ const StatusChatEndModal = ({
return aux
})
}
})
}
socket.on('settings', onSettingsStatusChatEndModal)
return () => {
socket.disconnect()
socket.off("settings", onSettingsStatusChatEndModal)
}
}, [])

View File

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

View File

@ -17,7 +17,8 @@ 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"
@ -291,7 +292,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 })
@ -301,7 +302,7 @@ const Dashboard = () => {
})
setTicketStatusChatEnd(ticketStatusChatEndData.reportStatusChatEnd)
} catch (err) {
}
@ -356,46 +357,54 @@ const Dashboard = () => {
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
//const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
socket.on("ticketStatus", (data) => {
const onTicketsStatusDashboard = (data) => {
if (data.action === "update") {
setStatus("")
setStatus(data.ticketStatus.status)
}
})
}
socket.on("onlineStatus", (data) => {
socket.on("ticketStatus", onTicketsStatusDashboard)
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("user", (data) => {
socket.on("onlineStatus", onOnlineStatusDashboard)
const onUserDashboard = (data) => {
if (data.action === "delete") {
dispatch({ type: "DELETE_USER", payload: +data.userId })
}
})
}
socket.on("user", onUserDashboard)
return () => {
socket.disconnect()
socket.off("user", onUserDashboard)
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
@ -468,14 +477,14 @@ const Dashboard = () => {
</Typography>
</Grid>
<Grid style={{ display: 'flex', flexDirection: 'column', padding: '10px 0', alignItems: 'start' }}>
<SelectField
func={handleSelectedQueue}
textBoxFieldSelected={'All'}
emptyField={false}
header={'Filas'}
currencies={user.queues.map((obj) => {
return { 'value': obj.id, 'label': obj.name }
})} />
<SelectField
func={handleSelectedQueue}
textBoxFieldSelected={'All'}
emptyField={false}
header={'Filas'}
currencies={user.queues.map((obj) => {
return { 'value': obj.id, 'label': obj.name }
})} />
</Grid>
<Grid container spacing={3}>
<Grid item xs={12} sm={6} md={6} lg={4}>
@ -532,7 +541,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}>

View File

@ -1,5 +1,6 @@
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,
@ -125,9 +126,9 @@ const Position = () => {
}, [searchParam, pageNumber])
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
//const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
socket.on("position", (data) => {
const onPositionPosition = (data) => {
if (data.action === "update" || data.action === "create") {
dispatch({ type: "UPDATE_POSITIONS", payload: data.position })
}
@ -138,10 +139,12 @@ const Position = () => {
payload: +data.positionId,
})
}
})
}
socket.on("position", onPositionPosition)
return () => {
socket.disconnect()
socket.off("position", onPositionPosition)
}
}, [])

View File

@ -1,6 +1,7 @@
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,
@ -91,7 +92,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)
@ -120,12 +121,12 @@ const Queues = () => {
setLoading(false)
}
})()
}, [])
}, [])
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
//const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
socket.on('queue', (data) => {
const onQueueQueues = (data) => {
if (data.action === 'update' || data.action === 'create') {
dispatch({ type: 'UPDATE_QUEUES', payload: data.queue })
}
@ -133,9 +134,11 @@ const Queues = () => {
if (data.action === 'delete') {
dispatch({ type: 'DELETE_QUEUE', payload: data.queueId })
}
})
}
socket.on('settings', (data) => {
socket.on('queue', onQueueQueues)
const onSettingsQueues = (data) => {
if (data.action === 'update') {
setSettings((prevState) => {
const aux = [...prevState]
@ -144,10 +147,13 @@ const Queues = () => {
return aux
})
}
})
}
socket.on('settings', onSettingsQueues)
return () => {
socket.disconnect()
socket.off("settings", onSettingsQueues)
socket.off("queue", onQueueQueues)
}
}, [])

View File

@ -1,5 +1,6 @@
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,
@ -125,9 +126,9 @@ const QuickAnswers = () => {
}, [searchParam, pageNumber])
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
//const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
socket.on("quickAnswer", (data) => {
const onQuickAnswerQuickAnswers = (data) => {
if (data.action === "update" || data.action === "create") {
dispatch({ type: "UPDATE_QUICK_ANSWERS", payload: data.quickAnswer })
}
@ -138,10 +139,11 @@ const QuickAnswers = () => {
payload: +data.quickAnswerId,
})
}
})
}
socket.on("quickAnswer", onQuickAnswerQuickAnswers)
return () => {
socket.disconnect()
socket.off("quickAnswer", onQuickAnswerQuickAnswers)
}
}, [])

View File

@ -18,7 +18,8 @@ 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'
@ -239,7 +240,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' },
@ -381,10 +382,10 @@ const Report = () => {
const tickets = data.tickets.map(ticket => {
ticket.isRemote = ticket.isRemote ? 'Remoto' : 'Comum';
return ({
...ticket,
messagesToFilter: ticket.messages.map(message => message.body).join(' '),
link: `${process.env.REACT_APP_FRONTEND_URL}/tickets/${ticket.id}`
})
...ticket,
messagesToFilter: ticket.messages.map(message => message.body).join(' '),
link: `${process.env.REACT_APP_FRONTEND_URL}/tickets/${ticket.id}`
})
})
dispatchQ({ type: "LOAD_QUERY", payload: tickets })
setHasMore(data.hasMore)
@ -591,9 +592,9 @@ const Report = () => {
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
//const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
socket.on("queryOnQueueStatus", (data) => {
const onQueryOnQueueStatusReport = (data) => {
if (data.action === 'update') {
if (String(data.queryOnQueue.adminId) === String(userA.id)) {
@ -604,35 +605,39 @@ 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("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 })
}
})
socket.on("user", onUserReport)
}
else if (reportOption === "1") {
@ -641,7 +646,9 @@ const Report = () => {
}
return () => {
socket.disconnect()
socket.off("onlineStatus", onOnlineStatusReport)
socket.off("user", onUserReport)
socket.off("queryOnQueueStatus", onQueryOnQueueStatusReport)
}
@ -687,7 +694,7 @@ const Report = () => {
const renderSwitch = (param) => {
if(userA.profile !== 'supervisor'){
if (userA.profile !== 'supervisor') {
switch (param) {
case 'empty':
return (
@ -880,7 +887,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}

View File

@ -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,11 +204,9 @@ const SchedulesReminder = () => {
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
socket.on("schedulingNotify", (data) => {
//const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
const onSchedulingNotifySchedulesRemider = (data) => {
setLoading(true)
@ -228,10 +226,12 @@ const SchedulesReminder = () => {
setLoading(false)
})
}
socket.on("schedulingNotify", onSchedulingNotifySchedulesRemider)
return () => {
socket.disconnect()
socket.off("schedulingNotify", onSchedulingNotifySchedulesRemider)
}
}, [])
@ -300,9 +300,9 @@ const SchedulesReminder = () => {
useEffect(() => {
useEffect(() => {
if (!loading) {
if (!loading) {
setData(query.map(({ scheduleReminder, ...others }) => (
{

View File

@ -1,5 +1,6 @@
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'
@ -124,9 +125,9 @@ const Settings = () => {
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
//const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
socket.on('settings', (data) => {
const onSettingsSettings = (data) => {
console.log('settings updated ----------------------------')
if (data.action === 'update') {
@ -137,10 +138,12 @@ const Settings = () => {
return aux
})
}
})
}
socket.on('settings', onSettingsSettings)
return () => {
socket.disconnect()
socket.off("settings", onSettingsSettings)
}
}, [])
@ -641,7 +644,7 @@ const Settings = () => {
</Select>
</Paper>
</Container>
</div>
</div>
</div>
)}
/>

View File

@ -1,5 +1,6 @@
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,
@ -115,7 +116,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 })
@ -131,9 +132,9 @@ const StatusChatEnd = () => {
}, [searchParam, pageNumber])
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
//const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
socket.on("statusChatEnd", (data) => {
const onStatusChatEndStatusChatEnd = (data) => {
if (data.action === "update" || data.action === "create") {
dispatch({ type: "UPDATE_STATUS_CHAT_END", payload: data.statusChatEnd })
}
@ -144,10 +145,12 @@ const StatusChatEnd = () => {
payload: +data.statusChatEndId,
})
}
})
}
socket.on("statusChatEnd", onStatusChatEndStatusChatEnd)
return () => {
socket.disconnect()
socket.off("statusChatEnd", onStatusChatEndStatusChatEnd)
}
}, [])
@ -187,14 +190,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) {

View File

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