Proyectos de Subversion LeadersLinked - Antes de SPA

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

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

const ChatList = ({
    messages,
    selectedConversation,
    onSend,
    backendVars,
    getMoreMessages,
    handleShowConversation,
    loading
}) => {

    const messagesLine = useRef(null);

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

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

    return (
        <div className="main-conversation-box">
            {
                !selectedConversation
                    ?
                    <div className='message-select-conversation'>
                        <div className='msgs-select-container'>
                            <i className='fas fa-inbox icon' />
                            <h3>
                                Selecciona una conversación
                            </h3>
                        </div>
                    </div>
                    :
                    <>
                        <MessageBarHead
                            selectedConversation={selectedConversation}
                            handleShowConversation={handleShowConversation}
                        />
                        <div className="messages-line" ref={messagesLine}>

                            {
                                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>
                        <MessageBox
                            onSend={onSend}
                            backendVars={backendVars}
                        />
                    </>
            }
        </div>
    )
}

export default React.memo(ChatList, areEqual)