Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3599 | Rev 3601 | 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 
 
10 
const MessagesList = ({ messages = [], onLoadMore, loading = false }) => {
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 
      >
3600 stevensc 63 
        {messages.map((message, index) => {
64 
          if (index === messages.length - 1) {
65 
            return (
66 
              <MessageItem
67 
                key={message.uuid}
68 
                message={message}
69 
                onReport={handleReport}
70 
                ref={messagesEndRef}
71 
              />
72 
            );
73 
          }
3599 stevensc 74 
 
3600 stevensc 75 
          return <MessageItem key={message.uuid} message={message} onReport={handleReport} />;
76 
        })}
77 
 
3599 stevensc 78 
        {/* Loading indicator for infinite scroll */}
79 
        <Box ref={ref} sx={{ display: 'flex', justifyContent: 'center', py: 2 }}>
80 
          {loading && <Spinner size='small' />}
81 
        </Box>
82 
      </Box>
83 
    </Box>
84 
  );
85 
};
86 
 
87 
export default MessagesList;