Proyectos de Subversion LeadersLinked - SPA

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

import useNearScreen from '@app/hooks/useNearScreen'

import EmptySection from '../UI/EmptySection'
import LoaderContainer from '../UI/LoaderContainer'
import Spinner from '../UI/Spinner'
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.length ? (
        <EmptySection
          Icon={<Inbox />}
          message='No hay mensajes en esta conversación'
          align='center'
        />
      ) : (
        messages.map((message) => (
          <Message
            key={message.id}
            message={message}
            reportUrl={message.url_abuse_report}
            onReport={onReport}
          />
        ))
      )}

      <p ref={ref}>.</p>
      {loading ? (
        <LoaderContainer>
          <Spinner />
        </LoaderContainer>
      ) : null}
    </MessagesContainer>
  )
}