Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 5308 Rev 5310
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 { finishLoading, getMessages, startLoading } from '../../../redux/conversation/conversation.actions'
 - 
 
Línea 21... Línea 20...
21 
 
 20 
 
22 
const StyledChatHead = styled.div`
 21 
const StyledChatHead = styled.div`
23 
  .notify {
 22 
  .notify {
24 
    animation: notify 2s infinite;
 23 
    animation: notify 2s infinite;
Línea 97... Línea 96...
97 
    url_get_contact_group_list,
 96 
    url_get_contact_group_list,
98 
    url_get_contacts_availables_for_group,
 97 
    url_get_contacts_availables_for_group,
99 
    url_zoom
 98 
    url_zoom
100 
  } = entity
 99 
  } = entity
Línea 101... Línea 100...
101 
 
 100 
 
102 
  const { messages, currentPage, lastPage, loading } = useSelector((state) => state.conversation)
 - 
 
Línea 103... Línea 101...
103 
  const dispatch = useDispatch()
 101 
  const state = useSelector((state) => state.conversation)
- 
 
 102 
 
104 
 
 103 
  // states
- 
 
 104 
  const [messages, setMessages] = useState([])
- 
 
 105 
  const [responseMessage, setResponseMessage] = useState(null)
- 
 
 106 
  const [oldMessages, setOldMessages] = useState([])
105 
  // states
 107 
  const [currentPage, setCurrentPage] = useState(1)
106 
  const [responseMessage, setResponseMessage] = useState(null)
 108 
  const [pages, setPages] = useState(1)
107 
  const [showOptions, setShowOptions] = useState(false)
 - 
 
108 
  const [optionTab, setOptionTab] = useState('default')
 109 
  const [showOptions, setShowOptions] = useState(false)
109 
 
 110 
  const [optionTab, setOptionTab] = useState('default')
110 
  const [availableContactsToAdd, setAvailableContactsToAdd] = useState([])
 - 
 
111 
  const [groupContactsList, setGroupContactsList] = useState([])
 111 
  const [availableContactsToAdd, setAvailableContactsToAdd] = useState([])
112 
 
 112 
  const [groupContactsList, setGroupContactsList] = useState([])
113 
  const [confirmModalShow, setConfirmModalShow] = useState(false)
 113 
  const [confirmModalShow, setConfirmModalShow] = useState(false)
114 
  const [showEmojiTab, setShowEmojiTab] = useState(false)
 114 
  const [showEmojiTab, setShowEmojiTab] = useState(false)
115 
  const [shareFileModalShow, setShareFileModalShow] = useState(false)
 - 
 
- 
 
 115 
  const [shareFileModalShow, setShareFileModalShow] = useState(false)
116 
  const [showConferenceModal, setShowConferenceModal] = useState(false)
 116 
  const [showConferenceModal, setShowConferenceModal] = useState(false)
Línea 117... Línea 117...
117 
 
 117 
  const [loading, setLoading] = useState(false)
Línea 118... Línea 118...
118 
  const [search, setSearch] = useState('')
 118 
  const [search, setSearch] = useState('')
Línea 124... Línea 124...
124 
  const loader = useRef(null)
 124 
  const loader = useRef(null)
125 
  const modalActionUrl = useRef('')
 125 
  const modalActionUrl = useRef('')
126 
  const chatboxEl = useRef(null)
 126 
  const chatboxEl = useRef(null)
127 
  const textAreaEl = useRef(null)
 127 
  const textAreaEl = useRef(null)
Línea -... Línea 128...
- 
 
 128 
 
- 
 
 129 
  console.log(state)
128 
 
 130 
 
129 
  // optionTabs
 131 
  // optionTabs
130 
  const optionTabs = {
 132 
  const optionTabs = {
131 
    add_person_to_group: 'add_person_to_group',
 133 
    add_person_to_group: 'add_person_to_group',
132 
    group_contacts_list: 'group_contacts_list',
 134 
    group_contacts_list: 'group_contacts_list',
Línea 138... Línea 140...
138 
    onRead(entity)
 140 
    onRead(entity)
139 
    onMinimize(entity)
 141 
    onMinimize(entity)
140 
  }
 142 
  }
Línea 141... Línea 143...
141 
 
 143 
 
