Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev Autor Línea Nro. Línea
865 stevensc 1 
import React, { useEffect, useRef, useState } from 'react'
1 www 2 
 
913 stevensc 3 
export default ({ messages, selectedConversation, onSend, backendVars, getMoreMessages, handleShowConversation }) => {
835 stevensc 4 
 
836 stevensc 5 
    const [text, setText] = useState('')
871 stevensc 6 
    const lastMessage = useRef(null);
913 stevensc 7 
    const messagesLine = useRef(null);
905 stevensc 8 
    const [isInit, setisInit] = useState(null);
765 stevensc 9 
 
914 stevensc 10 
    /* const handleGetMessages = () => {
905 stevensc 11 
        if (!isInit) {
12 
            setisInit(true)
913 stevensc 13 
            console.log('Init')
905 stevensc 14 
        }
15 
        if (isInit) {
914 stevensc 16 
            getMoreMessages()
913 stevensc 17 
            console.log('Getting')
905 stevensc 18 
            setisInit(false)
19 
        }
914 stevensc 20 
    } */
905 stevensc 21 
 
853 stevensc 22 
    useEffect(() => {
917 stevensc 23 
        const observer = new IntersectionObserver(([entry]) => {
24 
            if (entry.isIntersecting) {
25 
                getMoreMessages()
26 
            }
27 
        }, {
28 
            rootMargin: '0px',
29 
            threshold: .8
30 
        })
31 
 
879 stevensc 32 
        if (lastMessage.current) {
915 stevensc 33 
            observer.observe(lastMessage.current)
876 stevensc 34 
        }
35 
    }, [messages]);
36 
 
909 stevensc 37 
    useEffect(() => {
913 stevensc 38 
        if (messagesLine.current) {
39 
            messagesLine.current.scrollTop = messagesLine.current.scrollHeight;
910 stevensc 40 
        }
909 stevensc 41 
    }, [messages]);
42 
 
747 stevensc 43 
    return (
1 www 44 
        <React.Fragment>
45 
            <div className="main-conversation-box">
46 
                {
47 
                    !selectedConversation
747 stevensc 48 
                        ?
899 stevensc 49 
                        <div style={{
50 
                            display: 'grid',
51 
                            placeItems: 'center',
901 stevensc 52 
                            width: '100%',
53 
                            height: '100%'
899 stevensc 54 
                        }}>
55 
                            <div style={{
56 
                                display: 'flex',
57 
                                flexDirection: 'column',
58 
                                alignItems: 'center'
59 
                            }}>
901 stevensc 60 
                                <i className='fas fa-inbox icon' style={{
61 
                                    fontSize: '2.5rem',
62 
                                    marginBottom: '1rem'
909 stevensc 63 
                                }} />
899 stevensc 64 
                                <h3>
65 
                                    Selecciona una conversación
66 
                                </h3>
811 stevensc 67 
                            </div>
68 
                        </div>
747 stevensc 69 
                        :
1 www 70 
                        <React.Fragment>
71 
                            <div
72 
                                className="message-bar-head"
73 
                            >
74 
                                <div className="usr-msg-details">
836 stevensc 75 
                                    <i
904 stevensc 76 
                                        className="fas fa-angle-left icon msgs-hide"
845 stevensc 77 
                                        onClick={() => handleShowConversation(false)}
835 stevensc 78 
                                    ></i>
1 www 79 
                                    <div className="usr-ms-img">
778 stevensc 80 
                                        <img src={selectedConversation.image} alt={`${selectedConversation.name} avatars`} />
1 www 81 
                                    </div>
82 
                                    <div className="usr-mg-info">
83 
                                        <h3>{selectedConversation.name}</h3>
84 
                                        <p>Online</p>
85 
                                    </div>
86 
                                </div>
87 
                                <div className="ed-opts">
828 stevensc 88 
                                    <i className="la la-ellipsis-v icon"></i>
1 www 89 
                                    <ul className="ed-options">
90 
                                        <li><a href="#" className="btn-clean-messages" title="">Limpiar </a></li>
91 
                                        <li><a href="#" className="btn-delete-conversation" title="">Borrar</a></li>
92 
                                        <li><a href="#" className="btn-block-user" title="">Bloquear</a></li>
93 
                                    </ul>
94 
                                </div>
95 
                            </div>
96 
                            <div
835 stevensc 97 
                                className="messages-line"
913 stevensc 98 
                                ref={messagesLine}
1 www 99 
                            >
100 
                                {
750 stevensc 101 
                                    (messages)
102 
                                    &&
103 
                                    (
914 stevensc 104 
                                        messages.map((element, i) => {
1 www 105 
                                            const isLeft = element.side === 'left'
914 stevensc 106 
                                            if (i === (messages.length - 1)) {
909 stevensc 107 
                                                return (
873 stevensc 108 
                                                    <div
890 stevensc 109 
                                                        className={`main-message-box ref ${!isLeft ? 'ta-right' : ''}`}
873 stevensc 110 
                                                        key={element.message}
111 
                                                        ref={lastMessage}
112 
                                                    >
113 
                                                        <div className="messg-usr-img">
114 
                                                            <img
115 
                                                                src={element.sender_image}
116 
                                                                onClick={() => window.location.href = element.sender_profile}
117 
                                                                className="cursor-pointer"
118 
                                                                alt={element.sender_name}
119 
                                                            />
120 
                                                        </div>
121 
                                                        <div
122 
                                                            className="message-dt"
123 
                                                        >
124 
                                                            <div
125 
                                                                className="message-inner-dt"
126 
 
127 
                                                            >
128 
                                                                <p className='w-100'>{element.message}</p>
129 
                                                            </div>
130 
                                                            <span>{element.date}</span>
131 
                                                        </div>
780 stevensc 132 
                                                    </div>
909 stevensc 133 
                                                )
134 
                                            }
914 stevensc 135 
                                            if (i === 0) {
909 stevensc 136 
                                                return (
755 stevensc 137 
                                                    <div
875 stevensc 138 
                                                        className={`main-message-box ${!isLeft ? 'ta-right' : ''}`}
873 stevensc 139 
                                                        key={element.message}
909 stevensc 140 
                                                        id='firstMessages'
1 www 141 
                                                    >
873 stevensc 142 
                                                        <div className="messg-usr-img">
143 
                                                            <img
144 
                                                                src={element.sender_image}
145 
                                                                onClick={() => window.location.href = element.sender_profile}
146 
                                                                className="cursor-pointer"
147 
                                                                alt={element.sender_name}
148 
                                                            />
149 
                                                        </div>
1 www 150 
                                                        <div
873 stevensc 151 
                                                            className="message-dt"
152 
                                                        >
153 
                                                            <div
154 
                                                                className="message-inner-dt"
747 stevensc 155 
 
873 stevensc 156 
                                                            >
157 
                                                                <p className='w-100'>{element.message}</p>
158 
                                                            </div>
159 
                                                            <span>{element.date}</span>
1 www 160 
                                                        </div>
161 
                                                    </div>
909 stevensc 162 
                                                )
163 
                                            }
164 
                                            return (
165 
                                                <div
166 
                                                    className={`main-message-box ${!isLeft ? 'ta-right' : ''}`}
167 
                                                    key={element.message}
168 
                                                >
169 
                                                    <div className="messg-usr-img">
170 
                                                        <img
171 
                                                            src={element.sender_image}
172 
                                                            onClick={() => window.location.href = element.sender_profile}
173 
                                                            className="cursor-pointer"
174 
                                                            alt={element.sender_name}
175 
                                                        />
176 
                                                    </div>
177 
                                                    <div
178 
                                                        className="message-dt"
179 
                                                    >
180 
                                                        <div
181 
                                                            className="message-inner-dt"
182 
 
183 
                                                        >
184 
                                                            <p className='w-100'>{element.message}</p>
185 
                                                        </div>
186 
                                                        <span>{element.date}</span>
187 
                                                    </div>
188 
                                                </div>
1 www 189 
                                            )
909 stevensc 190 
                                        }))
1 www 191 
                                }
909 stevensc 192 
 
1 www 193 
                            </div>
194 
                            <div className="message-send-area">
195 
                                <form id="form-send-message" name="form-send-message"
196 
                                    onSubmit={e => {
197 
                                        e.preventDefault()
198 
                                        onSend(text)
199 
                                        setText('')
200 
                                    }}
201 
                                >
202 
                                    <div className="mf-field">
203 
                                        <input
204 
                                            type="text"
205 
                                            name="message"
206 
                                            id="message"
207 
                                            value={text}
208 
                                            placeholder={backendVars.labelWriteMessage}
209 
                                            onChange={e => {
210 
                                                setText(e.target.value || '')
211 
                                            }}
212 
                                        />
808 stevensc 213 
                                        <button type="submit">
809 stevensc 214 
                                            <i class="fas fa-paper-plane"></i>
808 stevensc 215 
                                            {backendVars.labelSend}
216 
                                        </button>
1 www 217 
                                    </div>
218 
                                </form>
219 
                            </div>
220 
                        </React.Fragment>
221 
                }
222 
            </div>
223 
        </React.Fragment>
224 
    )
225 
}