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';

function areEqual(prevProps, nextProps) {
    return prevProps.messages.length === nextProps.messages.length
}

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 (
        <>
            <div className="main-conversation-box border-gray border-radius">
                {
                    !selectedConversation
                        ?
                        <div className='message-select-conversation'>
                            <div className='msgs-select-container'>
                                <i className='fas fa-messages icon text-gray' />
                                <h3>
                                    No hay mensajes
                                </h3>
                            </div>
                        </div>
                        :
                        <>
                            <MessageBarHead
                                selectedConversation={selectedConversation}
                                handleShowConversation={handleShowConversation}
                            />
                            <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} />
                            </div>
                        </>
                }
            </div>
            {
                !!selectedConversation && (
                    <MessageBox
                        onSend={onSend}
                        backendVars={backendVars}
                    />
                )
            }
        </>
    )
}