Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3600 | Rev 3603 | 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 { useNearScreen } from '@hooks';
6 
import { Spinner } from '@shared/components';
7 
import EmptySection from '@components/UI/EmptySection';
8 
import MessageItem from './MessageItem';
9 
 
3601 stevensc 10 
const MessagesList = ({ messages = [], onLoadMore, loading = false, hasMore = false }) => {
3599 stevensc 11 
  const [isIntercepting, ref] = useNearScreen({
12 
    once: false,
13 
    rootMargin: '100px'
14 
  });
15 
 
16 
  const messagesEndRef = useRef(null);
17 
 
18 
  useEffect(() => {
19 
    if (isIntercepting && onLoadMore) {
20 
      onLoadMore();
21 
    }
22 
  }, [isIntercepting, onLoadMore]);
23 
 
24 
  useEffect(() => {
25 
    // Scroll to bottom when new messages are added
26 
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
27 
  }, [messages]);
28 
 
29 
  const handleReport = ({ url, id }) => {
30 
    // Aquí puedes implementar la lógica de reporte
31 
    console.log('Reportar mensaje:', { url, id });
32 
  };
33 
 
34 
  if (!messages.length && !loading) {
35 
    return (
36 
      <EmptySection
37 
        Icon={<Inbox />}
38 
        message='No hay mensajes en esta conversación'
39 
        align='center'
40 
      />
41 
    );
42 
  }
43 
 
44 
  return (
45 
    <Box
46 
      sx={{
47 
        display: 'flex',
48 
        flexDirection: 'column',
49 
        height: '100%',
50 
        overflow: 'auto',
51 
        bgcolor: 'background.paper'
52 
      }}
53 
    >
54 
      <Box
55 
        sx={{
56 
          flex: 1,
57 
          overflow: 'auto',
58 
          display: 'flex',
59 
          flexDirection: 'column-reverse',
60 
          p: 1
61 
        }}
62 
      >
3601 stevensc 63 
        {messages.map((message) => {
64 
          {
65 
            /* if (index === messages.length - 1) {
3600 stevensc 66 
            return (
67 
              <MessageItem
68 
                key={message.uuid}
69 
                message={message}
70 
                onReport={handleReport}
71 
                ref={messagesEndRef}
72 
              />
73 
            );
3601 stevensc 74 
          } */
3600 stevensc 75 
          }
3599 stevensc 76 
 
3600 stevensc 77 
          return <MessageItem key={message.uuid} message={message} onReport={handleReport} />;
78 
        })}
79 
 
3599 stevensc 80 
        {/* Loading indicator for infinite scroll */}
3601 stevensc 81 
        {hasMore && (
82 
          <Box ref={ref} sx={{ display: 'flex', justifyContent: 'center', py: 2 }}>
83 
            <Spinner size='small' />
84 
          </Box>
85 
        )}
3599 stevensc 86 
      </Box>
87 
    </Box>
88 
  );
89 
};
90 
 
91 
export default MessagesList;