Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 917 Rev 918
Línea 3... Línea 3...
3 
export default ({ messages, selectedConversation, onSend, backendVars, getMoreMessages, handleShowConversation }) => {
 3 
export default ({ messages, selectedConversation, onSend, backendVars, getMoreMessages, handleShowConversation }) => {
Línea 4... Línea 4...
4 
 
 4 
 
5 
    const [text, setText] = useState('')
 5 
    const [text, setText] = useState('')
6 
    const lastMessage = useRef(null);
 6 
    const lastMessage = useRef(null);
7 
    const messagesLine = useRef(null);
 - 
 
8 
    const [isInit, setisInit] = useState(null);
 - 
 
9 
 
 - 
 
10 
    /* const handleGetMessages = () => {
 - 
 
11 
        if (!isInit) {
 - 
 
12 
            setisInit(true)
 - 
 
13 
            console.log('Init')
 - 
 
14 
        }
 - 
 
15 
        if (isInit) {
 - 
 
16 
            getMoreMessages()
 - 
 
17 
            console.log('Getting')
 - 
 
18 
            setisInit(false)
 - 
 
19 
        }
 - 
 
Línea 20... Línea 7...
20 
    } */
 7 
    const messagesLine = useRef(null);
21 
 
 8 
 
22 
    useEffect(() => {
 9 
    useEffect(() => {
23 
        const observer = new IntersectionObserver(([entry]) => {
 10 
        const observer = new IntersectionObserver(([entry]) => {
24 
            if (entry.isIntersecting) {
 11 
            if (entry.isIntersecting) {
25 
                getMoreMessages()
 12 
                getMoreMessages()
26 
            }
 13 
            }
27 
        }, {
 - 
 
28 
            rootMargin: '0px',
 14 
        }, {
Línea 29... Línea 15...
29 
            threshold: .8
 15 
            rootMargin: '0px'
30 
        })
 16 
        })
31 
 
 17 
 
32 
        if (lastMessage.current) {
 18 
        if (lastMessage.current) {
Línea 33... Línea 19...
33 
            observer.observe(lastMessage.current)
 19 
            observer.observe(lastMessage.current)
34 
        }
 20 
        }
35 
    }, [messages]);
 21 
    }, [messages]);
36 
 
 22 
 
37 
    useEffect(() => {
 23 
    /* useEffect(() => {
Línea 38... Línea 24...
38 
        if (messagesLine.current) {
 24 
        if (messagesLine.current) {
39 
            messagesLine.current.scrollTop = messagesLine.current.scrollHeight;
 25 
            messagesLine.current.scrollTop = messagesLine.current.scrollHeight;
40 
        }
 26 
        }
41 
    }, [messages]);
 27 
    }, [messages]); */
Línea 95... Línea 81...
95 
                            </div>
 81 
                            </div>
96 
                            <div
 82 
                            <div
97 
                                className="messages-line"
 83 
                                className="messages-line"
98 
                                ref={messagesLine}
 84 
                                ref={messagesLine}
99 
                            >
 85 
                            >
- 
 
 86 
                                <hr ref={lastMessage}/>
100 
                                {
 87 
                                {
101 
                                    (messages)
 88 
                                    (messages)
102 
                                    &&
 89 
                                    &&
103 
                                    (
 90 
                                    (
104 
                                        messages.map((element, i) => {
 91 
                                        messages.map((element, i) => {
105 
                                            const isLeft = element.side === 'left'
 92 
                                            const isLeft = element.side === 'left'
106 
                                            if (i === (messages.length - 1)) {
 - 
 
107 
                                                return (
 - 
 
108 
                                                    <div
 - 
 
109 
                                                        className={`main-message-box ref ${!isLeft ? 'ta-right' : ''}`}
 - 
 
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>
 - 
 
132 
                                                    </div>
 - 
 
133 
                                                )
 - 
 
134 
                                            }
 - 
 
135 
                                            if (i === 0) {
 - 
 
136 
                                                return (
 - 
 
137 
                                                    <div
 - 
 
138 
                                                        className={`main-message-box ${!isLeft ? 'ta-right' : ''}`}
 - 
 
139 
                                                        key={element.message}
 - 
 
140 
                                                        id='firstMessages'
 - 
 
141 
                                                    >
 - 
 
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>
 - 
 
150 
                                                        <div
 - 
 
151 
                                                            className="message-dt"
 - 
 
152 
                                                        >
 - 
 
153 
                                                            <div
 - 
 
154 
                                                                className="message-inner-dt"
 - 
 
155 
 
 - 
 
156 
                                                            >
 - 
 
157 
                                                                <p className='w-100'>{element.message}</p>
 - 
 
158 
                                                            </div>
 - 
 
159 
                                                            <span>{element.date}</span>
 - 
 
160 
                                                        </div>
 - 
 
161 
                                                    </div>
 - 
 
162 
                                                )
 - 
 
163 
                                            }
 - 
 
164 
                                            return (
 93 
                                            return (
165 
                                                <div
 94 
                                                <div
166 
                                                    className={`main-message-box ${!isLeft ? 'ta-right' : ''}`}
 95 
                                                    className={`main-message-box ${!isLeft ? 'ta-right' : ''}`}
167 
                                                    key={element.message}
 96 
                                                    key={element.message}
168 
                                                >
 97 
                                                >
Línea 185... Línea 114...
185 
                                                        </div>
 114 
                                                        </div>
186 
                                                        <span>{element.date}</span>
 115 
                                                        <span>{element.date}</span>
187 
                                                    </div>
 116 
                                                    </div>
188 
                                                </div>
 117 
                                                </div>
189 
                                            )
 118 
                                            )
- 
 
 119 
                                        }
190 
                                        }))
 120 
                                        ))
191 
                                }
 121 
                                }
Línea 192... Línea 122...
192 
 
 122 
 
193 
                            </div>
 123 
                            </div>
194 
                            <div className="message-send-area">
 124 
                            <div className="message-send-area">