Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 5247 Rev 5248
Línea 8... Línea 8...
8 
import { useDispatch } from 'react-redux'
 8 
import { useDispatch } from 'react-redux'
9 
import { fetchMessages, getMessagesDifferences } from '../../services/chat'
 9 
import { fetchMessages, getMessagesDifferences } from '../../services/chat'
10 
import { addNotification } from '../../redux/notification/notification.actions'
 10 
import { addNotification } from '../../redux/notification/notification.actions'
11 
import { axios, scrollToBottom } from '../../utils'
 11 
import { axios, scrollToBottom } from '../../utils'
12 
import { ArrowLeft } from '@mui/icons-material'
 12 
import { ArrowLeft } from '@mui/icons-material'
- 
 
 13 
import Spinner from '../../shared/loading-spinner/Spinner'
Línea 13... Línea 14...
13 
 
 14 
 
Línea 14... Línea 15...
14 
const DEFAULT_PAGES = { current: 1, last: 1 }
 15 
const DEFAULT_PAGES = { current: 1, last: 1 }
15 
 
 16 
 
Línea 22... Línea 23...
22 
  const [pages, setPages] = useState(DEFAULT_PAGES)
 23 
  const [pages, setPages] = useState(DEFAULT_PAGES)
23 
  const [loading, setLoading] = useState(false)
 24 
  const [loading, setLoading] = useState(false)
24 
  const lastMessage = useRef(null)
 25 
  const lastMessage = useRef(null)
25 
  const dispatch = useDispatch()
 26 
  const dispatch = useDispatch()
Línea 26... Línea 27...
26 
 
 27 
 
27 
  const getMessages = async (url = '', page = pages.current) => {
 28 
  const getMoreMessages = async (url = '', page = pages.current) => {
28 
    try {
 29 
    try {
29 
      setLoading(true)
 30 
      setLoading(true)
30 
      const response = await fetchMessages(url, page)
 31 
      const response = await fetchMessages(url, page)
31 
      if (!response.success) {
 32 
      if (!response.success) {
Línea 60... Línea 61...
60 
      }
 61 
      }
Línea 61... Línea 62...
61 
 
 62 
 
Línea 62... Línea 63...
62 
      const newMessages = getMessagesDifferences(messages, response.data)
 63 
      const newMessages = getMessagesDifferences(messages, response.data)
63 
 
 64 
 
64 
      if (newMessages.length) {
 65 
      if (newMessages.length) {
65 
        setMessages([...messages, ...newMessages])
 66 
        setMessages([...newMessages, ...messages])
66 
        scrollToBottom()
 67 
        scrollToBottom()
67 
      } else {
 68 
      } else {
Línea 82... Línea 83...
82 
      const formData = new FormData()
 83 
      const formData = new FormData()
Línea 83... Línea 84...
83 
 
 84 
 
Línea 84... Línea 85...
84 
      Object.entries(message).forEach(([key, value]) => formData.append(key, value))
 85 
      Object.entries(message).forEach(([key, value]) => formData.append(key, value))
85 
 
 86 
 
86 
      const { data: response } = await axios.post(sendUrl, formData)
 87 
      const { data: response } = await axios.post(sendUrl, formData)
87 
      setMessages(prev => [response.data, ...prev])
 88 
      setMessages(prev => [...prev, response.data])
88 
    } catch (error) {
 89 
    } catch (error) {
89 
      const errorMessage = new Error(error)
 90 
      const errorMessage = new Error(error)
90 
      dispatch(addNotification({ style: 'danger', msg: errorMessage.message }))
 91 
      dispatch(addNotification({ style: 'danger', msg: errorMessage.message }))
Línea 98... Línea 99...
98 
  useEffect(() => {
 99 
  useEffect(() => {
99 
    if (!loading && selectedConversation) setTimeout(() => hearBeat(), 3000)
 100 
    if (!loading && selectedConversation) setTimeout(() => hearBeat(), 3000)
100 
  }, [loading, selectedConversation])
 101 
  }, [loading, selectedConversation])
Línea 101... Línea 102...
101 
 
 102 
 
- 
 
 103 
  useEffect(() => {
- 
 
 104 
    if (messages) setMessages([])
102 
  useEffect(() => {
 105 
    scrollToBottom()
103 
    setPages(DEFAULT_PAGES)
 106 
    setPages(DEFAULT_PAGES)
Línea 104... Línea 107...
104 
  }, [selectedConversation])
 107 
  }, [selectedConversation])
105 
 
 108 
 
106 
  useEffect(() => {
 109 
  useEffect(() => {
Línea 107... Línea 110...
107 
    if (selectedConversation) getMessages(selectedConversation?.messages_link, pages.current)
 110 
    if (selectedConversation && pages.current < pages.last) getMoreMessages(selectedConversation?.messages_link, pages.current)
108 
  }, [pages.current])
 111 
  }, [pages.current])
109 
 
 112 
 
110 
  useEffect(() => {
 - 
 
111 
    const observer = new IntersectionObserver(([entry]) => {
 - 
 
112 
      if (entry.isIntersecting) {
 - 
 
113 
        loadMore()
 113 
  useEffect(() => {
Línea 114... Línea 114...
114 
        lastMessage.current.scrollTop += 100
 114 
    const observer = new IntersectionObserver(([entry]) => {
115 
      }
 115 
      if (entry.isIntersecting) loadMore()
Línea 116... Línea 116...
116 
    })
 116 
    })
117 
 
 117 
 
118 
    if (lastMessage.current) observer.observe(lastMessage.current)
 118 
    if (lastMessage.current) observer.observe(lastMessage.current)
Línea 119... Línea 119...
119 
  }, [messages])
 119 
  }, [selectedConversation])
120 
 
 120 
 
121 
  if (!selectedConversation) {
 121 
  if (!selectedConversation) {
Línea 137... Línea 137...
137 
            <MessageTemplate
 137 
            <MessageTemplate
138 
              key={index}
 138 
              key={index}
139 
              message={element}
 139 
              message={element}
140 
              date={element.date}
 140 
              date={element.date}
141 
            />)
 141 
            />)
142 
          : <EmptySection message={LABELS.NO_MESSAGE_CONVERSATION} Icon={<SpeakerNotesOffRoundedIcon/>} />
 142 
          : <EmptySection message={LABELS.NO_MESSAGE_CONVERSATION} Icon={<SpeakerNotesOffRoundedIcon />} />
- 
 
 143 
        }
- 
 
 144 
        {pages.current < pages.last &&
- 
 
 145 
          <div ref={lastMessage}>
- 
 
 146 
            <Spinner />
- 
 
 147 
          </div>
143 
        }
 148 
        }
144 
        {pages.current < pages.last && <hr ref={lastMessage} style={{ visibility: 'hidden' }} />}
 - 
 
145 
      </div>
 149 
      </div>
146 
      <MessageBox onSend={handleSend} sendUrl={selectedConversation.send_link}/>
 150 
      <MessageBox onSend={handleSend} sendUrl={selectedConversation.send_link} />
147 
    </div>
 151 
    </div>
148 
  )
 152 
  )
149 
}
 153 
}
Línea 150... Línea 154...
150 
 
 154