Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */

import React, { useEffect, useRef, useState } from 'react'

import { ArrowLeft } from '@mui/icons-material'

import { useDispatch } from 'react-redux'

import { addNotification } from '../../redux/notification/notification.actions'

import { axios, scrollToBottom } from '../../utils'

import { fetchMessages, getMessagesDifferences } from '../../services/chat'

import QuestionAnswerRoundedIcon from '@mui/icons-material/QuestionAnswerRounded'

import SpeakerNotesOffRoundedIcon from '@mui/icons-material/SpeakerNotesOffRounded'

import EmptySection from '../../shared/empty-section/EmptySection'

import MessageBox from './MessageBox'

import MessageTemplate from './MessageTemplate'

import ConfirmModal from '../../shared/confirm-modal/ConfirmModal'

import IconButton from '@mui/material/IconButton'

import MoreVertIcon from '@mui/icons-material/MoreVert'

const DEFAULT_PAGES = { current: 1, last: 1 }

const Chatmail = ({

  selectedConversation = null,

  setConversation = () => null,

}) => {

  const [oldMessages, setOldMessages] = useState([])

  const [messages, setMessages] = useState([])

  const [pages, setPages] = useState(DEFAULT_PAGES)

  const [loading, setLoading] = useState(false)

  const [displayOptions, setDisplayOptions] = useState(false)

  const [isShowConfirm, setIsShowConfirm] = useState(false)

  const lastMessage = useRef(null)

  const messagesList = useRef(null)

  const dispatch = useDispatch()

  const getMoreMessages = async (url = '', page = pages.current) => {

    try {

      setLoading(true)

      const response = await fetchMessages(url, page)

      if (!response.success) {

        const errorMessage = response.data

        dispatch(

          addNotification({ style: 'danger', msg: errorMessage.message })

        )

        return

      }

      if (response.pagination.current > 1) {

        setOldMessages((prevOldMessages) => [

          ...prevOldMessages,

          ...response.data,

        ])

      }

      setPages((prevPages) => ({

        ...prevPages,

        last: response.pagination.last,

      }))

      return

    } catch (error) {

      const errorMessage = new Error(error)

      console.log('Request canceled', errorMessage)

    } finally {

      setLoading(false)

    }

  }

  const hearBeat = async () => {

    try {

      setLoading(true)

      const response = await fetchMessages(

        selectedConversation.messages_link,

        1

      )

      if (!response.success) {

        const errorMessage = response.data

        dispatch(

          addNotification({ style: 'danger', msg: errorMessage.message })

        )

        return

      }

      const newMessages = getMessagesDifferences(messages, response.data)

      if (newMessages.length) {

        setMessages([...newMessages, ...messages])

        scrollToBottom()

      } else {

        setMessages(response.data)

      }

      setPages((prevPages) => ({

        ...prevPages,

        last: response.pagination.last,

      }))

    } catch (error) {

      const errorMessage = new Error(error)

      console.log('Request canceled', errorMessage)

    } finally {

      setLoading(false)

    }

  }

  const handleSend = async (sendUrl = '', message = {}) => {

    try {

      const formData = new FormData()

      Object.entries(message).forEach(([key, value]) =>

        formData.append(key, value)

      )

      const { data: response } = await axios.post(sendUrl, formData)

      setMessages((prev) => [response.data, ...prev])

    } catch (error) {

      const errorMessage = new Error(error)

      dispatch(addNotification({ style: 'danger', msg: errorMessage.message }))

    }

  }

  const loadMore = async () => {

    setPages((prevPages) => ({ ...prevPages, current: prevPages.current + 1 }))

  }

  const toggleConfirmModal = () => {

    setIsShowConfirm(!isShowConfirm)

  }

  const deleteConversation = () => {

    axios.post(selectedConversation.delete_link).then(({ data: response }) => {

      const { success, data } = response

      if (!success) {

        dispatch(addNotification({ style: 'danger', msg: data }))

        return

      }

      dispatch(addNotification({ style: 'success', msg: data }))

      setConversation(null)

    })

  }

  useEffect(() => {

    if (!loading && selectedConversation) setTimeout(() => hearBeat(), 3000)

  }, [loading, selectedConversation])

  useEffect(() => {

    if (messages) setMessages([])

    scrollToBottom(messagesList)

    setPages(DEFAULT_PAGES)

  }, [selectedConversation])

  useEffect(() => {

    if (selectedConversation)

      getMoreMessages(selectedConversation?.messages_link, pages.current)

  }, [pages.current])

  useEffect(() => {

    const observer = new IntersectionObserver(([entry]) => {

      if (entry.isIntersecting) {

        loadMore()

      }

    })

    if (lastMessage.current) {

      observer.observe(lastMessage.current)

    }

  }, [messages])

  if (!selectedConversation) {

    return (

      <EmptySection

        message={LABELS.SELECT_CONVERSATION}

        Icon={<QuestionAnswerRoundedIcon />}

      />

    )

  }

  return (

    <>

      <div className="chat">

        <span className="icon-hide" onClick={() => setConversation(null)}>

          <ArrowLeft />

          {LABELS.RETURN}

        </span>

        <div className="chat_header">

          <a href={selectedConversation.profile}>

            <h2 className="chat-header">{selectedConversation.name}</h2>

          </a>

          <div className="header-options">

            <IconButton onClick={() => setDisplayOptions(!displayOptions)}>

              <MoreVertIcon />

            </IconButton>

            <div className="position-relative">

              <div className={`feed-options ${displayOptions ? 'active' : ''}`}>

                <ul>

                  <li>

                    <button className="option-btn" onClick={toggleConfirmModal}>

                      <i className="fa fa-trash-o mr-1" />

                      Borrar

                    </button>

                  </li>

                </ul>

              </div>

            </div>

          </div>

        </div>

        <div className="messages-line" ref={messagesList}>

          {messages.length ? (

            [...oldMessages, ...messages].map((element, index) => (

              <MessageTemplate

                key={index}

                message={element}

                date={element.date}

              />

            ))

          ) : (

            <EmptySection

              message={LABELS.NO_MESSAGE_CONVERSATION}

              Icon={<SpeakerNotesOffRoundedIcon />}

            />

          )}

          {pages.current < pages.last && (

            <hr ref={lastMessage} style={{ opacity: 0, margin: 0 }} />

          )}

        </div>

        <MessageBox

          onSend={handleSend}

          sendUrl={selectedConversation.send_link}

        />

      </div>

      <ConfirmModal

        show={isShowConfirm}

        onClose={toggleConfirmModal}

        onAccept={deleteConversation}

        acceptLabel="Aceptar"

      />

    </>

  )

}

export default Chatmail