Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 875 Rev 1668
Línea 1... Línea 1...
1 
import React, { memo, useEffect, useRef, useState } from 'react'
 1 
import React, { memo, useEffect, useState } from 'react'
2 
import { Link } from 'react-router-dom'
 2 
import { Link } from 'react-router-dom'
3 
import { axios } from '../../utils'
 3 
import { axios } from '../../utils'
4 
import { useForm } from 'react-hook-form'
 4 
import { useForm } from 'react-hook-form'
5 
import { useDispatch } from 'react-redux'
 5 
import { useDispatch } from 'react-redux'
6 
import { addNotification } from '../../redux/notification/notification.actions'
 6 
import { addNotification } from '../../redux/notification/notification.actions'
Línea 15... Línea 15...
15 
import Emojione from './emojione/Emojione'
 15 
import Emojione from './emojione/Emojione'
16 
import FileModal from '../modals/FileModal'
 16 
import FileModal from '../modals/FileModal'
17 
import LoaderContainer from '../UI/LoaderContainer'
 17 
import LoaderContainer from '../UI/LoaderContainer'
18 
import Spinner from '../UI/Spinner'
 18 
import Spinner from '../UI/Spinner'
19 
import Paraphrase from '../UI/Paraphrase'
 19 
import Paraphrase from '../UI/Paraphrase'
- 
 
 20 
import useNearScreen from '@app/hooks/useNearScreen'
Línea 20... Línea 21...
20 
 
 21 
 
21 
const StyledChatContainer = styled.div`
 22 
const StyledChatContainer = styled.div`
22 
  background-color: var(--bg-color);
 23 
  background-color: var(--bg-color);
23 
  border-radius: var(--border-radius);
 24 
  border-radius: var(--border-radius);
Línea 192... Línea 193...
192 
    </Link>
 193 
    </Link>
193 
  )
 194 
  )
194 
}
 195 
}
Línea 195... Línea 196...
195 
 
 196 
 
196 
const List = ({ messages = [], onPagination, scrollRef, loading }) => {
 197 
const List = ({ messages = [], onPagination, scrollRef, loading }) => {
- 
 
 198 
  const [isIntercepting, ref] = useNearScreen({
- 
 
 199 
    once: false,
- 
 
 200 
    rootMargin: '0px'
Línea 197... Línea 201...
197 
  const loadMoreEl = useRef(null)
 201 
  })
198 
 
 - 
 
199 
  useEffect(() => {
 - 
 
200 
    const observer = new IntersectionObserver(onPagination)
 202 
 
201 
 
 - 
 
202 
    if (loadMoreEl.current) {
 - 
 
203 
      observer.observe(loadMoreEl.current)
 - 
 
204 
    }
 - 
 
205 
 
 203 
  useEffect(() => {
206 
    return () => {
 204 
    if (isIntercepting) {
207 
      observer.disconnect()
 205 
      onPagination()
Línea 208... Línea 206...
208 
    }
 206 
    }
209 
  }, [messages])
 207 
  }, [isIntercepting])
210 
 
 208 
 
211 
  return (
 209 
  return (
212 
    <StyledMessageList ref={scrollRef}>
 210 
    <StyledMessageList ref={scrollRef}>
213 
      {messages.map((message) => (
 211 
      {messages.map((message) => (
214 
        <List.Message message={message} key={message.id} />
 212 
        <List.Message message={message} key={message.id} />
215 
      ))}
 213 
      ))}
216 
      <span ref={loadMoreEl}>.</span>
 214 
      <span ref={ref}>.</span>
217 
      {loading && (
 215 
      {loading && (
218 
        <StyledLoader>
 216 
        <StyledLoader>
Línea 261... Línea 259...
261 
              style={message.seen ? { color: 'blue' } : { color: 'gray' }}
 259 
              style={message.seen ? { color: 'blue' } : { color: 'gray' }}
262 
            />
 260 
            />
263 
          )}
 261 
          )}
264 
          {message.time || message.date}
 262 
          {message.time || message.date}
265 
        </label>
 263 
        </label>
- 
 
 264 
 
- 
 
 265 
        <Options right='-1.5rem' />
266 
      </StyledMessage>
 266 
      </StyledMessage>
267 
    </>
 267 
    </>
268 
  )
 268 
  )
269 
}, messageAreEqual)
 269 
}, messageAreEqual)