Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3600 | Ir a la última revisión | | 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 
      >
63 
        {messages.map((message) => (
64 
          <MessageItem key={message.uuid} message={message} onReport={handleReport} />
65 
        ))}
66 
 
67 
        {/* Loading indicator for infinite scroll */}
68 
        <Box ref={ref} sx={{ display: 'flex', justifyContent: 'center', py: 2 }}>
69 
          {loading && <Spinner size='small' />}
70 
        </Box>
71 
 
72 
        {/* Invisible element to scroll to bottom */}
73 
        <div ref={messagesEndRef} />
74 
      </Box>
75 
    </Box>
76 
  );
77 
};
78 
 
79 
export default MessagesList;