Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3603 Rev 3604
Línea 1... Línea 1...
1 
import React, { useEffect, useRef } from 'react';
 1 
import React, { useEffect, useRef } from 'react';
2 
import { Box } from '@mui/material';
 2 
import { Box } from '@mui/material';
3 
import { Inbox } from '@mui/icons-material';
 3 
import { Inbox } from '@mui/icons-material';
Línea 4... Línea -...
4 
 
 - 
 
5 
import { useNearScreen } from '@hooks';
 4 
 
6 
import { Spinner } from '@shared/components';
 5 
import { Spinner } from '@shared/components';
7 
import EmptySection from '@components/UI/EmptySection';
 6 
import EmptySection from '@components/UI/EmptySection';
Línea 8... Línea 7...
8 
import MessageItem from './MessageItem';
 7 
import MessageItem from './MessageItem';
9 
 
 - 
 
10 
const MessagesList = ({ messages = [], onLoadMore, loading = false, hasMore = false }) => {
 - 
 
11 
  const [isIntercepting, ref] = useNearScreen({
 - 
 
12 
    once: false,
 - 
 
13 
    rootMargin: '200px'
 - 
 
14 
  });
 8 
 
Línea 15... Línea 9...
15 
 
 9 
const MessagesList = ({ messages = [], lastElementRef, loading = false }) => {
16 
  const messagesEndRef = useRef(null);
 - 
 
17 
 
 - 
 
18 
  useEffect(() => {
 - 
 
19 
    if (isIntercepting && hasMore && !loading && onLoadMore) {
 - 
 
20 
      onLoadMore();
 - 
 
21 
    }
 - 
 
22 
  }, [isIntercepting, hasMore, loading, onLoadMore]);
 10 
  const messagesEndRef = useRef(null);
23 
 
 11 
 
24 
  useEffect(() => {
 12 
  useEffect(() => {
25 
    if (messages.length > 0) {
 13 
    if (messages.length > 0) {
26 
      messagesEndRef.current?.scrollIntoView({
 14 
      messagesEndRef.current?.scrollIntoView({
27 
        behavior: 'smooth',
 15 
        behavior: 'smooth',
28 
        block: 'end'
 16 
        block: 'end'
Línea 29... Línea 17...
29 
      });
 17 
      });
30 
    }
 - 
 
31 
  }, [messages.length]);
 18 
    }
32 
 
 19 
  }, [messages.length]);
Línea 33... Línea 20...
33 
  const handleReport = ({ url, id }) => {
 20 
 
34 
    // Aquí puedes implementar la lógica de reporte
 21 
  const handleReport = ({ url, id }) => {
Línea 64... Línea 51...
64 
          p: 1
 51 
          p: 1
65 
        }}
 52 
        }}
66 
      >
 53 
      >
67 
        <div ref={messagesEndRef} />
 54 
        <div ref={messagesEndRef} />
Línea 68... Línea 55...
68 
 
 55 
 
- 
 
 56 
        {messages.map((message, index) => {
- 
 
 57 
          if (index === messages.length - 1) {
- 
 
 58 
            return (
- 
 
 59 
              <MessageItem
- 
 
 60 
                ref={lastElementRef}
- 
 
 61 
                key={message.uuid}
69 
        {messages.map((message) => (
 62 
                message={message}
- 
 
 63 
                onReport={handleReport}
- 
 
 64 
              />
70 
          <MessageItem key={message.uuid} message={message} onReport={handleReport} />
 65 
            );
Línea -... Línea 66...
- 
 
 66 
          }
- 
 
 67 
 
- 
 
 68 
          return <MessageItem key={message.uuid} message={message} onReport={handleReport} />;
71 
        ))}
 69 
        })}
72 
 
 70 
 
73 
        {hasMore && (
 - 
 
74 
          <Box
 71 
        {loading && (
75 
            ref={ref}
 72 
          <Box
76 
            sx={{
 73 
            sx={{
77 
              display: 'flex',
 74 
              display: 'flex',
78 
              justifyContent: 'center',
 75 
              justifyContent: 'center',
79 
              alignItems: 'center',
 76 
              alignItems: 'center',
80 
              py: 2,
 77 
              py: 2,
81 
              minHeight: '60px'
 78 
              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,
 79 
            }}
93 
              color: 'text.secondary',
 - 
 
94 
              fontSize: '0.875rem'
 - 
 
95 
            }}
 - 
 
96 
          >
 80 
          >
97 
            No hay más mensajes
 81 
            <Spinner size='small' />
98 
          </Box>
 82 
          </Box>
99 
        )}
 83 
        )}
100 
      </Box>
 84 
      </Box>