Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3601 | Rev 3604 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3601 Rev 3603
Línea 8... Línea 8...
8 
import MessageItem from './MessageItem';
 8 
import MessageItem from './MessageItem';
Línea 9... Línea 9...
9 
 
 9 
 
10 
const MessagesList = ({ messages = [], onLoadMore, loading = false, hasMore = false }) => {
 10 
const MessagesList = ({ messages = [], onLoadMore, loading = false, hasMore = false }) => {
11 
  const [isIntercepting, ref] = useNearScreen({
 11 
  const [isIntercepting, ref] = useNearScreen({
12 
    once: false,
 12 
    once: false,
13 
    rootMargin: '100px'
 13 
    rootMargin: '200px'
Línea 14... Línea 14...
14 
  });
 14 
  });
Línea 15... Línea 15...
15 
 
 15 
 
16 
  const messagesEndRef = useRef(null);
 16 
  const messagesEndRef = useRef(null);
17 
 
 17 
 
18 
  useEffect(() => {
 18 
  useEffect(() => {
19 
    if (isIntercepting && onLoadMore) {
 19 
    if (isIntercepting && hasMore && !loading && onLoadMore) {
Línea 20... Línea 20...
20 
      onLoadMore();
 20 
      onLoadMore();
21 
    }
 21 
    }
22 
  }, [isIntercepting, onLoadMore]);
 22 
  }, [isIntercepting, hasMore, loading, onLoadMore]);
- 
 
 23 
 
- 
 
 24 
  useEffect(() => {
- 
 
 25 
    if (messages.length > 0) {
- 
 
 26 
      messagesEndRef.current?.scrollIntoView({
23 
 
 27 
        behavior: 'smooth',
Línea 24... Línea 28...
24 
  useEffect(() => {
 28 
        block: 'end'
25 
    // Scroll to bottom when new messages are added
 29 
      });
26 
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
 30 
    }
27 
  }, [messages]);
 31 
  }, [messages.length]);
Línea 45... Línea 49...
45 
    <Box
 49 
    <Box
46 
      sx={{
 50 
      sx={{
47 
        display: 'flex',
 51 
        display: 'flex',
48 
        flexDirection: 'column',
 52 
        flexDirection: 'column',
49 
        height: '100%',
 53 
        height: '100%',
50 
        overflow: 'auto',
 54 
        overflow: 'hidden',
51 
        bgcolor: 'background.paper'
 55 
        bgcolor: 'background.paper'
52 
      }}
 56 
      }}
53 
    >
 57 
    >
54 
      <Box
 58 
      <Box
55 
        sx={{
 59 
        sx={{
Línea 58... Línea 62...
58 
          display: 'flex',
 62 
          display: 'flex',
59 
          flexDirection: 'column-reverse',
 63 
          flexDirection: 'column-reverse',
60 
          p: 1
 64 
          p: 1
61 
        }}
 65 
        }}
62 
      >
 66 
      >
63 
        {messages.map((message) => {
 - 
 
64 
          {
 - 
 
65 
            /* if (index === messages.length - 1) {
 - 
 
66 
            return (
 - 
 
67 
              <MessageItem
 - 
 
68 
                key={message.uuid}
 - 
 
69 
                message={message}
 - 
 
70 
                onReport={handleReport}
 - 
 
71 
                ref={messagesEndRef}
 67 
        <div ref={messagesEndRef} />
72 
              />
 - 
 
73 
            );
 - 
 
74 
          } */
 - 
 
75 
          }
 - 
 
Línea -... Línea 68...
- 
 
 68 
 
76 
 
 69 
        {messages.map((message) => (
77 
          return <MessageItem key={message.uuid} message={message} onReport={handleReport} />;
 70 
          <MessageItem key={message.uuid} message={message} onReport={handleReport} />
Línea 78... Línea -...
78 
        })}
 - 
 
79 
 
 71 
        ))}
- 
 
 72 
 
- 
 
 73 
        {hasMore && (
- 
 
 74 
          <Box
- 
 
 75 
            ref={ref}
80 
        {/* Loading indicator for infinite scroll */}
 76 
            sx={{
- 
 
 77 
              display: 'flex',
- 
 
 78 
              justifyContent: 'center',
81 
        {hasMore && (
 79 
              alignItems: 'center',
- 
 
 80 
              py: 2,
- 
 
 81 
              minHeight: '60px'
- 
 
 82 
            }}
- 
 
 83 
          >
- 
 
 84 
            {loading ? <Spinner size='small' /> : <Box sx={{ height: '20px' }} />}
- 
 
 85 
          </Box>
- 
 
 86 
        )}
- 
 
 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 
            }}
82 
          <Box ref={ref} sx={{ display: 'flex', justifyContent: 'center', py: 2 }}>
 96 
          >
83 
            <Spinner size='small' />
 97 
            No hay más mensajes
84 
          </Box>
 98 
          </Box>
85 
        )}
 99 
        )}
86 
      </Box>
 100 
      </Box>