Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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