Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 1749 | Rev 1751 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1748 stevensc 1 
import React, { useEffect, useRef } from 'react';
2 
import MessageBarHead from './MessageBarHead';
3 
import MessageBox from './MessageBox';
4 
import MessageTemplate from './MessageTemplate';
1 www 5 
 
1748 stevensc 6 
function areEqual(prevProps, nextProps) {
1749 stevensc 7 
    return prevProps.messages.length === nextProps.messages.length
1748 stevensc 8 
}
9 
 
10 
const ChatList = ({
11 
    messages,
12 
    selectedConversation,
13 
    onSend,
14 
    backendVars,
15 
    getMoreMessages,
1741 stevensc 16 
    handleShowConversation,
17 
    loading
18 
}) => {
835 stevensc 19 
 
1750 stevensc 20 
    const lastMessage = useRef(null);
765 stevensc 21 
 
853 stevensc 22 
    useEffect(() => {
917 stevensc 23 
        const observer = new IntersectionObserver(([entry]) => {
24 
            if (entry.isIntersecting) {
25 
                getMoreMessages()
26 
            }
27 
        })
28 
 
879 stevensc 29 
        if (lastMessage.current) {
915 stevensc 30 
            observer.observe(lastMessage.current)
876 stevensc 31 
        }
1748 stevensc 32 
    }, []);
876 stevensc 33 
 
747 stevensc 34 
    return (
1748 stevensc 35 
        <div className="main-conversation-box">
36 
            {
37 
                !selectedConversation
38 
                    ?
39 
                    <div className='message-select-conversation'>
40 
                        <div className='msgs-select-container'>
41 
                            <i className='fas fa-inbox icon' />
42 
                            <h3>
43 
                                Selecciona una conversación
44 
                            </h3>
811 stevensc 45 
                        </div>
1748 stevensc 46 
                    </div>
47 
                    :
48 
                    <>
49 
                        <MessageBarHead
50 
                            selectedConversation={selectedConversation}
51 
                            handleShowConversation={handleShowConversation}
52 
                        />
53 
                        <div className="messages-line" ref={messagesLine}>
54 
                            {
55 
                                messages.length
56 
                                    ?
57 
                                    messages.map((element, i) =>
58 
                                        <MessageTemplate
59 
                                            key={i}
60 
                                            message={element}
1 www 61 
                                        />
1748 stevensc 62 
                                    )
63 
                                    :
64 
                                    <div className='message-select-conversation'>
65 
                                        <div className='msgs-select-container'>
66 
                                            <i className='fas fa-inbox icon' />
67 
                                            <h3>No hay mensajes en esta conversación</h3>
68 
                                        </div>
1 www 69 
                                    </div>
1748 stevensc 70 
                            }
71 
                            <hr ref={lastMessage} />
72 
                        </div>
73 
                        <MessageBox
74 
                            onSend={onSend}
75 
                            backendVars={backendVars}
76 
                        />
77 
                    </>
78 
            }
79 
        </div>
1 www 80 
    )
1748 stevensc 81 
}
82 
 
83 
export default React.memo(ChatList, areEqual)