Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 1741 | Rev 1749 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 1741 Rev 1748
Línea 1... Línea 1...
1 
import React, { useEffect, useRef, useState } from 'react';
 1 
import React, { useEffect, useRef } from 'react';
- 
 
 2 
import MessageBarHead from './MessageBarHead';
2 
import { Spinner } from 'react-bootstrap';
 3 
import MessageBox from './MessageBox';
- 
 
 4 
import MessageTemplate from './MessageTemplate';
3 
 
 5 
 
- 
 
 6 
function areEqual(prevProps, nextProps) {
- 
 
 7 
    return prevProps.messages === nextProps.messages
- 
 
 8 
}
- 
 
 9 
 
4 
export default ({
10 
const ChatList = ({
5 
    messages,
11 
    messages,
6 
    selectedConversation,
12 
    selectedConversation,
7 
    onSend,
13 
    onSend,
8 
    backendVars,
14 
    backendVars,
9 
    getMoreMessages,
15 
    getMoreMessages,
10 
    handleShowConversation,
 16 
    handleShowConversation,
11 
    loading
 17 
    loading
12 
}) => {
 18 
}) => {
Línea 13... Línea -...
13 
 
 - 
 
14 
    const [text, setText] = useState('')
 - 
 
15 
    const [showOptions, setShowOptions] = useState(false)
 - 
 
16 
    const lastMessage = useRef(null);
 19 
 
Línea 17... Línea 20...
17 
    const messagesLine = useRef(null);
 20 
    const messagesLine = useRef(null);
18 
 
 21 
 
19 
    useEffect(() => {
 22 
    useEffect(() => {
20 
        const observer = new IntersectionObserver(([entry]) => {
 23 
        const observer = new IntersectionObserver(([entry]) => {
21 
            if (entry.isIntersecting) {
 24 
            if (entry.isIntersecting) {
22 
                getMoreMessages()
 - 
 
23 
            }
 - 
 
24 
        }, {
 25 
                getMoreMessages()
Línea 25... Línea 26...
25 
            rootMargin: '0px'
 26 
            }
26 
        })
 27 
        })
27 
 
 28 
 
28 
        if (lastMessage.current) {
 29 
        if (lastMessage.current) {
Línea 29... Línea 30...
29 
            observer.observe(lastMessage.current)
 30 
            observer.observe(lastMessage.current)
30 
        }
 - 
 
31 
    }, [messages]);
 31 
        }
32 
 
 32 
    }, []);
33 
    return (
 33 
 
34 
        <React.Fragment>
 34 
    return (
35 
            <div className="main-conversation-box">
 35 
        <div className="main-conversation-box">
36 
                {
 36 
            {
37 
                    !selectedConversation
 37 
                !selectedConversation
38 
                        ?
 38 
                    ?
39 
                        <div className='message-select-conversation'>
 39 
                    <div className='message-select-conversation'>
40 
                            <div className='msgs-select-container'>
 - 
 
41 
                                <i className='fas fa-inbox icon' />
 40 
                        <div className='msgs-select-container'>
42 
                                <h3>
 41 
                            <i className='fas fa-inbox icon' />
43 
                                    Selecciona una conversación
 42 
                            <h3>
44 
                                </h3>
 - 
 
45 
                            </div>
 - 
 
46 
                        </div>
 - 
 
47 
                        :
 43 
                                Selecciona una conversación
48 
                        <React.Fragment>
 - 
 
49 
                            <div className="message-bar-head">
 - 
 
50 
                                <div className="usr-msg-details">
 44 
                            </h3>
51 
                                    <i
 - 
 
52 
                                        className="fas fa-angle-left icon msgs-hide"
 - 
 
53 
                                        onClick={() => handleShowConversation(false)}
 45 
                        </div>
54 
                                    ></i>
 - 
 
55 
                                    <div className="usr-ms-img">
 46 
                    </div>
56 
                                        <img src={selectedConversation.image} alt={`${selectedConversation.name} avatars`} />
 - 
 
57 
                                    </div>
 - 
 
58 
                                    <div className="usr-mg-info">
 - 
 
59 
                                        <h3>{selectedConversation.name}</h3>
 47 
                    :
60 
                                        <p>Online</p>
 - 
 
61 
                                    </div>
 - 
 
62 
                                </div>
 - 
 
63 
                                <div className="ed-opts" onClick={() => setShowOptions(!showOptions)}>
 - 
 
64 
                                    <i className="la la-ellipsis-v icon"></i>
 - 
 
65 
                                    <ul className={showOptions ? "ed-options active" : "ed-options"}>
 - 
 
66 
                                        <li>
 - 
 
67 
                                            <a href="#" className="btn-clean-messages" title="">Limpiar </a>
 - 
 
68 
                                        </li>
 - 
 
69 
                                        <li>
 - 
 
70 
                                            <a href="#" className="btn-delete-conversation" title="">Borrar</a>
 - 
 
71 
                                        </li>
 - 
 
72 
                                        <li>
 - 
 
73 
                                            <a href="#" className="btn-block-user" title="">Bloquear</a>
 48 
                    <>
74 
                                        </li>
 - 
 
75 
                                    </ul>
 49 
                        <MessageBarHead
76 
                                </div>
 - 
 
77 
                            </div>
 - 
 
78 
                            <div
 - 
 
79 
                                className="messages-line"
 - 
 
80 
                                ref={messagesLine}
 - 
 
81 
                            >
 - 
 
82 
                                {
 - 
 
83 
                                    loading
 - 
 
84 
                                        ?
 - 
 
85 
                                        <Spinner />
 - 
 
86 
                                        :
 - 
 
87 
                                        (messages.length
 50 
                            selectedConversation={selectedConversation}
88 
                                            ?
 - 
 
89 
                                            [...messages].map((element) => {
 - 
 
90 
                                                const isLeft = element.side === 'left'
 - 
 
91 
 
 - 
 
92 
                                                return (
 - 
 
93 
                                                    <div
 - 
 
94 
                                                        className={`main-message-box ${!isLeft ? 'ta-right' : ''}`}
 - 
 
95 
                                                        key={element.message}
 - 
 
96 
                                                    >
 - 
 
97 
                                                        <div className="messg-usr-img">
 - 
 
98 
                                                            <a href={element.sender_profile}>
 - 
 
99 
                                                                <img
 - 
 
100 
                                                                    src={element.sender_image}
 - 
 
101 
                                                                    className="cursor-pointer"
 - 
 
102 
                                                                    alt={element.sender_name}
 - 
 
103 
                                                                />
 - 
 
104 
                                                            </a>
 - 
 
105 
                                                        </div>
 - 
 
106 
                                                        <div className="message-dt">
 - 
 
107 
                                                            <div className="message-inner-dt">
 - 
 
108 
                                                                <p className='w-100'>{element.message}</p>
 - 
 
109 
                                                            </div>
 - 
 
110 
                                                            <span>{element.date}</span>
 - 
 
111 
                                                        </div>
 - 
 
112 
                                                    </div>
 - 
 
113 
                                                )
 - 
 
114 
                                            })
 - 
 
115 
                                            :
 51 
                            handleShowConversation={handleShowConversation}
116 
                                            <div style={{ display: 'grid', placeItems: 'center', height: '100%' }}>
 - 
 
117 
                                                <h2>No hay mensajes en esta conversación</h2>
 - 
 
118 
                                            </div>)
 - 
 
119 
                                }
 - 
 
120 
                                <hr ref={lastMessage} />
 - 
 
121 
                            </div>
 - 
 
122 
                            <div className="message-send-area">
 52 
                        />
123 
                                <form id="form-send-message" name="form-send-message"
 - 
 
124 
                                    onSubmit={e => {
 53 
                        <div className="messages-line" ref={messagesLine}>
125 
                                        e.preventDefault()
 - 
 
126 
                                        onSend(text)
 54 
 
127 
                                        setText('')
 - 
 
128 
                                    }}
 - 
 
129 
                                >
 55 
                            {
130 
                                    <div className="mf-field">
 56 
                                messages.length
131 
                                        <input
 57 
                                    ?
132 
                                            type="text"
 - 
 
133 
                                            name="message"
 - 
 
134 
                                            id="message"
 58 
                                    messages.map((element, i) =>
- 
 
 59 
                                        <MessageTemplate
- 
 
 60 
                                            key={i}
- 
 
 61 
                                            message={element}
135 
                                            value={text}
 62 
                                        />
136 
                                            placeholder={backendVars.labelWriteMessage}
 63 
                                    )
137 
                                            onChange={e => setText(e.target.value || '')}
 64 
                                    :
138 
                                        />
 65 
                                    <div className='message-select-conversation'>
139 
                                        <button type="submit" className="btn-primary p-1">
 66 
                                        <div className='msgs-select-container'>
140 
                                            <i class="fas fa-paper-plane"></i>
 67 
                                            <i className='fas fa-inbox icon' />
- 
 
 68 
                                            <h3>No hay mensajes en esta conversación</h3>
141 
                                            {backendVars.labelSend}
 69 
                                        </div>
142 
                                        </button>
 70 
                                    </div>
- 
 
 71 
                            }
- 
 
 72 
                            <hr ref={lastMessage} />
- 
 
 73 
                        </div>
143 
                                    </div>
 74 
                        <MessageBox
144 
                                </form>
 75 
                            onSend={onSend}
145 
                            </div>
 76 
                            backendVars={backendVars}
146 
                        </React.Fragment>
 77 
                        />
147 
                }
 - 
 
148 
            </div>
 78 
                    </>
- 
 
 79 
            }
- 
 
 80 
        </div>
- 
 
 81 
    )
149 
        </React.Fragment>
 82 
}