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>

        </>

    )

}