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)

    }

    return () => {

      observer.unobserve()

    }

  }, [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