Proyectos de Subversion LeadersLinked - Backend

Rev

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

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