Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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