Proyectos de Subversion LeadersLinked - Backend

import React from 'react'
import ChatMail from "./ChatRoom"
import Sidebar from './Sidebar'
import { Modal } from 'react-bootstrap'
import { axios } from '../../../utils'
import Chat from '../chat/Chat'
import styled from "styled-components";
import Spinner from '../../../shared/loading-spinner/Spinner'

const StyledSpinnerContainer = styled.div`
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 300;
`;
export default props => {
    const defaultPage = {current: 1, last: 1}
    const [conversations, setConversations] = React.useState([])
    const [selectedConversation, setSelectedConversation] = React.useState(null)
    const [page, setPage] = React.useState(defaultPage)
    const [messages, setMessages] = React.useState([])
    const [isGettingMessages, setIsGettingMessages] = React.useState(false)
    const [visible, setVisible] = React.useState(false)
    const [inmailPersons, setInmailPersons] = React.useState([])
    const [search, setSearch] = React.useState('')
    const [loading, setLoading] = React.useState(false)
    const getMessages = async (conversation = selectedConversation, _page=page.current, justPaginate = false) => {
        try {
            const res = await axios.get(conversation.messages_link+'?page='+_page)
            if(justPaginate){
                const _messages = [... messages, ... res.data.data]
                setMessages(_messages)
            }else{
                setMessages(res.data.data || [])
            }
            if(res.data.pagination && res.data.pagination.last && res.data.pagination.last !== page.last){
                setPage({
                    ... page,
                    last: res.data.pagination.last
                })
            }
        } catch (error) {
            console.log('>>: error > ', error)
        }finally{
            if(isGettingMessages){
                setIsGettingMessages(false)
            }
        }
    }
    const handleChangeConversation = async conversation => {
        // setPage(defaultPage)
        setLoading(true)
        setSelectedConversation(null)
        setTimeout(() => {
            setSelectedConversation(conversation)
            setLoading(false)
        }, 1000)
        // getMessages(conversation, defaultPage.current)
    }

    const handleSend = async message => {
        if(selectedConversation){
            try {
                const params = {
                    message
                }
                const formData = new FormData();
                Object.entries(params).map(([key, value]) => {
                    formData.append(key, value);
                });
                const res = await axios.post(selectedConversation.send_link, formData)
                const _messages = [... messages]
                _messages.push(res.data.data)
                setMessages(_messages)
            } catch (error) {
                console.log('>>: err0r > ', error)
            }finally{
                getMessages()
            }
        }
    }

    const getMoreMessages = () => {
        if(page.last > page.current){
            let {current} = page
            current+=1
            if(!isGettingMessages){
                setIsGettingMessages(true)
                setPage({
                    ... page,
                    current
                })
                getMessages(selectedConversation, current, true)
            }
        }
    }
    const onClose = () => {
        setVisible(false)
    }

    const handleChange = async e => {
        const value = e.target.value
        setSearch(value)
        try {
            const res = await axios.get('/helpers/search-people?search='+value)
            if(res.data.success){
                setInmailPersons(res.data.data)
            }
        } catch (error) {
            console.log('>>: error > ', error)
        }
    }

    const handleInmailPerson = uuid => {
        onClose()
        window.location.href = '/inmail/'+uuid
        setTimeout(() => {
            window.location.reload()
        }, 1000)
    }

    const handleCloseChat = () => {
        console.log('>>: close chat')
    }

    return(
        <>
            {
                loading && (
                    <StyledSpinnerContainer>
                        <Spinner />
                    </StyledSpinnerContainer>
                )
            }
            <Modal
                show={visible}
                onHide={onClose}
            >
                <div className="card">
                    <div className="card-body">
                        <h3 className="card-title font-weight-bold">Crear sala de Chat</h3>
                        <div class="form-group">
                            <label for="search-people">Direccion de email</label>
                            <input
                                type="email"
                                className="form-control"
                                id="search-people"
                                aria-describedby="Buscador de personas"
                                placeholder="Escribe el nombre de la persona"
                                onChange={handleChange}
                            />
                        </div>
                        <div
                            className='container'
                        >
                            {
                                inmailPersons.map(element => {
                                    return(
                                        <div
                                            className='row'
                                            key={element.value}
                                        >
                                            <div
                                                className='col-8'
                                            >
                                                <p> {element.text} </p>
                                            </div>
                                            <div
                                                className='col-4'
                                            >
                                                <button
                                                    className='btn btn-primary'
                                                    onClick={() => handleInmailPerson(element.value)}
                                                >
                                                    <i className='fa fa-check' />
                                                </button>
                                            </div>
                                        </div>
                                    )
                                })
                            }
                        </div>
                        <a href="#" onClick={onClose} className="btn btn-danger">
                            Cerrar
                        </a>
                    </div>
                </div>
            </Modal>
            <section className="messages-page">
                <div className="container">
                    <div
                        className='w-100 text-center'
                    >
                        <h1 className='font-weight-bold p-2'>Chat</h1>
                    </div>
                    <div className="messages-sec">
                        <div className="row">
                            <div className="col-lg-4 col-md-12 no-pdd">
                                <div className="msgs-list">
                                    <div
                                        className="msg-title d-flex align-items-center"
                                        style={{
                                            minHeight: '13vh'
                                        }}
                                    >
                                        <h3>Personas y grupos</h3>
                                        {/* <button
                                            className='btn btn-link text-dark btn-sm'
                                            onClick={() => setVisible(true)}
                                        >
                                            <i className='fa fa-plus text-dark' />
                                        </button> */}
                                    </div>
                                    <Sidebar
                                        onClick={conversation => handleChangeConversation(conversation)}
                                        conversations={[... props.chatUsers, ... props.chatGroups]}
                                        selectedConversation={selectedConversation}
                                    />
                                </div>
                            </div>
                            <div
                                className="col-lg-8 col-md-12 pd-right-none pd-left-none"
                                style={{
                                    maxHeight: '85vh'
                                }}
                            >
                                {
                                    !!selectedConversation ? 
                                    <Chat
                                        entity={selectedConversation}
                                        onCloseChat={handleCloseChat}
                                    />
                                    :
                                    <div>
                                        <p>Seleccione un chat</p>
                                    </div>
                                }
                                {/* <ChatMail
                                    getMoreMessages={() => getMoreMessages()}
                                    backendVars={props.backendVars}
                                    onSend={text => handleSend(text)}
                                    messages={messages}
                                    selectedConversation={selectedConversation}
                                /> */}
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </>
    )
}