Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect, useRef, useState } from 'react';
import MessageBarHead from './MessageBarHead';
import MessageBox from './MessageBox';
import MessageTemplate from './MessageTemplate';

export default ({
    messages,
    selectedConversation,
    onSend,
    backendVars,
    getMoreMessages,
    handleShowConversation,
    loading
}) => {

    const lastMessage = useRef(null);

    useEffect(() => {
        const observer = new IntersectionObserver(([entry]) => {
            if (entry.isIntersecting) {
                getMoreMessages()
            }
        }, {
            rootMargin: '0px'
        })

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

    return (
        !selectedConversation
            ?
            <div className="main-conversation-box border-gray border-radius">
                <div className='message-select-conversation'>
                    <div className='msgs-select-container'>
                        <i className='fas fa-comments icon text-gray' />
                        <h3>
                            No hay mensajes
                        </h3>
                    </div>
                </div>
            </div>
            :
            <div className='inmail-conversation-container'>
                <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>
                <div className="inmail-conversation-box border-gray border-radius">
                    <div className="py-3 mb-2 chat-header">
                        <a href={selectedConversation.profile}>
                            <h2>
                                {selectedConversation.name}
                            </h2>
                        </a>
                    </div>
                    <div className="messages-line">
                        {
                            messages.length
                                ?
                                messages.map((element, i) =>
                                    <MessageTemplate
                                        key={i}
                                        message={element}
                                    />
                                )
                                :
                                <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>
                </div>
                <MessageBox
                    onSend={onSend}
                    backendVars={backendVars}
                    sendLink={selectedConversation.send_link}
                />
            </div>

    )
}