Proyectos de Subversion LeadersLinked - Antes de SPA

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'

let path_id = window.location.pathname.split('/inmail/')[1]

const Inmail = 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 }
            }

            setIsGettingMessages(false)
            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('/helpers/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) => {
        setShowConversations(arg)
    }

    useEffect(() => {
        const interval = setInterval(() => {
            load()
        }, 3000)

        return () => {
            clearInterval(interval)
        };
    }, []);

    useEffect(() => {
        if (path_id && conversations.length) {
            setSelectedConversation(conversations.find(conversation => conversation.uuid === path_id))
            setShowConversations(true)
            path_id = null
        }
    }, [conversations]);

    useEffect(() => {
        searchUsers(search)
    }, [search]);

    useEffect(() => {
        if (selectedConversation) {
            getMessages(selectedConversation.messages_link)
                .then(({ pages, msgs }) => {
                    setPage({ ...page, last: pages.last })
                    setMessages(msgs)
                })
        }
    }, [selectedConversation]);

    useEffect(() => {
        let timer;
        if (!isGettingMessages && selectedConversation) {
            timer = setTimeout(() => {
                getMessages(selectedConversation.messages_link)
                    .then(({ pages, msgs }) => {
                        setPage({ ...page, last: pages.last })
                        setMessages(msgs)
                    })
            }, 2000);
        }
        return () => {
            clearTimeout(timer);
        };
    }, [isGettingMessages, 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 className="form-group">
                            <label htmlFor="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-3 col-md-12 inmail_conversations-list border-none ${showConversations && 'msgs-hide'}`}>
                                <div className="border-gray border-radius inmail_contacts">
                                    <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}
                                        handleShowConversation={handleShowConversation}
                                    />
                                </div>
                            </div>
                            <div className={`col-lg-9 col-md-12 pd-right-none pd-left-none ${!showConversations && 'msgs-hide'}`}>
                                <div className="ph-5 h-100">
                                    <ChatMail
                                        getMoreMessages={() => getMoreMessages()}
                                        backendVars={props.backendVars}
                                        onSend={text => handleSend(text)}
                                        messages={messages}
                                        setMsgs={setMessages}
                                        selectedConversation={selectedConversation}
                                        handleShowConversation={handleShowConversation}
                                        loading={isGettingMessages}
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </>
    )
}

export default Inmail