Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 5310 Rev 5311
Línea 15... Línea 15...
15 
import { addNotification } from '../../../redux/notification/notification.actions'
 15 
import { addNotification } from '../../../redux/notification/notification.actions'
16 
import Spinner from '../../../shared/loading-spinner/Spinner'
 16 
import Spinner from '../../../shared/loading-spinner/Spinner'
17 
import { useDispatch, useSelector } from 'react-redux'
 17 
import { useDispatch, useSelector } from 'react-redux'
18 
import SearchIcon from '@mui/icons-material/Search'
 18 
import SearchIcon from '@mui/icons-material/Search'
19 
import EmptySection from '../../../shared/empty-section/EmptySection'
 19 
import EmptySection from '../../../shared/empty-section/EmptySection'
- 
 
 20 
import { getMessages } from '../../../redux/conversation/conversation.actions'
Línea 20... Línea 21...
20 
 
 21 
 
21 
const StyledChatHead = styled.div`
 22 
const StyledChatHead = styled.div`
22 
  .notify {
 23 
  .notify {
23 
    animation: notify 2s infinite;
 24 
    animation: notify 2s infinite;
Línea 96... Línea 97...
96 
    url_get_contact_group_list,
 97 
    url_get_contact_group_list,
97 
    url_get_contacts_availables_for_group,
 98 
    url_get_contacts_availables_for_group,
98 
    url_zoom
 99 
    url_zoom
99 
  } = entity
 100 
  } = entity
Línea 100... Línea 101...
100 
 
 101 
 
- 
 
 102 
  const { messages, currentPage, lastPage, loading } = useSelector((state) => state.conversation)
Línea 101... Línea -...
101 
  const state = useSelector((state) => state.conversation)
 - 
 
102 
 
 - 
 
103 
  // states
 - 
 
104 
  const [messages, setMessages] = useState([])
 - 
 
105 
  const [responseMessage, setResponseMessage] = useState(null)
 - 
 
106 
  const [oldMessages, setOldMessages] = useState([])
 - 
 
107 
  const [currentPage, setCurrentPage] = useState(1)
 - 
 
108 
  const [pages, setPages] = useState(1)
 103 
  const dispatch = useDispatch()
- 
 
 104 
 
109 
  const [showOptions, setShowOptions] = useState(false)
 105 
  const [optionTab, setOptionTab] = useState('default')
110 
  const [optionTab, setOptionTab] = useState('default')
 106 
 
- 
 
 107 
  const [availableContactsToAdd, setAvailableContactsToAdd] = useState([])
- 
 
 108 
  const [groupContactsList, setGroupContactsList] = useState([])
111 
  const [availableContactsToAdd, setAvailableContactsToAdd] = useState([])
 109 
 
112 
  const [groupContactsList, setGroupContactsList] = useState([])
 110 
  const [showOptions, setShowOptions] = useState(false)
113 
  const [confirmModalShow, setConfirmModalShow] = useState(false)
 111 
  const [confirmModalShow, setConfirmModalShow] = useState(false)
114 
  const [showEmojiTab, setShowEmojiTab] = useState(false)
 112 
  const [showEmojiTab, setShowEmojiTab] = useState(false)
115 
  const [shareFileModalShow, setShareFileModalShow] = useState(false)
 - 
 
- 
 
 113 
  const [shareFileModalShow, setShareFileModalShow] = useState(false)
116 
  const [showConferenceModal, setShowConferenceModal] = useState(false)
 114 
  const [showConferenceModal, setShowConferenceModal] = useState(false)
Línea 117... Línea 115...
117 
  const [loading, setLoading] = useState(false)
 115 
 
Línea 118... Línea 116...
118 
  const [search, setSearch] = useState('')
 116 
  const [search, setSearch] = useState('')
Línea 124... Línea 122...
124 
  const loader = useRef(null)
 122 
  const loader = useRef(null)
125 
  const modalActionUrl = useRef('')
 123 
  const modalActionUrl = useRef('')
126 
  const chatboxEl = useRef(null)
 124 
  const chatboxEl = useRef(null)
127 
  const textAreaEl = useRef(null)
 125 
  const textAreaEl = useRef(null)
Línea 128... Línea -...
128 
 
 - 
 
129 
  console.log(state)
 - 
 
