Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 1242 | Rev 1734 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

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