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>

  )

}