Rev 6977 | 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 useMessages from '../../hooks/useMessages'
import InboxIcon from '@mui/icons-material/Inbox'
import Chat from './Chat'
import EmptySection from '../UI/EmptySection'
import ConfirmModal from '../modals/ConfirmModal'
const InmailChat = ({ conversation, changeConversation }) => {
const [isShowConfirm, setIsShowConfirm] = useState(false)
const messagesList = useRef(null)
const options = useRef([])
const dispatch = useDispatch()
const { messages, loadMore, loading, reset } = useMessages(
conversation?.messages_link
)
const deleteConversation = () => {
axios.post(conversation.delete_link).then(({ data: response }) => {
const { success, data } = response
if (!success) {
dispatch(addNotification({ style: 'danger', msg: data }))
return
}
dispatch(addNotification({ style: 'success', msg: data }))
toggleConfirmModal()
changeConversation(null)
})
}
const toggleConfirmModal = () => {
setIsShowConfirm(!isShowConfirm)
}
useEffect(() => {
reset()
}, [conversation])
useEffect(() => {
const opt = []
if (conversation.delete_link) {
opt.push({ label: 'Borrar convesación', action: toggleConfirmModal })
}
options.current = opt
}, [conversation])
return (
<>
<Chat>
<Chat.Header
options={options.current}
onClose={() => changeConversation(null)}
>
<Chat.Title url={conversation.profile}>
{conversation.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={messagesList}
/>
)}
<Chat.SubmitForm
sendUrl={conversation.send_link}
uploadUrl={conversation.send_link}
onSubmit={() => scrollToBottom(messagesList)}
/>
</Chat>
<ConfirmModal
show={isShowConfirm}
onClose={toggleConfirmModal}
onAccept={deleteConversation}
/>
</>
)
}
export default InmailChat