Proyectos de Subversion LeadersLinked - Antes de SPA

import React from 'react'

export default ({messages, selectedConversation, onSend, backendVars, getMoreMessages}) => {
    const [text, setText] = React.useState('')
    const handleScroll = (event) => {
        const node = event.target;
        if(node.clientHeight >= (node.scrollHeight * .62)){
            getMoreMessages()
        }
    }
    const paneDidMount = (node) => {
        if(node) {      
            node.addEventListener("scroll", handleScroll.bind(this));      
        }
    }
    return(
        <React.Fragment>
            <div className="main-conversation-box">
                {
                    !selectedConversation
                    ?
                            <div className="message-bar-head">
                                <div className="usr-mg-info">
                                    <h3>No hay mensajes</h3>
                                </div>
                            </div>
                    :
                        <React.Fragment>
                            <div
                                className="message-bar-head"
                                style={{
                                    minHeight: '13vh'
                                }}
                            >
                                <div className="usr-msg-details">
                                    <div className="usr-ms-img">
                                        <img src="images/resources/m-img1.png" alt="" />
                                    </div>
                                    <div className="usr-mg-info">
                                        <h3>{selectedConversation.name}</h3>
                                        <p>Online</p>
                                    </div>
                                </div>
                                <div className="ed-opts">
                                    <a href="#" title="" className="ed-opts-open"><i className="la la-ellipsis-v"></i></a>
                                    <ul className="ed-options">
                                        <li><a href="#" className="btn-clean-messages" title="">Limpiar </a></li>
                                        <li><a href="#" className="btn-delete-conversation" title="">Borrar</a></li>
                                        <li><a href="#" className="btn-block-user" title="">Bloquear</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div
                                className="messages-line overflow-auto"
                                style={{
                                    display: 'flex',
                                    flexDirection: 'column-reverse',
                                    backgroundColor: 'white'
                                }}
                                ref={paneDidMount}
                            >
                                {
                                    (messages && !!messages.length) && (
                                        messages.map((element, i) => {
                                            const isLeft = element.side === 'left'
                                            return(
                                                <div
                                                    className={"main-message-box "+(isLeft ? 'st3' : 'ta-right') }
                                                    key={element.message}
                                                >
                                                    {
                                                        isLeft && (
                                                            <div className="messg-usr-img">
                                                                <img
                                                                    src={element.sender_image}
                                                                    onClick={() => window.location.href = element.sender_profile}
                                                                    className="cursor-pointer"
                                                                    alt={element.sender_name}
                                                                />
                                                            </div>
                                                        )
                                                    }
                                                    <div
                                                        className="message-dt" 
                                                        style={
                                                            {
                                                                 padding: 0,
                                                                //  display: 'flex',
                                                                 justifyContent: isLeft ? 'flex-start' : 'flex-end',
                                                                 width: '85%',
                                                                 paddingLeft: isLeft ? '13%' : '40%',
                                                                 paddingRight: isLeft ? '40%': 0
                                                             }
                                                         }
                                                    >
                                                        <div
                                                            className="message-inner-dt"
                                                            
                                                        >
                                                            <p className='w-100'>{element.message}</p>
                                                        </div>
                                                        <span>{element.date}</span>
                                                    </div>
                                                    {
                                                        !isLeft  && (
                                                            <div className="messg-usr-img">
                                                                <img
                                                                    src={element.sender_image}
                                                                    onClick={() => window.location.href = element.sender_profile}
                                                                    className="cursor-pointer"
                                                                    alt={element.sender_name}
                                                                />
                                                            </div>
                                                        )
                                                    }
                                                </div>
                                            )
                                        })
                                    )
                                }
                            </div>
                            <div className="message-send-area">
                                <form id="form-send-message" name="form-send-message"
                                    onSubmit={e => {
                                        e.preventDefault()
                                        onSend(text)
                                        setText('')
                                    }}
                                >
                                    <div className="mf-field">
                                        <input
                                            type="text"
                                            name="message"
                                            id="message"
                                            value={text}
                                            placeholder={backendVars.labelWriteMessage}
                                            onChange={e => {
                                                setText(e.target.value || '')
                                            }}
                                        />
                                        <button type="submit">{backendVars.labelSend}</button>
                                    </div>
                                </form>
                            </div>
                        </React.Fragment>
                }
            </div>
        </React.Fragment>
    )
}