Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 907 Rev 909
Línea 24... Línea 24...
24 
 
 24 
 
25 
            observer.observe(lastMessage.current)
 25 
            observer.observe(lastMessage.current)
26 
        }
 26 
        }
Línea -... Línea 27...
- 
 
 27 
    }, [messages]);
- 
 
 28 
 
- 
 
 29 
    useEffect(() => {
- 
 
 30 
        const objDiv = document.getElementById('firstMessages');
- 
 
 31 
        objDiv.scrollTop = objDiv.scrollHeight;
27 
    }, [messages]);
 32 
    }, [messages]);
28 
 
 33 
 
29 
    return (
 34 
    return (
30 
        <React.Fragment>
 35 
        <React.Fragment>
31 
            <div className="main-conversation-box">
 36 
            <div className="main-conversation-box">
Línea 44... Línea 49...
44 
                                alignItems: 'center'
 49 
                                alignItems: 'center'
45 
                            }}>
 50 
                            }}>
46 
                                <i className='fas fa-inbox icon' style={{
 51 
                                <i className='fas fa-inbox icon' style={{
47 
                                    fontSize: '2.5rem',
 52 
                                    fontSize: '2.5rem',
48 
                                    marginBottom: '1rem'
 53 
                                    marginBottom: '1rem'
49 
                                }}/>
 54 
                                }} />
50 
                                <h3>
 55 
                                <h3>
51 
                                    Selecciona una conversación
 56 
                                    Selecciona una conversación
52 
                                </h3>
 57 
                                </h3>
53 
                            </div>
 58 
                            </div>
54 
                        </div>
 59 
                        </div>
Línea 84... Línea 89...
84 
                            >
 89 
                            >
85 
                                {
 90 
                                {
86 
                                    (messages)
 91 
                                    (messages)
87 
                                    &&
 92 
                                    &&
88 
                                    (
 93 
                                    (
89 
                                        messages.map((element, i) => {
 94 
                                        [...messages].reverse().map((element, i) => {
90 
                                            const isLeft = element.side === 'left'
 95 
                                            const isLeft = element.side === 'left'
91 
                                            return (
 96 
                                            if (i === 0) {
92 
                                                i === (messages.length - 1)
 - 
 
93 
                                                    ?
 97 
                                                return (
94 
                                                    <div
 98 
                                                    <div
95 
                                                        className={`main-message-box ref ${!isLeft ? 'ta-right' : ''}`}
 99 
                                                        className={`main-message-box ref ${!isLeft ? 'ta-right' : ''}`}
96 
                                                        key={element.message}
 100 
                                                        key={element.message}
97 
                                                        ref={lastMessage}
 101 
                                                        ref={lastMessage}
98 
                                                    >
 102 
                                                    >
Línea 114... Línea 118...
114 
                                                                <p className='w-100'>{element.message}</p>
 118 
                                                                <p className='w-100'>{element.message}</p>
115 
                                                            </div>
 119 
                                                            </div>
116 
                                                            <span>{element.date}</span>
 120 
                                                            <span>{element.date}</span>
117 
                                                        </div>
 121 
                                                        </div>
118 
                                                    </div>
 122 
                                                    </div>
119 
                                                    :
 123 
                                                )
- 
 
 124 
                                            }
- 
 
 125 
                                            if (i === messages.length - 1) {
- 
 
 126 
                                                return (
120 
                                                    <div
 127 
                                                    <div
121 
                                                        className={`main-message-box ${!isLeft ? 'ta-right' : ''}`}
 128 
                                                        className={`main-message-box ${!isLeft ? 'ta-right' : ''}`}
122 
                                                        key={element.message}
 129 
                                                        key={element.message}
- 
 
 130 
                                                        id='firstMessages'
123 
                                                    >
 131 
                                                    >
124 
                                                        <div className="messg-usr-img">
 132 
                                                        <div className="messg-usr-img">
125 
                                                            <img
 133 
                                                            <img
126 
                                                                src={element.sender_image}
 134 
                                                                src={element.sender_image}
127 
                                                                onClick={() => window.location.href = element.sender_profile}
 135 
                                                                onClick={() => window.location.href = element.sender_profile}
Línea 139... Línea 147...
139 
                                                                <p className='w-100'>{element.message}</p>
 147 
                                                                <p className='w-100'>{element.message}</p>
140 
                                                            </div>
 148 
                                                            </div>
141 
                                                            <span>{element.date}</span>
 149 
                                                            <span>{element.date}</span>
142 
                                                        </div>
 150 
                                                        </div>
143 
                                                    </div>
 151 
                                                    </div>
- 
 
 152 
                                                )
- 
 
 153 
                                            }
- 
 
 154 
                                            return (
- 
 
 155 
                                                <div
- 
 
 156 
                                                    className={`main-message-box ${!isLeft ? 'ta-right' : ''}`}
- 
 
 157 
                                                    key={element.message}
- 
 
 158 
                                                >
- 
 
 159 
                                                    <div className="messg-usr-img">
- 
 
 160 
                                                        <img
- 
 
 161 
                                                            src={element.sender_image}
- 
 
 162 
                                                            onClick={() => window.location.href = element.sender_profile}
- 
 
 163 
                                                            className="cursor-pointer"
- 
 
 164 
                                                            alt={element.sender_name}
- 
 
 165 
                                                        />
- 
 
 166 
                                                    </div>
- 
 
 167 
                                                    <div
- 
 
 168 
                                                        className="message-dt"
- 
 
 169 
                                                    >
- 
 
 170 
                                                        <div
- 
 
 171 
                                                            className="message-inner-dt"
- 
 
 172 
 
- 
 
 173 
                                                        >
- 
 
 174 
                                                            <p className='w-100'>{element.message}</p>
- 
 
 175 
                                                        </div>
- 
 
 176 
                                                        <span>{element.date}</span>
- 
 
 177 
                                                    </div>
- 
 
 178 
                                                </div>
144 
                                            )
 179 
                                            )
145 
                                        })
 180 
                                        }))
146 
                                    )
 - 
 
147 
                                }
 181 
                                }
- 
 
 182 
 
148 
                            </div>
 183 
                            </div>
149 
                            <div className="message-send-area">
 184 
                            <div className="message-send-area">
150 
                                <form id="form-send-message" name="form-send-message"
 185 
                                <form id="form-send-message" name="form-send-message"
151 
                                    onSubmit={e => {
 186 
                                    onSubmit={e => {
152 
                                        e.preventDefault()
 187 
                                        e.preventDefault()