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>;

  }

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

            </Box>

          )}

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

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

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

        />

      </CardContent>

      <CardActions>

        <ChatForm onSubmit={sendMessage} />

      </CardActions>

    </Card>

  );

};