Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5206 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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