Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 913 Rev 914
Línea 5... Línea 5...
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);
 7 
    const messagesLine = useRef(null);
8 
    const [isInit, setisInit] = useState(null);
 8 
    const [isInit, setisInit] = useState(null);
Línea 9... Línea 9...
9 
 
 9 
 
10 
    const handleGetMessages = () => {
 10 
    /* const handleGetMessages = () => {
11 
        if (!isInit) {
 11 
        if (!isInit) {
12 
            setisInit(true)
 12 
            setisInit(true)
13 
            console.log('Init')
 13 
            console.log('Init')
14 
        }
 14 
        }
15 
        if (isInit) {
 15 
        if (isInit) {
16 
            /* getMoreMessages() */
 16 
            getMoreMessages()
17 
            console.log('Getting')
 17 
            console.log('Getting')
18 
            setisInit(false)
 18 
            setisInit(false)
19 
        }
 19 
        }
Línea 20... Línea 20...
20 
    }
 20 
    } */
21 
 
 21 
 
- 
 
 22 
    useEffect(() => {
22 
    useEffect(() => {
 23 
        if (lastMessage.current) {
23 
        if (lastMessage.current) {
 24 
            setTimeout(() => {
24 
            const observer = new IntersectionObserver(handleGetMessages, {
 25 
                const observer = new IntersectionObserver(getMoreMessages, {
Línea 25... Línea 26...
25 
                rootMargin: '0px'
 26 
                    threshold: 1.0,
- 
 
 27 
                })
26 
            })
 28 
 
27 
 
 29 
                observer.observe(lastMessage.current)
Línea 28... Línea 30...
28 
            observer.observe(lastMessage.current)
 30 
            }, 1000)
29 
        }
 31 
        }
Línea 94... Línea 96...
94 
                            >
 96 
                            >
95 
                                {
 97 
                                {
96 
                                    (messages)
 98 
                                    (messages)
97 
                                    &&
 99 
                                    &&
98 
                                    (
 100 
                                    (
99 
                                        [...messages].reverse().map((element, i) => {
 101 
                                        messages.map((element, i) => {
100 
                                            const isLeft = element.side === 'left'
 102 
                                            const isLeft = element.side === 'left'
101 
                                            if (i === 0) {
 103 
                                            if (i === (messages.length - 1)) {
102 
                                                return (
 104 
                                                return (
103 
                                                    <div
 105 
                                                    <div
104 
                                                        className={`main-message-box ref ${!isLeft ? 'ta-right' : ''}`}
 106 
                                                        className={`main-message-box ref ${!isLeft ? 'ta-right' : ''}`}
105 
                                                        key={element.message}
 107 
                                                        key={element.message}
106 
                                                        ref={lastMessage}
 108 
                                                        ref={lastMessage}
Línea 125... Línea 127...
125 
                                                            <span>{element.date}</span>
 127 
                                                            <span>{element.date}</span>
126 
                                                        </div>
 128 
                                                        </div>
127 
                                                    </div>
 129 
                                                    </div>
128 
                                                )
 130 
                                                )
129 
                                            }
 131 
                                            }
130 
                                            if (i === messages.length - 1) {
 132 
                                            if (i === 0) {
131 
                                                return (
 133 
                                                return (
132 
                                                    <div
 134 
                                                    <div
133 
                                                        className={`main-message-box ${!isLeft ? 'ta-right' : ''}`}
 135 
                                                        className={`main-message-box ${!isLeft ? 'ta-right' : ''}`}
134 
                                                        key={element.message}
 136 
                                                        key={element.message}
135 
                                                        id='firstMessages'
 137 
                                                        id='firstMessages'