Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3608 Rev 3610
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, Typography } from '@mui/material';
3 
import { Inbox } from '@mui/icons-material';
 - 
 
Línea 4... Línea -...
4 
 
 - 
 
5 
import { Card, CardContent, CardHeader, Spinner } from '@shared/components';
 - 
 
6 
import EmptySection from '@components/UI/EmptySection';
 3 
 
Línea -... Línea 4...
- 
 
 4 
import { usePagination } from '@shared/hooks';
- 
 
 5 
 
- 
 
 6 
import { Card, CardContent, CardHeader, List, Menu, Spinner } from '@shared/components';
7 
import MessageItem from './MessageItem';
 7 
import { MessageItem } from './MessageItem';
8 
 
 8 
 
Línea -... Línea 9...
- 
 
 9 
export const MessagesList = ({ conversation, onDelete, onClose }) => {
- 
 
 10 
  const messagesEndRef = useRef(null);
- 
 
 11 
 
- 
 
 12 
  const {
- 
 
 13 
    items: messages,
- 
 
 14 
    loading,
- 
 
 15 
    elementRef,
- 
 
 16 
    resetPagination
- 
 
 17 
  } = usePagination(conversation?.messages_url);
- 
 
 18 
 
- 
 
 19 
  const sendMessage = (message) => {
- 
 
 20 
    // TODO: Implementar envío de mensaje
- 
 
 21 
  };
- 
 
 22 
 
- 
 
 23 
  const handleReport = (message) => {
9 
const MessagesList = ({ messages = [], elementRef, loading = false }) => {
 24 
    // TODO: Implementar reporte de mensaje
10 
  const messagesEndRef = useRef(null);
 25 
  };
11 
 
 26 
 
12 
  useEffect(() => {
 27 
  useEffect(() => {
13 
    if (messages.length > 0) {
 28 
    if (messages.length > 0) {
14 
      messagesEndRef.current?.scrollIntoView({
 29 
      messagesEndRef.current?.scrollIntoView({
15 
        behavior: 'smooth',
 30 
        behavior: 'smooth',
16 
        block: 'end'
 31 
        block: 'end'
Línea 17... Línea -...
17 
      });
 - 
 
18 
    }
 - 
 
19 
  }, [messages.length]);
 - 
 
20 
 
 - 
 
21 
  const handleReport = ({ url, id }) => {
 32 
      });
22 
    console.log('Reportar mensaje:', { url, id });
 33 
    }
23 
  };
 - 
 
24 
 
 - 
 
25 
  if (!messages.length && !loading) {
 34 
  }, [messages.length]);
26 
    return (
 - 
 
27 
      <EmptySection
 - 
 
28 
        Icon={<Inbox />}
 35 
 
29 
        message='No hay mensajes en esta conversación'
 36 
  if (!messages.length && !loading) {
Línea 30... Línea 37...
30 
        align='center'
 37 
    return (
31 
      />
 38 
      <Typography sx={{ textAlign: 'center' }}>No hay mensajes en esta conversación</Typography>
- 
 
 39 
    );
- 
 
 40 
  }
32 
    );
 41 
 
- 
 
 42 
  return (
- 
 
 43 
    <Card>
- 
 
 44 
      <CardHeader
- 
 
 45 
        title={conversation.name}
- 
 
 46 
        renderAction={() => (
- 
 
 47 
          <Menu>
33 
  }
 48 
            {onDelete && <Menu.Item onClick={onDelete}>Borrar convesación</Menu.Item>}
34 
 
 49 
            <Menu.Item onClick={onClose}>Cerrar conversación</Menu.Item>
35 
  return (
 - 
 
36 
    <Card>
 50 
          </Menu>
37 
      <CardHeader title='Mensajes' />
 - 
 
38 
      <CardContent>
 51 
        )}
39 
        <Box
 - 
 
40 
          sx={{
 - 
 
41 
            display: 'flex',
 - 
 
42 
            maxHeight: '60dvh',
 52 
      />
43 
            flexDirection: 'column-reverse',
 - 
 
44 
            overflow: 'auto'
 53 
      <CardContent>
45 
          }}
 54 
        <List
46 
        >
 - 
 
47 
          <div ref={messagesEndRef} />
 - 
 
48 
 
 55 
          items={messages}
49 
          {messages.map((message, index) => {
 - 
 
50 
            if (index === messages.length - 1) {
 - 
 
51 
              return (
 - 
 
52 
                <Box ref={elementRef} key={message.uuid}>
 - 
 
53 
                  <MessageItem key={message.uuid} message={message} onReport={handleReport} />
 - 
 
54 
                </Box>
 - 
 
55 
              );
 - 
 
56 
            }
 - 
 
57 
 
 - 
 
58 
            return <MessageItem key={message.uuid} message={message} onReport={handleReport} />;
 - 
 
59 
          })}
 - 
 
60 
 
 - 
 
61 
          {loading && (
 - 
 
62 
            <Box
 - 
 
63 
              sx={{
 - 
 
64 
                display: 'flex',
 - 
 
65 
                justifyContent: 'center',
 - 
 
66 
                alignItems: 'center',
 56 
          keyExtractor={(message) => message.uuid}
67 
                minHeight: '60px'
 57 
          emptyMessage='No hay mensajes en esta conversación'
- 
 
 58 
          renderItem={(message, index) => (
- 
 
 59 
            <Box ref={index === messages.length - 1 ? elementRef : null}>
- 
 
 60 
              <MessageItem message={message} onReport={handleReport} />
68 
              }}
 61 
            </Box>
69 
            >
 62 
          )}
- 
 
 63 
          renderHeader={() => <div ref={messagesEndRef} />}
- 
 
 64 
          renderFooter={() => loading && <Spinner size='small' />}
- 
 
 65 
          styles={{ flexDirection: 'column-reverse', maxHeight: '60dvh', overflow: 'auto' }}
- 
 
 66 
        />
- 
 
 67 
      </CardContent>
- 
 
 68 
 
70 
              <Spinner size='small' />
 69 
      {/* <Chat.SubmitForm
71 
            </Box>
 70 
        sendUrl={conversation.send_link}
72 
          )}
 71 
        uploadUrl={conversation.send_link}
73 
        </Box>
 - 
 
74 
      </CardContent>
 -