Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useEffect, useState } from 'react'
import { axios } from '../utils'
import ChatMail from "./inmail/inmail"
import Sidebar from './inmail/sidebar'

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

const Inmail = props => {

    const [messages, setMessages] = useState([])
    const [page, setPage] = useState(defaultPages)
    const [selectedConversation, setSelectedConversation] = useState(null)
    const [isGettingMessages, setIsGettingMessages] = useState(false)

    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 changeConversation = (conversation) => {
        setPage(defaultPages)
        setSelectedConversation(conversation)
    }

    const handleSend = async (message = '') => {
        if (selectedConversation) {
            try {
                const params = {
                    message: 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 })
        }
    }

    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 (
        <div className="messages-sec container">
            <div className="row">
                <div className={`col-12 col-md-4 ${selectedConversation && 'msgs-hide'}`}>
                    <Sidebar
                        setConversation={changeConversation}
                        selectedConversation={selectedConversation}
                    />
                </div>
                <div className={`col-12 col-md-8 ${!selectedConversation && 'msgs-hide'}`}>
                    {selectedConversation
                        ?
                        <ChatMail
                            setConversation={changeConversation}
                            getMoreMessages={() => getMoreMessages()}
                            backendVars={props.backendVars}
                            onSend={handleSend}
                            messages={messages}
                            setMsgs={setMessages}
                            selectedConversation={selectedConversation}
                            loading={isGettingMessages}
                        />
                        :
                        <div className='message-select-conversation'>
                            <div className='msgs-select-container'>
                                <i className='fas fa-comments icon' />
                                <h3>
                                    No hay mensajes
                                </h3>
                            </div>
                        </div>
                    }
                </div>
            </div>
        </div>
    )
}

export default Inmail