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 './messages/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>

  );

}