Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable camelcase */
/* eslint-disable react/prop-types */
import React, { useEffect, useState } from 'react'
import { useDispatch } from 'react-redux'
import { addNotification } from '../redux/notification/notification.actions'
import { axios } from '../utils'
import ChatMail from './inmail/inmail'
import Sidebar from './inmail/sidebar'

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

const Inmail = () => {
  const [messages, setMessages] = useState([])
  const [pages, setPages] = useState(DEFAULT_PAGES)
  const [selectedConversation, setSelectedConversation] = useState(null)
  const [loading, setLoading] = useState(false)
  const dispatch = useDispatch()

  const getMessages = async ({ messages_link = '', page = DEFAULT_PAGES.current }) => {
    try {
      setLoading(true)
      const { data: response } = await axios.get(`${messages_link}?page=${page}`)

      if (!response.success) {
        const errorMessage = response.data

        dispatch(addNotification({ style: 'danger', msg: errorMessage.message }))
        return
      }

      if (page === 1) {
        setMessages(response.data)
      } else {
        setMessages(prev => [...prev, response.data])
      }

      setPages((prevPages) => ({ ...prevPages, current: response.pagination.current, last: response.pagination.last }))
    } catch (error) {
      const errorMessage = new Error(error)
      dispatch(addNotification({ style: 'danger', msg: errorMessage.message }))
    } finally {
      setLoading(false)
    }
  }

  const handleSend = async (sendUrl = '', message = {}) => {
    try {
      const formData = new FormData()

      Object.entries(message).forEach(([key, value]) => formData.append(key, value))

      const { data: response } = await axios.post(sendUrl, formData)
      setMessages(prev => [response.data, ...prev])
    } catch (error) {
      const errorMessage = new Error(error)
      dispatch(addNotification({ style: 'danger', msg: errorMessage.message }))
    }
  }

  const changeConversation = (conversation) => {
    setSelectedConversation(conversation)
  }

  const getMoreMessages = () => {
    if (pages.current + 1 > pages.last) {
      return null
    }

    getMessages({ messages_link: selectedConversation.messages_link, page: pages.current + 1 })
  }

  useEffect(() => {
    let timer
    if (!loading && selectedConversation) {
      timer = setTimeout(() => {
        getMessages({ messages_link: selectedConversation?.messages_link })
      }, 2000)
    }
    return () => {
      clearTimeout(timer)
    }
  }, [loading, selectedConversation])

  useEffect(() => {
    setPages(DEFAULT_PAGES)
    if (selectedConversation) getMessages({ messages_link: selectedConversation.messages_link })
  }, [selectedConversation])

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

export default Inmail