Rev 7258 | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import React, { useEffect, useRef, useState } from 'react'
import { axios, scrollToBottom } from '../../utils'
import { useDispatch } from 'react-redux'
import { addNotification } from '../../redux/notification/notification.actions'
import InboxIcon from '@mui/icons-material/Inbox'
import Chat from './Chat'
import EmptySection from '../UI/EmptySection'
import ConferenceModal from '../modals/ConferenceModal'
import useMessages from '../../hooks/useMessages'
import ConfirmModal from '../modals/ConfirmModal'
const CHAT_TABS = {
CHAT: 'CHAT',
DEFAULT: 'DEFAULT',
GROUP_MEMBERS: 'GROUP_MEMBERS',
ADD_GROUP_MEMBER: 'ADD_GROUP_MEMBER',
}
const ChatBox = ({ entity, changeTab, changeConversation }) => {
const {
url_get_all_messages,
url_mark_received,
not_received_messages,
not_seen_messages,
url_zoom,
url_send,
url_upload,
url_mark_seen,
// url_close,
url_add_user_to_group, // Group url
url_delete, // Group url
url_get_contact_group_list, // Group url
url_leave, // Group url
name,
profile,
} = entity
const { messages, loadMore, loading, reset } =
useMessages(url_get_all_messages)
const [isShowConferenceModal, setisShowConferenceModal] = useState(false)
const [isShowConfirmModal, setisShowConfirmModal] = useState(false)
const [options, setOptions] = useState([])
const scrollRef = useRef(null)
const actionUrl = useRef('')
const dispatch = useDispatch()
const toggleConfirmModal = () => {
setisShowConfirmModal(!isShowConfirmModal)
}
const toggleConferenceModal = () => {
setisShowConferenceModal(!isShowConferenceModal)
}
const deleteGroup = async (url) => {
axios.post(url).then(({ data: response }) => {
const { data, success } = response
if (!success) {
const errorMessage =
typeof data.data === 'string' ? data.data : 'Ha ocurrido un error'
dispatch(addNotification({ style: 'danger', msg: errorMessage }))
return
}
toggleConfirmModal()
changeConversation(null)
changeTab(CHAT_TABS.DEFAULT)
})
}
useEffect(() => {
if (not_seen_messages) axios.post(url_mark_seen)
if (not_received_messages) axios.post(url_mark_received)
if (options.length) setOptions([])
reset()
}, [entity])
useEffect(() => {
if (url_leave) {
setOptions((prevOptions) =>
prevOptions.concat({
url: url_leave,
label: 'Dejar Grupo',
action: () => {
toggleConfirmModal()
actionUrl.current = url_leave
},
})
)
}
if (url_delete) {
setOptions((prevOptions) =>
prevOptions.concat({
url: url_delete,
label: 'Eliminar Grupo',
action: () => {
toggleConfirmModal()
actionUrl.current = url_delete
},
})
)
}
if (url_get_contact_group_list) {
setOptions((prevOptions) =>
prevOptions.concat({
url: url_get_contact_group_list,
label: 'Integrantes',
action: () => changeTab(CHAT_TABS.GROUP_MEMBERS),
})
)
}
if (url_add_user_to_group) {
setOptions((prevOptions) =>
prevOptions.concat({
url: url_add_user_to_group,
label: 'Agregar Contactos',
action: () => changeTab(CHAT_TABS.ADD_GROUP_MEMBER),
})
)
}
if (url_zoom) {
setOptions((prevOptions) =>
prevOptions.concat({
url: url_zoom,
label: 'Crear Conferencia',
action: toggleConferenceModal,
})
)
}
}, [entity])
return (
<>
<Chat>
<Chat.Header
onClose={() => changeTab(CHAT_TABS.DEFAULT)}
options={options}
>
<Chat.Title url={profile}>{name}</Chat.Title>
</Chat.Header>
{!messages.length ? (
<EmptySection
Icon={<InboxIcon />}
message="No hay mensajes en esta conversación"
align="center"
/>
) : (
<Chat.List
messages={messages}
onPagination={loadMore}
loading={loading}
scrollRef={scrollRef}
/>
)}
<Chat.SubmitForm
sendUrl={url_send}
uploadUrl={url_upload}
onSubmit={() => scrollToBottom(scrollRef)}
/>
</Chat>
<ConferenceModal
show={isShowConferenceModal}
zoomUrl={url_zoom}
onClose={toggleConferenceModal}
/>
<ConfirmModal
show={isShowConfirmModal}
onClose={toggleConfirmModal}
onAccept={() => deleteGroup(actionUrl.current)}
/>
</>
)
}
export default ChatBox