Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3606 | Rev 3608 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3599 stevensc 1 
import React, { useEffect, useRef } from 'react';
2 
import { Box } from '@mui/material';
3 
import { Inbox } from '@mui/icons-material';
4 
 
3605 stevensc 5 
import { Card, CardContent, CardHeader, Spinner } from '@shared/components';
3599 stevensc 6 
import EmptySection from '@components/UI/EmptySection';
7 
import MessageItem from './MessageItem';
8 
 
3607 stevensc 9 
const MessagesList = ({ messages = [], elementRef, loading = false }) => {
3599 stevensc 10 
  const messagesEndRef = useRef(null);
11 
 
12 
  useEffect(() => {
3603 stevensc 13 
    if (messages.length > 0) {
14 
      messagesEndRef.current?.scrollIntoView({
15 
        behavior: 'smooth',
16 
        block: 'end'
17 
      });
18 
    }
19 
  }, [messages.length]);
3599 stevensc 20 
 
21 
  const handleReport = ({ url, id }) => {
22 
    console.log('Reportar mensaje:', { url, id });
23 
  };
24 
 
25 
  if (!messages.length && !loading) {
26 
    return (
27 
      <EmptySection
28 
        Icon={<Inbox />}
29 
        message='No hay mensajes en esta conversación'
30 
        align='center'
31 
      />
32 
    );
33 
  }
34 
 
35 
  return (
3605 stevensc 36 
    <Card>
37 
      <CardHeader title='Mensajes' />
38 
      <CardContent>
39 
        <Box
40 
          sx={{
41 
            display: 'flex',
3607 stevensc 42 
            maxHeight: '60dvh',
3605 stevensc 43 
            flexDirection: 'column-reverse',
44 
            overflow: 'auto'
45 
          }}
46 
        >
47 
          <div ref={messagesEndRef} />
3599 stevensc 48 
 
3605 stevensc 49 
          {messages.map((message, index) => {
50 
            if (index === messages.length - 1) {
51 
              return (
52 
                <MessageItem
3607 stevensc 53 
                  elementRef={elementRef}
3605 stevensc 54 
                  key={message.uuid}
55 
                  message={message}
56 
                  onReport={handleReport}
57 
                />
58 
              );
59 
            }
3600 stevensc 60 
 
3605 stevensc 61 
            return <MessageItem key={message.uuid} message={message} onReport={handleReport} />;
62 
          })}
3604 stevensc 63 
 
3605 stevensc 64 
          {loading && (
65 
            <Box
66 
              sx={{
67 
                display: 'flex',
68 
                justifyContent: 'center',
69 
                alignItems: 'center',
70 
                minHeight: '60px'
71 
              }}
72 
            >
73 
              <Spinner size='small' />
74 
            </Box>
75 
          )}
76 
        </Box>
77 
      </CardContent>
78 
    </Card>
3599 stevensc 79 
  );
80 
};
81 
 
82 
export default MessagesList;