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));

        }

    }

    console.log(messages)

    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.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>

    )

}