Proyectos de Subversion LeadersLinked - SPA

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

import { useNearScreen } from '@hooks'

import Message from './Message'
import Spinner from '@components/UI/Spinner'
import EmptySection from '@components/UI/EmptySection'

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

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

  if (!messages.length) {
    return (
      <EmptySection
        Icon={<Inbox />}
        message='No hay mensajes en esta conversación'
        align='center'
      />
    )
  }

  return (
    <Box
      sx={{
        gap: ({ spacing }) => spacing(0.5),
        display: 'flex',
        flexDirection: 'column-reverse',
        height: '-webkit-fill-available',
        padding: ({ spacing }) => spacing(0.5, 0),
        overflow: 'auto'
      }}
      ref={scrollRef}
    >
      {messages.map((message) => (
        <Message
          key={message.id}
          message={message}
          reportUrl={message.url_abuse_report}
          onReport={onReport}
        />
      ))}
      <div ref={ref}>{loading && <Spinner />}</div>
    </Box>
  )
}