Proyectos de Subversion LeadersLinked - Backend

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

import ChatMail from "./inmail/inmail"

import Sidebar from './inmail/sidebar'

import { axios } from '../utils'

import { Modal } from 'react-bootstrap'

export default props => {

    const defaultPages = { current: 1, last: 1 }

    const [conversations, setConversations] = useState([])

    const [showConversations, setShowConversations] = useState(false)

    const [selectedConversation, setSelectedConversation] = useState(null)

    const [page, setPage] = useState(defaultPages)

    const [messages, setMessages] = useState([])

    const [isGettingMessages, setIsGettingMessages] = useState(false)

    const [visible, setVisible] = useState(false)

    const [searchActive, setSearchActive] = useState(false)

    const [inmailPersons, setInmailPersons] = useState([])

    const [search, setSearch] = useState('')

    const load = async () => {

        try {

            const res = await axios.get(window.location.href)

            if (res.data.success) {

                setConversations(res.data.data)

            }

        } catch (error) {

            console.log('>>: error > ', error)

        }

    }

    const getMessages = async ({ messages_link = selectedConversation.messages_link, _page = defaultPages.current }) => {

        try {

            setIsGettingMessages(true)

            const { data } = await axios.get(messages_link + '?page=' + _page)

            if (data.success) {

                setIsGettingMessages(false)

                return { pages: data.pagination, msgs: data.data }

            }

            return { pages: defaultPages.current, msgs: data.data }

        }

        catch (error) {

            console.log('>>: error > ', error)

        }

    }

    const handleChangeConversation = conversation => {

        setPage(defaultPages)

        setSelectedConversation(conversation)

    }

    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)

                setMessages(prev => [res.data.data, ...prev])

            } catch (error) {

                console.log('>>: err0r > ', error)

            }

        }

    }

    const getMoreMessages = () => {

        if (page.last > page.current) {

            setPage({ ...page, current: page.current += 1 })

        }

    }

    const onClose = () => {

        setVisible(false)

    }

    const searchUsers = async value => {

        try {

            const res = await axios.get('/communication/search-people?search=' + value)

            if (res.data.success) {

                setInmailPersons(res.data.data)

            }

        } catch (error) {

            console.log('>>: error > ', error)

        }

    }

    const handleInmailPerson = uuid => {

        onClose()

        axios.get(`/inmail/${uuid}`)

            .then(({ data }) => {

                if (data.success) {

                    const newConversation = data.data.find(conversation => conversation.uuid === uuid)

                    handleChangeConversation(newConversation)

                }

            })

    }

    const handleShowConversation = (arg) => {

        console.log('>>: inmail', arg)

        setShowConversations(arg)

    }

    useEffect(() => {

        const interval = setInterval(() => {

            load()

        }, 3000)

        return () => {

            clearInterval(interval)

        };

    }, []);

    useEffect(() => {

        searchUsers(search)

    }, [search]);

    useEffect(() => {

        if (selectedConversation) {

            setIsGettingMessages(true)

            getMessages(selectedConversation.messages_link)

                .then(({ pages, msgs }) => {

                    console.log('>>: pages > ', pages, msgs)

                    setPage({ ...page, last: pages.last })

                    setMessages(msgs)

                })

        }

    }, [selectedConversation]);

    useEffect(() => {

        if (page.current > 1) {

            setIsGettingMessages(true)

            getMessages({ _page: page.current })

                .then(({ pages, msgs }) => {

                    setPage({ ...page, last: pages.last })

                    setMessages(prev => [...prev, ...msgs])

                })

        }

    }, [page.current]);

    return (

        <>

            <Modal

                show={visible}

                onHide={onClose}

            >

                <div className="card">

                    <div className="card-body">

                        <h3 className="card-title font-weight-bold">Crear sala de Intercambio Profesional</h3>

                        <div class="form-group">

                            <label for="search-people">Escribe el nombre</label>

                            <input

                                type="email"

                                className="form-control"

                                id="search-people"

                                aria-describedby="Buscador de personas"

                                placeholder="Escribe el nombre de la persona"

                                onChange={(e) => setSearch(e.target.value)}

                            />

                        </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-secondary">

                            Cerrar

                        </a>

                    </div>

                </div>

            </Modal>

            <section className="messages-page">

                <div className="ph-5">

                    <div className="messages-sec">

                        <div className="row">

                            <div className="col-lg-4 col-md-12 inmail_conversations-list border-none ph-5">

                                <div className="border-gray border-radius">

                                    <div className="msgs-list">

                                        <div className="msg-title border-none">

                                            <h1 className="font-weight-bold">Personas</h1>

                                            <div className="msgs_icons-container">

                                                {

                                                    !showConversations

                                                    &&

                                                    <i

                                                        className='fa fa-search icon text-gray'

                                                        onClick={() => setSearchActive(!searchActive)}

                                                    />

                                                }

                                                <i

                                                    className='fa fa-plus icon text-gray'

                                                    onClick={() => setVisible(true)}

                                                />

                                            </div>

                                        </div>

                                    </div>

                                    <Sidebar

                                        click={handleChangeConversation}

                                        conversations={conversations}

                                        selectedConversation={selectedConversation}

                                        searchActive={searchActive}

                                        showConversation={showConversations}

                                        handleShowConversation={handleShowConversation}

                                    />

                                </div>

                            </div>

                            <div className={`col-lg-8 col-md-12 pd-right-none pd-left-none ${!showConversations && 'msgs-hide'}`}>

                                <div className="ph-5 h-100">

                                    <ChatMail

                                        getMoreMessages={() => getMoreMessages()}

                                        inMailVars={props.inMailVars}

                                        onSend={text => handleSend(text)}

                                        messages={messages}

                                        selectedConversation={selectedConversation}

                                        handleShowConversation={handleShowConversation}

                                        loading={isGettingMessages}

                                    />

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </section>

        </>

    )

}