Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev Autor Línea Nro. Línea
3710 stevensc 1
/* eslint-disable react/prop-types */
2981 stevensc 2
import React, { useEffect, useRef } from 'react';
1748 stevensc 3
import MessageBox from './MessageBox';
4
import MessageTemplate from './MessageTemplate';
1 www 5
 
3074 stevensc 6
const Chatmail = ({
1748 stevensc 7
    messages,
4346 stevensc 8
    selectedConversation = null,
1748 stevensc 9
    onSend,
10
    backendVars,
11
    getMoreMessages,
1741 stevensc 12
    handleShowConversation,
3044 stevensc 13
    setMsgs
1741 stevensc 14
}) => {
835 stevensc 15
 
1750 stevensc 16
    const lastMessage = useRef(null);
765 stevensc 17
 
853 stevensc 18
    useEffect(() => {
917 stevensc 19
        const observer = new IntersectionObserver(([entry]) => {
20
            if (entry.isIntersecting) {
21
                getMoreMessages()
22
            }
23
        })
24
 
879 stevensc 25
        if (lastMessage.current) {
915 stevensc 26
            observer.observe(lastMessage.current)
876 stevensc 27
        }
1752 stevensc 28
    }, [messages]);
876 stevensc 29
 
4347 stevensc 30
    if (selectedConversation) {
31
        <div className='message-select-conversation'>
32
            <div className='msgs-select-container'>
33
                <i className='fas fa-comments icon' />
34
                <h3>
35
                    No hay mensajes
36
                </h3>
37
            </div>
38
        </div>
39
    }
40
 
747 stevensc 41
    return (
4346 stevensc 42
        <div className='chat'>
43
            <div className='w-100 icon-hide'>
44
                <span className='d-flex align-items-center mr-2 cursor-pointer' onClick={() => handleShowConversation(false)}>
45
                    <i className="fas fa-angle-left mr-2" />
46
                    Volver
47
                </span>
2747 stevensc 48
            </div>
4346 stevensc 49
            <a href={selectedConversation.profile}>
50
                <h2 className='chat-header'>
51
                    {selectedConversation.name}
52
                </h2>
53
            </a>
54
            <div className="messages-line">
55
                {messages.length
56
                    ? messages.map((element, index) => {
57
                        return (
58
                            <MessageTemplate
59
                                key={index}
60
                                message={element}
61
                                date={element.date}
62
                            />
63
                        )
64
                    })
65
                    :
66
                    <div className='message-select-conversation'>
67
                        <div className='msgs-select-container'>
68
                            <i className='fas fa-inbox icon' />
69
                            <h3>No hay mensajes en esta conversación</h3>
70
                        </div>
2748 stevensc 71
                    </div>
4346 stevensc 72
                }
73
                <hr ref={lastMessage} style={{ visibility: 'hidden' }} />
2747 stevensc 74
            </div>
4346 stevensc 75
            <MessageBox
76
                setMsgs={setMsgs}
77
                onSend={onSend}
78
                backendVars={backendVars}
79
                sendLink={selectedConversation.send_link}
80
            />
81
        </div >
1 www 82
    )
3074 stevensc 83
}
84
 
85
export default Chatmail