Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect } from 'react'
import { Box, styled } from '@mui/material'

import useNearScreen from '@app/hooks/useNearScreen'

import Message from './message'

const MessagesContainer = styled(Box)`
  gap: 0.5rem;
  display: flex;
  flex-direction: column-reverse;
  height: -webkit-fill-available;
  padding: 0.5rem 0;
  overflow: auto;
`

export default function MessagesList({
  messages = [],
  onPagination,
  onReport,
  scrollRef,
  loading
}) {
  const [isIntercepting, ref] = useNearScreen({
    once: false,
    rootMargin: '0px'
  })

  useEffect(() => {
    if (isIntercepting) {
      onPagination()
    }
  }, [isIntercepting])

  return (
    <MessagesContainer ref={scrollRef}>
      {messages.map((message) => (
        <Message onReport={onReport} message={message} key={message.id} />
      ))}

      <p ref={ref}>Loading</p>
    </MessagesContainer>
  )
}