Proyectos de Subversion LeadersLinked - SPA

import React from 'react';

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

import { useMessages } from '@inmail/hooks';

import {

  Card,

  CardActions,

  CardContent,

  CardHeader,

  List,

  Menu,

  Spinner

} from '@shared/components';

import { MessageItem } from './MessageItem';

import { ChatForm } from '../chat';

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

  const { messages, loading, messagesEndRef, elementRef, sendMessage, reportMessage } =

    useMessages(conversation);

  if (!conversation) {

    return <Typography sx={{ textAlign: 'center' }}>Selecciona una conversación</Typography>;

  }

  return (

    <Card>

      <CardHeader

        title={conversation.name}

        renderAction={() => (

          <Menu>

            {conversation.delete_url && (

              <Menu.Item onClick={() => onDelete(conversation.delete_url)}>

                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={reportMessage} />

            </Box>

          )}

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

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

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

        />

      </CardContent>

      <CardActions>

        <ChatForm onSubmit={sendMessage} />

      </CardActions>

    </Card>

  );

};