Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5203 | Rev 5206 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
5185 stevensc 1 
/* eslint-disable camelcase */
4346 stevensc 2 
/* eslint-disable react/prop-types */
888 stevensc 3 
import React, { useEffect, useState } from 'react'
5187 stevensc 4 
import { useDispatch } from 'react-redux'
5 
import { addNotification } from '../redux/notification/notification.actions'
3713 stevensc 6 
import { axios } from '../utils'
5185 stevensc 7 
import ChatMail from './inmail/inmail'
1 www 8 
import Sidebar from './inmail/sidebar'
9 
 
5189 stevensc 10 
const DEFAULT_PAGES = { current: 1, last: 1 }
2704 stevensc 11 
 
5186 stevensc 12 
const Inmail = () => {
5185 stevensc 13 
  const [messages, setMessages] = useState([])
5189 stevensc 14 
  const [pages, setPages] = useState(DEFAULT_PAGES)
5185 stevensc 15 
  const [selectedConversation, setSelectedConversation] = useState(null)
5187 stevensc 16 
  const [loading, setLoading] = useState(false)
5203 stevensc 17 
 
5187 stevensc 18 
  const dispatch = useDispatch()
5203 stevensc 19 
  const controller = new AbortController()
4354 stevensc 20 
 
5199 stevensc 21 
  const getMessages = async (url = '', page = DEFAULT_PAGES.current) => {
5185 stevensc 22 
    try {
5187 stevensc 23 
      setLoading(true)
5203 stevensc 24 
      const { data: response } = await axios.get(`${url}?page=${page}`, { signal: controller.signal })
891 stevensc 25 
 
5187 stevensc 26 
      if (!response.success) {
27 
        const errorMessage = response.data
28 
 
29 
        dispatch(addNotification({ style: 'danger', msg: errorMessage.message }))
30 
        return
5185 stevensc 31 
      }
1734 stevensc 32 
 
5204 stevensc 33 
      const newMessages = response.data.reduce((acum, updatedMessage) => {
34 
        if (messages.findIndex((message) => message.id === updatedMessage.id) === -1) {
35 
          acum = [...acum, updatedMessage]
36 
        }
37 
        return acum
38 
      }, [])
39 
 
40 
      if (newMessages.length) {
41 
        setMessages([...messages, ...newMessages])
42 
      } else {
5189 stevensc 43 
        setMessages(response.data)
5187 stevensc 44 
      }
45 
 
5190 stevensc 46 
      setPages((prevPages) => ({ ...prevPages, current: response.pagination.current, last: response.pagination.last }))
5185 stevensc 47 
    } catch (error) {
5204 stevensc 48 
      const errorMessage = new Error(error)
49 
      console.log('Request canceled', errorMessage)
5189 stevensc 50 
    } finally {
51 
      setLoading(false)
5185 stevensc 52 
    }
53 
  }
1774 stevensc 54 
 
5187 stevensc 55 
  const handleSend = async (sendUrl = '', message = {}) => {
56 
    try {
57 
      const formData = new FormData()
5185 stevensc 58 
 
5187 stevensc 59 
      Object.entries(message).forEach(([key, value]) => formData.append(key, value))
5185 stevensc 60 
 
5187 stevensc 61 
      const { data: response } = await axios.post(sendUrl, formData)
62 
      setMessages(prev => [response.data, ...prev])
63 
    } catch (error) {
5189 stevensc 64 
      const errorMessage = new Error(error)
65 
      dispatch(addNotification({ style: 'danger', msg: errorMessage.message }))
1 www 66 
    }
5185 stevensc 67 
  }
727 stevensc 68 
 
5189 stevensc 69 
  const changeConversation = (conversation) => {
70 
    setSelectedConversation(conversation)
71 
  }
5187 stevensc 72 
 
5202 stevensc 73 
  const getMoreMessages = async () => {
5203 stevensc 74 
    if (pages.current + 1 > pages.last) {
75 
      return null
76 
    }
77 
    if (loading) {
78 
      await controller.abort()
79 
    }
5202 stevensc 80 
 
5203 stevensc 81 
    getMessages(selectedConversation.messages_link, pages.current + 1)
5185 stevensc 82 
  }
1 www 83 
 
5185 stevensc 84 
  useEffect(() => {
85 
    let timer
5187 stevensc 86 
    if (!loading && selectedConversation) {
5185 stevensc 87 
      timer = setTimeout(() => {
5200 stevensc 88 
        getMessages(selectedConversation.messages_link)
5185 stevensc 89 
      }, 2000)
1 www 90 
    }
5185 stevensc 91 
    return () => {
92 
      clearTimeout(timer)
93 
    }
5187 stevensc 94 
  }, [loading, selectedConversation])
888 stevensc 95 
 
5185 stevensc 96 
  useEffect(() => {
5189 stevensc 97 
    setPages(DEFAULT_PAGES)
5199 stevensc 98 
    if (selectedConversation) getMessages(selectedConversation.messages_link)
5189 stevensc 99 
  }, [selectedConversation])
1734 stevensc 100 
 
5185 stevensc 101 
  return (
5187 stevensc 102 
  <div className="messages-sec container">
103 
    <div className="row">
104 
      <div className={`col-12 col-md-4 ${selectedConversation && 'msgs-hide'}`}>
105 
        <Sidebar
106 
          setConversation={changeConversation}
107 
          selectedConversation={selectedConversation}
108 
        />
5185 stevensc 109 
      </div>
5187 stevensc 110 
      <div className={`col-12 col-md-8 ${!selectedConversation && 'msgs-hide'}`}>
111 
        <ChatMail
112 
          messages={messages}
113 
          selectedConversation={selectedConversation}
114 
          setConversation={changeConversation}
115 
          getMoreMessages={() => getMoreMessages()}
116 
          onSend={handleSend}
117 
        />
118 
      </div>
5185 stevensc 119 
    </div>
5187 stevensc 120 
  </div>
5185 stevensc 121 
  )
3074 stevensc 122 
}
123 
 
5185 stevensc 124 
export default Inmail