142 
  const handleGetMessages = async () => {
 144 
  const handleGetMessages = async () => {
143 
    dispatch(startLoading())
 145 
    setLoading(true)
- 
 
 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) {
144 
    dispatch(getMessages(url_get_all_messages))
 160 
      setMessages([...messages, ...newMessages])
- 
 
 161 
      setLoading(false)
145 
    dispatch(finishLoading())
 162 
      setPages(resData.data.pages)
- 
 
 163 
      scrollToBottom()
- 
 
 164 
    } else {
- 
 
 165 
      setMessages([...updatedMessages])
- 
 
 166 
      setLoading(false)
146 
    scrollToBottom()
 167 
    }
Línea 147... Línea 168...
147 
  }
 168 
  }
148 
 
 169 
 
149 
  const handleLoadMore = async () => {
 170 
  const handleLoadMore = async () => {
150 
    await axios.get(`${url_get_all_messages}?page=${currentPage}`)
 171 
    await axios.get(`${url_get_all_messages}?page=${currentPage}`)
151 
      .then((response) => {
 172 
      .then((response) => {
152 
        const resData = response.data
 173 
        const resData = response.data
153 
        if (resData.success) {
 174 
        if (resData.success) {
154 
          if (resData.data.page > 1) {
 175 
          if (resData.data.page > 1) {
155 
            const updatedOldMessages = [...resData.data.items].reverse()
 176 
            const updatedOldMessages = [...resData.data.items].reverse()
156 
            // setOldMessages([...updatedOldMessages, ...oldMessages])
 177 
            setOldMessages([...updatedOldMessages, ...oldMessages])
157 
            /* scrollDownBy(100); */
 178 
            /* scrollDownBy(100); */
158 
          }
 179 
          }
159 
        }
 180 
        }
Línea 175... Línea 196...
175 
 
 196 
 
176 
          online
 197 
          online
177 
            ? newMessage = { ...newMessage, not_received: false }
 198 
            ? newMessage = { ...newMessage, not_received: false }
Línea 178... Línea 199...
178 
            : newMessage = { ...newMessage, not_received: true }
 199 
            : newMessage = { ...newMessage, not_received: true }
179 
 
 200 
 
180 
          // setMessages([...messages, newMessage])
 201 
          setMessages([...messages, newMessage])
181 
        }
 202 
        }
182 
      })
 203 
      })
183 
      e.target.value = ''
 204 
      e.target.value = ''
Línea 220... Línea 241...
220 
  }
 241 
  }
Línea 221... Línea 242...
221 
 
 242 
 
222 
  const handleObserver = (entities) => {
 243 
  const handleObserver = (entities) => {
223 
    const target = entities[0]
 244 
    const target = entities[0]
224 
    if (target.isIntersecting) {
 245 
    if (target.isIntersecting) {
225 
      // setCurrentPage((prevState) => prevState + 1)
 246 
      setCurrentPage((prevState) => prevState + 1)
226 
    }
 247 
    }
Línea 227... Línea 248...
227 
  }
 248 
  }
228 
 
 249 
 
Línea 324... Línea 345...
324 
 
 345 
 
Línea 325... Línea 346...
325 
  const displayConferenceModal = () => setShowConferenceModal(!showConferenceModal)
 346 
  const displayConferenceModal = () => setShowConferenceModal(!showConferenceModal)
326 
 
 347 
 
327 
  const messagesRender = () => {
 348 
  const messagesRender = () => {
328 
    return (
 349 
    return (
- 
 
 350 
      <React.Fragment>
- 
 
 351 
        {currentPage < pages ? <li ref={loader}>Cargando...</li> : ''}
- 
 
 352 
        {oldMessages.map((oldMessage) => (
329 
      <>
 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])) {
330 
        {currentPage < lastPage && <li ref={loader}>Cargando...</li>}
 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 
          }
331 
        {messages.map((message, i) => (
 378 
 
332 
          <MessageTemplate
 379 
          return <MessageTemplate
333 
            key={message.id}
 380 
            key={message.id}
334 
            message={message}
 381 
            message={message}
335 
            time={message.time}
 382 
            time={message.time}
336 
            setResponseMessage={handleResponseMessage}
 383 
            setResponseMessage={handleResponseMessage}
337 
            responseMessage={responseMessage}
 384 
            responseMessage={responseMessage}
338 
          />
 385 
          />
339 
        ))}
 386 
        })}
340 
      </>
 387 
      </React.Fragment>
Línea 341... Línea 388...
341 
    )
 388 
    )
342 
  }
 389 
  }