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