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(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