Proyectos de Subversion LeadersLinked - SPA

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'

import MessagesList from './messages-list'

const InmailChat = ({ conversation, changeConversation }) => {

  const [isShowConfirm, setIsShowConfirm] = useState(false)

  const messagesList = useRef(null)

  const options = useRef([])

  const dispatch = useDispatch()

  const { messages, loadMore, loading, report } = 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(() => {

    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'

          />

        ) : (

          <MessagesList

            messages={messages}

            onReport={report}

            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