Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect, useRef, useState } from 'react';

import { Spinner } from 'react-bootstrap';

export default ({

    messages,

    selectedConversation,

    onSend,

    backendVars,

    getMoreMessages,

    handleShowConversation,

    loading

}) => {

    const [text, setText] = useState('')

    const [showOptions, setShowOptions] = useState(false)

    const lastMessage = useRef(null);

    const messagesLine = useRef(null);

    useEffect(() => {

        const observer = new IntersectionObserver(([entry]) => {

            if (entry.isIntersecting) {

                getMoreMessages()

            }

        }, {

            rootMargin: '0px'

        })

        if (lastMessage.current) {

            observer.observe(lastMessage.current)

        }

    }, [messages]);

    return (

        <React.Fragment>

            <div className="main-conversation-box">

                {

                    !selectedConversation

                        ?

                        <div className='message-select-conversation'>

                            <div className='msgs-select-container'>

                                <i className='fas fa-inbox icon' />

                                <h3>

                                    Selecciona una conversación

                                </h3>

                            </div>

                        </div>

                        :

                        <React.Fragment>

                            <div className="message-bar-head">

                                <div className="usr-msg-details">

                                    <i

                                        className="fas fa-angle-left icon msgs-hide"

                                        onClick={() => handleShowConversation(false)}

                                    ></i>

                                    <div className="usr-ms-img">

                                        <img src={selectedConversation.image} alt={`${selectedConversation.name} avatars`} />

                                    </div>

                                    <div className="usr-mg-info">

                                        <h3>{selectedConversation.name}</h3>

                                        <p>Online</p>

                                    </div>

                                </div>

                                <div className="ed-opts" onClick={() => setShowOptions(!showOptions)}>

                                    <i className="la la-ellipsis-v icon"></i>

                                    <ul className={showOptions ? "ed-options active" : "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"

                                ref={messagesLine}

                            >

                                {

                                    loading

                                        ?

                                        <Spinner />

                                        :

                                        (messages.length

                                            ?

                                            [...messages].map((element) => {

                                                const isLeft = element.side === 'left'

                                                return (

                                                    <div

                                                        className={`main-message-box ${!isLeft ? 'ta-right' : ''}`}

                                                        key={element.message}

                                                    >

                                                        <div className="messg-usr-img">

                                                            <a href={element.sender_profile}>

                                                                <img

                                                                    src={element.sender_image}

                                                                    className="cursor-pointer"

                                                                    alt={element.sender_name}

                                                                />

                                                            </a>

                                                        </div>

                                                        <div className="message-dt">

                                                            <div className="message-inner-dt">

                                                                <p className='w-100'>{element.message}</p>

                                                            </div>

                                                            <span>{element.date}</span>

                                                        </div>

                                                    </div>

                                                )

                                            })

                                            :

                                            <div style={{ display: 'grid', placeItems: 'center', height: '100%' }}>

                                                <h2>No hay mensajes en esta conversación</h2>

                                            </div>)

                                }

                                <hr ref={lastMessage} />

                            </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" className="btn-primary p-1">

                                            <i class="fas fa-paper-plane"></i>

                                            {backendVars.labelSend}

                                        </button>

                                    </div>

                                </form>

                            </div>

                        </React.Fragment>

                }

            </div>

        </React.Fragment>

    )

}