Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3621 Rev 3622
Línea 1... Línea 1...
1 
import React, { useEffect, useRef } from 'react';
 1 
import React from 'react';
2 
import { Box, Typography } from '@mui/material';
 2 
import { Box, Typography } from '@mui/material';
Línea 3... Línea 3...
3 
 
 3 
 
Línea -... Línea 4...
- 
 
 4 
import { useMessages } from '@hooks';
- 
 
 5 
 
- 
 
 6 
import {
- 
 
 7 
  Card,
- 
 
 8 
  CardActions,
- 
 
 9 
  CardContent,
- 
 
 10 
  CardHeader,
- 
 
 11 
  List,
4 
import { usePagination } from '@shared/hooks';
 12 
  Menu,
5 
 
 13 
  Spinner
- 
 
 14 
} from '@shared/components';
Línea 6... Línea 15...
6 
import { Card, CardContent, CardHeader, List, Menu, Spinner } from '@shared/components';
 15 
import { MessageItem } from './MessageItem';
- 
 
 16 
import { ChatForm } from '../chat';
7 
import { MessageItem } from './MessageItem';
 17 
 
- 
 
 18 
export const MessagesList = ({ conversation, onDelete, onClose }) => {
Línea 8... Línea -...
8 
 
 - 
 
9 
export const MessagesList = ({ conversation, onDelete, onClose }) => {
 - 
 
10 
  const messagesEndRef = useRef(null);
 - 
 
11 
 
 - 
 
12 
  const {
 19 
  const { messages, loading, messagesEndRef, elementRef, sendMessage } = useMessages(
13 
    items: messages,
 20 
    conversation?.messages_url
14 
    loading,
 - 
 
15 
    elementRef,
 - 
 
16 
    resetPagination
 - 
 
17 
  } = usePagination(conversation?.messages_url);
 - 
 
18 
 
 - 
 
19 
  const sendMessage = (message) => {
 - 
 
20 
    // TODO: Implementar envío de mensaje
 - 
 
21 
  };
 21 
  );
22 
 
 - 
 
23 
  const handleReport = (message) => {
 - 
 
24 
    // TODO: Implementar reporte de mensaje
 - 
 
25 
  };
 - 
 
26 
 
 - 
 
27 
  useEffect(() => {
 - 
 
28 
    if (messages.length > 0) {
 - 
 
29 
      messagesEndRef.current?.scrollIntoView({
 - 
 
30 
        behavior: 'smooth',
 - 
 
Línea 31... Línea 22...
31 
        block: 'end'
 22 
 
32 
      });
 23 
  if (!conversation) {
33 
    }
 24 
    return <Typography sx={{ textAlign: 'center' }}>Selecciona una conversación</Typography>;
34 
  }, [messages.length]);
 25 
  }
Línea 55... Línea 46...
55 
          items={messages}
 46 
          items={messages}
56 
          keyExtractor={(message) => message.uuid}
 47 
          keyExtractor={(message) => message.uuid}
57 
          emptyMessage='No hay mensajes en esta conversación'
 48 
          emptyMessage='No hay mensajes en esta conversación'
58 
          renderItem={(message, index) => (
 49 
          renderItem={(message, index) => (
59 
            <Box ref={index === messages.length - 1 ? elementRef : null}>
 50 
            <Box ref={index === messages.length - 1 ? elementRef : null}>
60 
              <MessageItem message={message} onReport={handleReport} />
 51 
              <MessageItem message={message} />
61 
            </Box>
 52 
            </Box>
62 
          )}
 53 
          )}
63 
          renderHeader={() => <div ref={messagesEndRef} />}
 54 
          renderHeader={() => <div ref={messagesEndRef} />}
64 
          renderFooter={() => loading && <Spinner />}
 55 
          renderFooter={() => loading && <Spinner />}
65 
          style={{ flexDirection: 'column-reverse', maxHeight: '50dvh', overflow: 'auto' }}
 56 
          style={{ flexDirection: 'column-reverse', maxHeight: '50dvh', overflow: 'auto' }}
66 
        />
 57 
        />
67 
      </CardContent>
 58 
      </CardContent>
Línea 68... Línea 59...
68 
 
 59 
 
69 
      {/* <Chat.SubmitForm
 - 
 
70 
        sendUrl={conversation.send_link}
 - 
 
71 
        uploadUrl={conversation.send_link}
 60 
      <CardActions>
72 
        onSubmit={() => scrollToBottom(messagesList)}
 61 
        <ChatForm onSubmit={(message) => sendMessage(conversation?.send_url, message)} />
73 
      /> */}
 62 
      </CardActions>
74 
    </Card>
 63 
    </Card>
75 
  );
 64 
  );