Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 920 | Rev 922 | 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);
765 stevensc 8 
 
853 stevensc 9 
    useEffect(() => {
917 stevensc 10 
        const observer = new IntersectionObserver(([entry]) => {
11 
            if (entry.isIntersecting) {
12 
                getMoreMessages()
13 
            }
14 
        }, {
918 stevensc 15 
            rootMargin: '0px'
917 stevensc 16 
        })
17 
 
879 stevensc 18 
        if (lastMessage.current) {
915 stevensc 19 
            observer.observe(lastMessage.current)
876 stevensc 20 
        }
21 
    }, [messages]);
22 
 
919 stevensc 23 
    useEffect(() => {
913 stevensc 24 
        if (messagesLine.current) {
919 stevensc 25 
            messagesLine.current.scrollTop = messagesLine.current.scrollHeight
921 stevensc 26 
            console.log(messagesLine.current.scrollHeight)
910 stevensc 27 
        }
921 stevensc 28 
    }, [selectedConversation]);
909 stevensc 29 
 
747 stevensc 30 
    return (
1 www 31 
        <React.Fragment>
32 
            <div className="main-conversation-box">
33 
                {
34 
                    !selectedConversation
747 stevensc 35 
                        ?
899 stevensc 36 
                        <div style={{
37 
                            display: 'grid',
38 
                            placeItems: 'center',
901 stevensc 39 
                            width: '100%',
40 
                            height: '100%'
899 stevensc 41 
                        }}>
42 
                            <div style={{
43 
                                display: 'flex',
44 
                                flexDirection: 'column',
45 
                                alignItems: 'center'
46 
                            }}>
901 stevensc 47 
                                <i className='fas fa-inbox icon' style={{
48 
                                    fontSize: '2.5rem',
49 
                                    marginBottom: '1rem'
909 stevensc 50 
                                }} />
899 stevensc 51 
                                <h3>
52 
                                    Selecciona una conversación
53 
                                </h3>
811 stevensc 54 
                            </div>
55 
                        </div>
747 stevensc 56 
                        :
1 www 57 
                        <React.Fragment>
58 
                            <div
59 
                                className="message-bar-head"
60 
                            >
61 
                                <div className="usr-msg-details">
836 stevensc 62 
                                    <i
904 stevensc 63 
                                        className="fas fa-angle-left icon msgs-hide"
845 stevensc 64 
                                        onClick={() => handleShowConversation(false)}
835 stevensc 65 
                                    ></i>
1 www 66 
                                    <div className="usr-ms-img">
778 stevensc 67 
                                        <img src={selectedConversation.image} alt={`${selectedConversation.name} avatars`} />
1 www 68 
                                    </div>
69 
                                    <div className="usr-mg-info">
70 
                                        <h3>{selectedConversation.name}</h3>
71 
                                        <p>Online</p>
72 
                                    </div>
73 
                                </div>
74 
                                <div className="ed-opts">
828 stevensc 75 
                                    <i className="la la-ellipsis-v icon"></i>
1 www 76 
                                    <ul className="ed-options">
77 
                                        <li><a href="#" className="btn-clean-messages" title="">Limpiar </a></li>
78 
                                        <li><a href="#" className="btn-delete-conversation" title="">Borrar</a></li>
79 
                                        <li><a href="#" className="btn-block-user" title="">Bloquear</a></li>
80 
                                    </ul>
81 
                                </div>
82 
                            </div>
83 
                            <div
835 stevensc 84 
                                className="messages-line"
913 stevensc 85 
                                ref={messagesLine}
1 www 86 
                            >
87 
                                {
750 stevensc 88 
                                    (messages)
89 
                                    &&
90 
                                    (
919 stevensc 91 
                                        [...messages].reverse().map((element, i) => {
1 www 92 
                                            const isLeft = element.side === 'left'
909 stevensc 93 
                                            return (
94 
                                                <div
95 
                                                    className={`main-message-box ${!isLeft ? 'ta-right' : ''}`}
96 
                                                    key={element.message}
97 
                                                >
98 
                                                    <div className="messg-usr-img">
99 
                                                        <img
100 
                                                            src={element.sender_image}
101 
                                                            onClick={() => window.location.href = element.sender_profile}
102 
                                                            className="cursor-pointer"
103 
                                                            alt={element.sender_name}
104 
                                                        />
105 
                                                    </div>
106 
                                                    <div
107 
                                                        className="message-dt"
108 
                                                    >
109 
                                                        <div
110 
                                                            className="message-inner-dt"
111 
 
112 
                                                        >
113 
                                                            <p className='w-100'>{element.message}</p>
114 
                                                        </div>
115 
                                                        <span>{element.date}</span>
116 
                                                    </div>
117 
                                                </div>
1 www 118 
                                            )
918 stevensc 119 
                                        }
120 
                                        ))
1 www 121 
                                }
909 stevensc 122 
 
1 www 123 
                            </div>
124 
                            <div className="message-send-area">
125 
                                <form id="form-send-message" name="form-send-message"
126 
                                    onSubmit={e => {
127 
                                        e.preventDefault()
128 
                                        onSend(text)
129 
                                        setText('')
130 
                                    }}
131 
                                >
132 
                                    <div className="mf-field">
133 
                                        <input
134 
                                            type="text"
135 
                                            name="message"
136 
                                            id="message"
137 
                                            value={text}
138 
                                            placeholder={backendVars.labelWriteMessage}
139 
                                            onChange={e => {
140 
                                                setText(e.target.value || '')
141 
                                            }}
142 
                                        />
808 stevensc 143 
                                        <button type="submit">
809 stevensc 144 
                                            <i class="fas fa-paper-plane"></i>
808 stevensc 145 
                                            {backendVars.labelSend}
146 
                                        </button>
1 www 147 
                                    </div>
148 
                                </form>
149 
                            </div>
150 
                        </React.Fragment>
151 
                }
152 
            </div>
153 
        </React.Fragment>
154 
    )
155 
}