Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useRef } from 'react';

import { Box, Typography } from '@mui/material';

import { usePagination } from '@shared/hooks';

import { Card, CardContent, CardHeader, List, Menu, Spinner } from '@shared/components';

import { MessageItem } from './MessageItem';

export const MessagesList = ({ conversation, onDelete, onClose }) => {

  const messagesEndRef = useRef(null);

  const {

    items: messages,

    loading,

    elementRef,

    resetPagination

  } = usePagination(conversation?.messages_url);

  const sendMessage = (message) => {

    // TODO: Implementar envío de mensaje

  };

  const handleReport = (message) => {

    // TODO: Implementar reporte de mensaje

  };

  useEffect(() => {

    if (messages.length > 0) {

      messagesEndRef.current?.scrollIntoView({

        behavior: 'smooth',

        block: 'end'

      });

    }

  }, [messages.length]);

  if (!messages.length && !loading) {

    return (

      <Typography sx={{ textAlign: 'center' }}>No hay mensajes en esta conversación</Typography>

    );

  }

  return (

    <Card>

      <CardHeader

        title={conversation.name}

        renderAction={() => (

          <Menu>

            {onDelete && <Menu.Item onClick={onDelete}>Borrar convesación</Menu.Item>}

            <Menu.Item onClick={onClose}>Cerrar conversación</Menu.Item>

          </Menu>

        )}

      />

      <CardContent>

        <List

          items={messages}

          keyExtractor={(message) => message.uuid}

          emptyMessage='No hay mensajes en esta conversación'

          renderItem={(message, index) => (

            <Box ref={index === messages.length - 1 ? elementRef : null}>

              <MessageItem message={message} onReport={handleReport} />

            </Box>

          )}

          renderHeader={() => <div ref={messagesEndRef} />}

          renderFooter={() => loading && <Spinner />}

          style={{ flexDirection: 'column-reverse', maxHeight: '50dvh', overflow: 'auto' }}

        />

      </CardContent>

      {/* <Chat.SubmitForm

        sendUrl={conversation.send_link}

        uploadUrl={conversation.send_link}

        onSubmit={() => scrollToBottom(messagesList)}

      /> */}

    </Card>

  );

};