Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3601 | Rev 3604 | 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,
3603 stevensc 13 
    rootMargin: '200px'
3599 stevensc 14 
  });
15 
 
16 
  const messagesEndRef = useRef(null);
17 
 
18 
  useEffect(() => {
3603 stevensc 19 
    if (isIntercepting && hasMore && !loading && onLoadMore) {
3599 stevensc 20 
      onLoadMore();
21 
    }
3603 stevensc 22 
  }, [isIntercepting, hasMore, loading, onLoadMore]);
3599 stevensc 23 
 
24 
  useEffect(() => {
3603 stevensc 25 
    if (messages.length > 0) {
26 
      messagesEndRef.current?.scrollIntoView({
27 
        behavior: 'smooth',
28 
        block: 'end'
29 
      });
30 
    }
31 
  }, [messages.length]);
3599 stevensc 32 
 
33 
  const handleReport = ({ url, id }) => {
34 
    // Aquí puedes implementar la lógica de reporte
35 
    console.log('Reportar mensaje:', { url, id });
36 
  };
37 
 
38 
  if (!messages.length && !loading) {
39 
    return (
40 
      <EmptySection
41 
        Icon={<Inbox />}
42 
        message='No hay mensajes en esta conversación'
43 
        align='center'
44 
      />
45 
    );
46 
  }
47 
 
48 
  return (
49 
    <Box
50 
      sx={{
51 
        display: 'flex',
52 
        flexDirection: 'column',
53 
        height: '100%',
3603 stevensc 54 
        overflow: 'hidden',
3599 stevensc 55 
        bgcolor: 'background.paper'
56 
      }}
57 
    >
58 
      <Box
59 
        sx={{
60 
          flex: 1,
61 
          overflow: 'auto',
62 
          display: 'flex',
63 
          flexDirection: 'column-reverse',
64 
          p: 1
65 
        }}
66 
      >
3603 stevensc 67 
        <div ref={messagesEndRef} />
3599 stevensc 68 
 
3603 stevensc 69 
        {messages.map((message) => (
70 
          <MessageItem key={message.uuid} message={message} onReport={handleReport} />
71 
        ))}
3600 stevensc 72 
 
3601 stevensc 73 
        {hasMore && (
3603 stevensc 74 
          <Box
75 
            ref={ref}
76 
            sx={{
77 
              display: 'flex',
78 
              justifyContent: 'center',
79 
              alignItems: 'center',
80 
              py: 2,
81 
              minHeight: '60px'
82 
            }}
83 
          >
84 
            {loading ? <Spinner size='small' /> : <Box sx={{ height: '20px' }} />}
3601 stevensc 85 
          </Box>
86 
        )}
3603 stevensc 87 
 
88 
        {!hasMore && messages.length > 0 && (
89 
          <Box
90 
            sx={{
91 
              textAlign: 'center',
92 
              py: 2,
93 
              color: 'text.secondary',
94 
              fontSize: '0.875rem'
95 
            }}
96 
          >
97 
            No hay más mensajes
98 
          </Box>
99 
        )}
3599 stevensc 100 
      </Box>
101 
    </Box>
102 
  );
103 
};
104 
 
105 
export default MessagesList;