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 controller = new AbortController()

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

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

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

      const newMessages = response.data.reduce((acum, updatedMessage) => {
        if (messages.findIndex((message) => message.id === updatedMessage.id) === -1) {
          acum = [...acum, updatedMessage]
        }
        return acum
      }, [])

      if (newMessages.length) {
        setMessages([...messages, ...newMessages])
      } else {
        setMessages(response.data)
      }

      setPages((prevPages) => ({ ...prevPages, current: response.pagination.current, last: response.pagination.last }))
    } catch (error) {
      const errorMessage = new Error(error)
      console.log('Request canceled', errorMessage)
    } 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 = async () => {
    if (pages.current + 1 > pages.last) {
      return null
    }
    if (loading) {
      controller.abort()
    }

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

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

  useEffect(() => {
    setPages(DEFAULT_PAGES)
    if (selectedConversation) getMessages(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