Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3603 | Rev 3605 | 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 
 
5 
import { Spinner } from '@shared/components';
6 
import EmptySection from '@components/UI/EmptySection';
7 
import MessageItem from './MessageItem';
8 
 
3604 stevensc 9 
const MessagesList = ({ messages = [], lastElementRef, 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 (
36 
    <Box
37 
      sx={{
38 
        display: 'flex',
39 
        flexDirection: 'column',
40 
        height: '100%',
3603 stevensc 41 
        overflow: 'hidden',
3599 stevensc 42 
        bgcolor: 'background.paper'
43 
      }}
44 
    >
45 
      <Box
46 
        sx={{
47 
          flex: 1,
48 
          overflow: 'auto',
49 
          display: 'flex',
50 
          flexDirection: 'column-reverse',
51 
          p: 1
52 
        }}
53 
      >
3603 stevensc 54 
        <div ref={messagesEndRef} />
3599 stevensc 55 
 
3604 stevensc 56 
        {messages.map((message, index) => {
57 
          if (index === messages.length - 1) {
58 
            return (
59 
              <MessageItem
60 
                ref={lastElementRef}
61 
                key={message.uuid}
62 
                message={message}
63 
                onReport={handleReport}
64 
              />
65 
            );
66 
          }
3600 stevensc 67 
 
3604 stevensc 68 
          return <MessageItem key={message.uuid} message={message} onReport={handleReport} />;
69 
        })}
70 
 
71 
        {loading && (
3603 stevensc 72 
          <Box
73 
            sx={{
74 
              display: 'flex',
75 
              justifyContent: 'center',
76 
              alignItems: 'center',
77 
              py: 2,
78 
              minHeight: '60px'
79 
            }}
80 
          >
3604 stevensc 81 
            <Spinner size='small' />
3601 stevensc 82 
          </Box>
83 
        )}
3599 stevensc 84 
      </Box>
85 
    </Box>
86 
  );
87 
};
88 
 
89 
export default MessagesList;