Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable camelcase */
/* 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 formData = new FormData()
        formData.append('message', message)

        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'}`}>
          <ChatMail
            selectedConversation={selectedConversation}
            messages={messages}
            setConversation={changeConversation}
            getMoreMessages={() => getMoreMessages()}
            onSend={handleSend}
            setMsgs={setMessages}
          />
        </div>
      </div>
    </div>
  )
}

export default Inmail