130 
 
 126 
 
131 
  // optionTabs
 127 
  // optionTabs
132 
  const optionTabs = {
 128 
  const optionTabs = {
133 
    add_person_to_group: 'add_person_to_group',
 129 
    add_person_to_group: 'add_person_to_group',
134 
    group_contacts_list: 'group_contacts_list',
 130 
    group_contacts_list: 'group_contacts_list',
Línea 140... Línea 136...
140 
    onRead(entity)
 136 
    onRead(entity)
141 
    onMinimize(entity)
 137 
    onMinimize(entity)
142 
  }
 138 
  }
Línea 143... Línea 139...
143 
 
 139 
 
144 
  const handleGetMessages = async () => {
 - 
 
145 
    setLoading(true)
 140 
  const handleGetMessages = async () => {
146 
    const response = await axios.get(url_get_all_messages)
 - 
 
147 
    const resData = response.data
 - 
 
148 
    if (!resData.success) {
 - 
 
149 
      return ('ha ocurrido un error', resData)
 - 
 
150 
    }
 - 
 
151 
    const updatedMessages = [...resData.data.items].reverse()
 - 
 
152 
    const newMessages = updatedMessages.reduce((acum, updatedMessage) => {
 - 
 
153 
      if (messages.findIndex((message) => message.id === updatedMessage.id) === -1) {
 - 
 
154 
        acum = [...acum, updatedMessage]
 - 
 
155 
      }
 - 
 
156 
      return acum
 - 
 
157 
    }, [])
 - 
 
158 
 
 - 
 
159 
    if (newMessages.length > 0) {
 - 
 
160 
      setMessages([...messages, ...newMessages])
 - 
 
161 
      setLoading(false)
 - 
 
162 
      setPages(resData.data.pages)
 141 
    dispatch(getMessages(url_get_all_messages))
163 
      scrollToBottom()
 - 
 
164 
    } else {
 - 
 
165 
      setMessages([...updatedMessages])
 - 
 
166 
      setLoading(false)
 - 
 
167 
    }
 142 
    scrollToBottom()
Línea 168... Línea 143...
168 
  }
 143 
  }
169 
 
 144 
 
170 
  const handleLoadMore = async () => {
 145 
  const handleLoadMore = async () => {
171 
    await axios.get(`${url_get_all_messages}?page=${currentPage}`)
 146 
    await axios.get(`${url_get_all_messages}?page=${currentPage}`)
172 
      .then((response) => {
 147 
      .then((response) => {
173 
        const resData = response.data
 148 
        const resData = response.data
174 
        if (resData.success) {
 149 
        if (resData.success) {
175 
          if (resData.data.page > 1) {
 150 
          if (resData.data.page > 1) {
176 
            const updatedOldMessages = [...resData.data.items].reverse()
 151 
            const updatedOldMessages = [...resData.data.items].reverse()
177 
            setOldMessages([...updatedOldMessages, ...oldMessages])
 152 
            // setOldMessages([...updatedOldMessages, ...oldMessages])
178 
            /* scrollDownBy(100); */
 153 
            /* scrollDownBy(100); */
179 
          }
 154 
          }
180 
        }
 155 
        }
Línea 196... Línea 171...
196 
 
 171 
 
197 
          online
 172 
          online
198 
            ? newMessage = { ...newMessage, not_received: false }
 173 
            ? newMessage = { ...newMessage, not_received: false }
Línea 199... Línea 174...
199 
            : newMessage = { ...newMessage, not_received: true }
 174 
            : newMessage = { ...newMessage, not_received: true }
200 
 
 175 
 
201 
          setMessages([...messages, newMessage])
 176 
          // setMessages([...messages, newMessage])
202 
        }
 177 
        }
203 
      })
 178 
      })
204 
      e.target.value = ''
 179 
      e.target.value = ''
205 
      /* await handleGetMessages(); */
 180 
      /* await handleGetMessages(); */
206 
      setShowEmojiTab(false)
 181 
      setShowEmojiTab(false)
207 
      setResponseMessage(null)
 182 
      // setResponseMessage(null)
Línea 208... Línea 183...
208 
    }
 183 
    }
209 
  }
 184 
  }
Línea 241... Línea 216...
241 
  }
 216 
  }
Línea 242... Línea 217...
242 
 
 217 
 
