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