Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useEffect, useRef } from 'react'
import EmptySection from '../../shared/empty-section/EmptySection'
import MessageBox from './MessageBox'
import MessageTemplate from './MessageTemplate'
import SpeakerNotesOffRoundedIcon from '@mui/icons-material/SpeakerNotesOffRounded'
import QuestionAnswerRoundedIcon from '@mui/icons-material/QuestionAnswerRounded'

const Chatmail = ({
  selectedConversation = null,
  messages = [],
  setConversation = () => { },
  getMoreMessages = () => { },
  onSend = () => { }
}) => {
  const lastMessage = useRef(null)

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        getMoreMessages()
      }
    })

    if (lastMessage.current) {
      observer.observe(lastMessage.current)
    }
  }, [messages])

  if (!selectedConversation) {
    return <EmptySection message={LABELS.SELECT_CONVERSATION} Icon={<QuestionAnswerRoundedIcon/>} />
  }

  return (
    <div className='chat'>
      <div className='icon-hide' onClick={() => setConversation(null)}>
        <i className="fas fa-angle-left" />
        <span>{LABELS.RETURN}</span>
      </div>
      <a href={selectedConversation.profile}>
        <h2 className='chat-header'>{selectedConversation.name}</h2>
      </a>
      <div className="messages-line">
        {messages.length
          ? messages.map((element, index) =>
            <MessageTemplate
              key={index}
              message={element}
              date={element.date}
            />)
          : <EmptySection message={LABELS.NO_MESSAGE_CONVERSATION} Icon={<SpeakerNotesOffRoundedIcon/>} />
        }
        <hr ref={lastMessage} style={{ visibility: 'hidden' }} />
      </div>
      <MessageBox onSend={onSend} sendUrl={selectedConversation.send_link}/>
    </div>
  )
}

export default Chatmail