243 
  const handleObserver = (entities) => {
 218 
  const handleObserver = (entities) => {
244 
    const target = entities[0]
 219 
    const target = entities[0]
245 
    if (target.isIntersecting) {
 220 
    if (target.isIntersecting) {
246 
      setCurrentPage((prevState) => prevState + 1)
 221 
      // setCurrentPage((prevState) => prevState + 1)
247 
    }
 222 
    }
Línea 248... Línea 223...
248 
  }
 223 
  }
249 
 
 224 
 
Línea 333... Línea 308...
333 
 
 308 
 
334 
  const handleShareFileModalShow = () => {
 309 
  const handleShareFileModalShow = () => {
335 
    setShareFileModalShow(!shareFileModalShow)
 310 
    setShareFileModalShow(!shareFileModalShow)
Línea 336... Línea 311...
336 
  }
 311 
  }
337 
 
 312 
 
338 
  const handleResponseMessage = (element) => {
 313 
  /* const handleResponseMessage = (element) => {
339 
    element.mtype === 'text'
 314 
    element.mtype === 'text'
Línea 340... Línea 315...
340 
      ? setResponseMessage(element)
 315 
      ? setResponseMessage(element)
341 
      : setResponseMessage({ ...element, m: 'Archivo adjunto' })
 316 
      : setResponseMessage({ ...element, m: 'Archivo adjunto' })
Línea 342... Línea 317...
342 
 
 317 
 
Línea 343... Línea 318...
343 
    textAreaEl.current && textAreaEl.current.focus()
 318 
    textAreaEl.current && textAreaEl.current.focus()
344 
  }
 319 
  } */
345 
 
 320 
 
346 
  const displayConferenceModal = () => setShowConferenceModal(!showConferenceModal)
 321 
  const displayConferenceModal = () => setShowConferenceModal(!showConferenceModal)
347 
 
 322 
 
348 
  const messagesRender = () => {
 323 
  const messagesRender = () => {
349 
    return (
 324 
    return (
350 
      <React.Fragment>
 - 
 
351 
        {currentPage < pages ? <li ref={loader}>Cargando...</li> : ''}
 - 
 
352 
        {oldMessages.map((oldMessage) => (
 - 
 
353 
          <MessageTemplate time={oldMessage.time} key={oldMessage.id} message={oldMessage} />
 - 
 
354 
        ))}
 - 
 
355 
        {messages.map((message, i) => {
 - 
 
356 
          const currentTime = message.time
 - 
 
357 
          const prevMessage = messages[i - 1]
 - 
 
358 
 
 - 
 
359 
          const dailys = ['mes', 'meses', 'semana', 'semanas', 'dia', 'dias', 'año', 'años']
 - 
 
360 
          // const date = new Date(Date.now()).toLocaleDateString()
 - 
 
361 
 
 - 
 
362 
          if (prevMessage !== undefined) {
 - 
 
363 
            const prevTime = messages[i - 1].time
 - 
 
364 
 
 - 
 
365 
            if (prevTime !== currentTime && dailys.includes(prevTime.split(' ')[1])) {
 - 
 
366 
              return <>
 - 
 
367 
                {/* <h2 className="text-center date-chat">{date}</h2> */}
 - 
 
368 
                <MessageTemplate
 - 
 
369 
                  key={message.id}
 - 
 
370 
                  message={message}
 - 
 
371 
                  time={message.time}
 - 
 
372 
                  setResponseMessage={handleResponseMessage}
 - 
 
373 
                  responseMessage={responseMessage}
 - 
 
374 
                />
 - 
 
375 
              </>
 - 
 
376 
            }
 - 
 
377 
          }
 - 
 
378 
 
 - 
 
379 
          return <MessageTemplate
 - 
 
380 
            key={message.id}
 325 
      <>
381 
            message={message}
 - 
 
382 
            time={message.time}
 - 
 
383 
            setResponseMessage={handleResponseMessage}
 326 
        {currentPage < lastPage ? <li ref={loader}>Cargando...</li> : ''}
384 
            responseMessage={responseMessage}
 327 
        {messages.map((message) => (
Línea 385... Línea 328...
385 
          />
 328 
          <MessageTemplate time={message.time} key={message.id} message={message} />
386 
        })}
 329 
        ))}