Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 4346 | Rev 4374 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |

/* eslint-disable react/prop-types */
import React, { useEffect, useRef } from 'react';
import MessageBox from './MessageBox';
import MessageTemplate from './MessageTemplate';

const Chatmail = ({
    messages,
    selectedConversation = null,
    onSend,
    backendVars,
    getMoreMessages,
    handleShowConversation,
    setMsgs
}) => {

    const lastMessage = useRef(null);

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

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

    if (selectedConversation) {
        <div className='message-select-conversation'>
            <div className='msgs-select-container'>
                <i className='fas fa-comments icon' />
                <h3>
                    No hay mensajes
                </h3>
            </div>
        </div>
    }

    return (
        <div className='chat'>
            <div className='w-100 icon-hide'>
                <span className='d-flex align-items-center mr-2 cursor-pointer' onClick={() => handleShowConversation(false)}>
                    <i className="fas fa-angle-left mr-2" />
                    Volver
                </span>
            </div>
            <a href={selectedConversation.profile}>
                <h2 className='chat-header'>
                    {selectedConversation.name}
                </h2>
            </a>
            <div className="messages-line">
                {messages.length
                    ? messages.map((element, index) => {
                        return (
                            <MessageTemplate
                                key={index}
                                message={element}
                                date={element.date}
                            />
                        )
                    })
                    :
                    <div className='message-select-conversation'>
                        <div className='msgs-select-container'> 
                            <i className='fas fa-inbox icon' />
                            <h3>No hay mensajes en esta conversación</h3>
                        </div>
                    </div>
                }
                <hr ref={lastMessage} style={{ visibility: 'hidden' }} />
            </div>
            <MessageBox
                setMsgs={setMsgs}
                onSend={onSend}
                backendVars={backendVars}
                sendLink={selectedConversation.send_link}
            />
        </div >
    )
}

export default Chatmail