Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev Autor Línea Nro. Línea
1 www 1 
import React from 'react'
2 
 
747 stevensc 3 
export default ({ messages, selectedConversation, onSend, backendVars, getMoreMessages }) => {
1 www 4 
    const [text, setText] = React.useState('')
5 
    const handleScroll = (event) => {
6 
        const node = event.target;
747 stevensc 7 
        if (node.clientHeight >= (node.scrollHeight * .62)) {
1 www 8 
            getMoreMessages()
756 stevensc 9 
            console.log('Getting')
1 www 10 
        }
11 
    }
12 
    const paneDidMount = (node) => {
757 stevensc 13 
        console.log(node.target.scrollHeight)
747 stevensc 14 
        if (node) {
15 
            node.addEventListener("scroll", handleScroll.bind(this));
1 www 16 
        }
17 
    }
747 stevensc 18 
    console.log(messages)
19 
    return (
1 www 20 
        <React.Fragment>
21 
            <div className="main-conversation-box">
22 
                {
23 
                    !selectedConversation
747 stevensc 24 
                        ?
25 
                        <div className="message-bar-head">
26 
                            <div className="usr-mg-info">
27 
                                <h3>No hay mensajes</h3>
1 www 28 
                            </div>
747 stevensc 29 
                        </div>
30 
                        :
1 www 31 
                        <React.Fragment>
32 
                            <div
33 
                                className="message-bar-head"
34 
                                style={{
35 
                                    minHeight: '13vh'
36 
                                }}
37 
                            >
38 
                                <div className="usr-msg-details">
39 
                                    <div className="usr-ms-img">
40 
                                        <img src="images/resources/m-img1.png" alt="" />
41 
                                    </div>
42 
                                    <div className="usr-mg-info">
43 
                                        <h3>{selectedConversation.name}</h3>
44 
                                        <p>Online</p>
45 
                                    </div>
46 
                                </div>
47 
                                <div className="ed-opts">
48 
                                    <a href="#" title="" className="ed-opts-open"><i className="la la-ellipsis-v"></i></a>
49 
                                    <ul className="ed-options">
50 
                                        <li><a href="#" className="btn-clean-messages" title="">Limpiar </a></li>
51 
                                        <li><a href="#" className="btn-delete-conversation" title="">Borrar</a></li>
52 
                                        <li><a href="#" className="btn-block-user" title="">Bloquear</a></li>
53 
                                    </ul>
54 
                                </div>
55 
                            </div>
56 
                            <div
57 
                                className="messages-line overflow-auto"
58 
                                style={{
59 
                                    display: 'flex',
754 stevensc 60 
                                    flexDirection: 'column',
1 www 61 
                                    backgroundColor: 'white'
62 
                                }}
63 
                                ref={paneDidMount}
64 
                            >
65 
                                {
750 stevensc 66 
                                    (messages)
67 
                                    &&
68 
                                    (
754 stevensc 69 
                                        messages.reverse().map((element, i) => {
1 www 70 
                                            const isLeft = element.side === 'left'
747 stevensc 71 
                                            return (
1 www 72 
                                                <div
747 stevensc 73 
                                                    className={"main-message-box " + (isLeft ? 'st3' : 'ta-right')}
1 www 74 
                                                    key={element.message}
75 
                                                >
755 stevensc 76 
                                                    {/* {
1 www 77 
                                                        isLeft && (
78 
                                                            <div className="messg-usr-img">
79 
                                                                <img
80 
                                                                    src={element.sender_image}
81 
                                                                    onClick={() => window.location.href = element.sender_profile}
82 
                                                                    className="cursor-pointer"
83 
                                                                    alt={element.sender_name}
84 
                                                                />
85 
                                                            </div>
86 
                                                        )
755 stevensc 87 
                                                    } */}
88 
                                                    {/* <div
747 stevensc 89 
                                                        className="message-dt"
1 www 90 
                                                        style={
91 
                                                            {
747 stevensc 92 
                                                                padding: 0,
1 www 93 
                                                                //  display: 'flex',
747 stevensc 94 
                                                                justifyContent: isLeft ? 'flex-start' : 'flex-end',
95 
                                                                width: '85%',
96 
                                                                paddingLeft: isLeft ? '13%' : '40%',
97 
                                                                paddingRight: isLeft ? '40%' : 0
98 
                                                            }
99 
                                                        }
755 stevensc 100 
                                                    > */}
101 
                                                    <div
102 
                                                        className="message-dt"
1 www 103 
                                                    >
104 
                                                        <div
105 
                                                            className="message-inner-dt"
747 stevensc 106 
 
1 www 107 
                                                        >
108 
                                                            <p className='w-100'>{element.message}</p>
109 
                                                        </div>
110 
                                                        <span>{element.date}</span>
111 
                                                    </div>
755 stevensc 112 
                                                    {/* {
747 stevensc 113 
                                                        !isLeft && (
1 www 114 
                                                            <div className="messg-usr-img">
115 
                                                                <img
116 
                                                                    src={element.sender_image}
117 
                                                                    onClick={() => window.location.href = element.sender_profile}
118 
                                                                    className="cursor-pointer"
119 
                                                                    alt={element.sender_name}
120 
                                                                />
121 
                                                            </div>
122 
                                                        )
755 stevensc 123 
                                                    } */}
1 www 124 
                                                </div>
125 
                                            )
126 
                                        })
127 
                                    )
128 
                                }
129 
                            </div>
130 
                            <div className="message-send-area">
131 
                                <form id="form-send-message" name="form-send-message"
132 
                                    onSubmit={e => {
133 
                                        e.preventDefault()
134 
                                        onSend(text)
135 
                                        setText('')
136 
                                    }}
137 
                                >
138 
                                    <div className="mf-field">
139 
                                        <input
140 
                                            type="text"
141 
                                            name="message"
142 
                                            id="message"
143 
                                            value={text}
144 
                                            placeholder={backendVars.labelWriteMessage}
145 
                                            onChange={e => {
146 
                                                setText(e.target.value || '')
147 
                                            }}
148 
                                        />
149 
                                        <button type="submit">{backendVars.labelSend}</button>
150 
                                    </div>
151 
                                </form>
152 
                            </div>
153 
                        </React.Fragment>
154 
                }
155 
            </div>
156 
        </React.Fragment>
157 
    )
158 
}