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>

  )

}