Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3658 Rev 3671
Línea 1... Línea 1...
1 
import React, { useEffect, useRef, useState } from 'react';
 1 
import React, { useMemo, useRef, useState } from 'react';
2 
 
 2 
 
3 
import { useAlert, useApi, useModal, usePagination } from '@shared/hooks';
 3 
import { useAlert, useApi, useModal, usePagination, useInterceptionObserver } from '@shared/hooks';
4 
import { saveMessage, reportMessage } from '@inmail/services';
 4 
import { saveMessage, reportMessage } from '@inmail/services';
- 
 
 5 
 
5 
import { ReportModal } from '@shared/components';
 6 
import { ReportModal } from '@shared/components';
6 
 
 7 
 
7 
export const useMessages = (conversation) => {
 8 
export const useMessages = (conversation) => {
8 
  const [messages, setMessages] = useState([]);
 9 
  const [newMessages, setNewMessages] = useState([]);
9 
  const [newMessages, setNewMessages] = useState([]);
 10 
  const [reportedMessages, setReportedMessages] = useState(new Map());
10 
  const [reportedUrl, setReportedUrl] = useState(null);
 11 
  const [reportedUrl, setReportedUrl] = useState(null);
11 
  const messagesEndRef = useRef(null);
 12 
  const messagesEndRef = useRef(null);
12 
 
 13 
 
13 
  const { items, loading, elementRef, resetPagination } = usePagination(conversation?.messages_url);
 14 
  const { data, loading, hasMore, loadMore, refresh } = usePagination(conversation?.messages_url);
- 
 
 15 
 
- 
 
 16 
  const { elementRef } = useInterceptionObserver({
- 
 
 17 
    onIntersect: hasMore ? loadMore : undefined
- 
 
 18 
  });
14 
 
 19 
 
15 
  const { showError, showSuccess } = useAlert();
 20 
  const { showError, showSuccess } = useAlert();
16 
  const { showModal, closeModal } = useModal();
 21 
  const { showModal, closeModal } = useModal();
17 
 
 22 
 
18 
  const { execute } = useApi(saveMessage, {
 23 
  const { execute } = useApi(saveMessage, {
19 
    onSuccess: (data) => {
 24 
    onSuccess: (data) => {
20 
      setNewMessages([data, ...newMessages]);
 25 
      setNewMessages((prev) => [data, ...prev]);
- 
 
 26 
      messagesEndRef.current?.scrollIntoView({
- 
 
 27 
        behavior: 'smooth',
- 
 
 28 
        block: 'end'
- 
 
 29 
      });
21 
    },
 30 
    },
22 
    onError: (error) => {
 31 
    onError: (error) => {
23 
      showError(error.message);
 32 
      showError(error.message);
24 
    }
 33 
    }
25 
  });
 34 
  });
26 
 
 35 
 
27 
  const { execute: executeReport } = useApi(reportMessage, {
 36 
  const { execute: executeReport } = useApi(reportMessage, {
28 
    onSuccess: (data) => {
 37 
    onSuccess: (data) => {
29 
      setMessages((prevMessages) =>
 38 
      setReportedMessages((prev) =>
30 
        prevMessages.map((message) =>
 - 
 
31 
          message.abuse_report_url === reportedUrl
 - 
 
32 
            ? { ...message, message: 'Contenido reportado', type: 'text' }
 39 
        new Map(prev).set(reportedUrl, { message: 'Contenido reportado', type: 'text' })
33 
            : message
 - 
 
34 
        )
 - 
 
35 
      );
 40 
      );
36 
      closeModal();
 41 
      closeModal();
37 
      showSuccess(data.message);
 42 
      showSuccess(data.message);
38 
      setReportedUrl(null);
 43 
      setReportedUrl(null);
39 
    },
 44 
    },
40 
    onError: (error) => {
 45 
    onError: (error) => {
41 
      showError(error.message);
 46 
      showError(error.message);
42 
      setReportedUrl(null);
 47 
      setReportedUrl(null);
43 
    }
 48 
    }
44 
  });
 49 
  });
45 
 
 50 
 
46 
  const sendMessage = async (message) => {
 51 
  const messages = useMemo(() => {
47 
    if (!conversation?.save_url) return;
 52 
    const paginatedItems = data.map((item) => {
48 
    await execute(conversation.save_url, message);
 53 
      if (reportedMessages.has(item.abuse_report_url)) {
49 
    messagesEndRef.current?.scrollIntoView({
 54 
        return { ...item, ...reportedMessages.get(item.abuse_report_url) };
50 
      behavior: 'smooth',
 55 
      }
51 
      block: 'end'
 56 
      return item;
52 
    });
 57 
    });
- 
 
 58 
 
- 
 
 59 
    const newMessagesSet = new Set(paginatedItems.map((item) => item.id));
- 
 
 60 
    const uniqueNewMessages = newMessages.filter((item) => !newMessagesSet.has(item.id));
- 
 
 61 
 
- 
 
 62 
    return [...uniqueNewMessages, ...paginatedItems];
- 
 
 63 
  }, [data, newMessages, reportedMessages]);
- 
 
 64 
 
- 
 
 65 
  const sendMessage = (message) => {
- 
 
 66 
    if (!conversation?.save_url) return;
- 
 
 67 
    execute(conversation.save_url, message);
53 
  };
 68 
  };
54 
 
 69 
 
55 
  const handleReport = (url) => {
 70 
  const handleReport = (url) => {
56 
    setReportedUrl(url);
 71 
    setReportedUrl(url);
57 
    showModal(
 72 
    showModal(
58 
      'Reportar mensaje',
 73 
      'Reportar mensaje',
59 
      <ReportModal onSubmit={(report) => executeReport(url, report)} />
 74 
      <ReportModal onSubmit={(report) => executeReport(url, report)} />
60 
    );
 75 
    );
61 
  };
 76 
  };
62 
 
 77 
 
63 
  useEffect(() => {
 78 
  const resetPagination = () => {
64 
    setMessages(items);
 79 
    setNewMessages([]);
- 
 
 80 
    setReportedMessages(new Map());
65 
  }, [items]);
 81 
    refresh();
- 
 
 82 
  };
66 
 
 83 
 
67 
  return {
 84 
  return {
68 
    messages: [...newMessages, ...messages],
 85 
    messages,
69 
    loading,
 86 
    loading,
70 
    messagesEndRef,
 87 
    messagesEndRef,
71 
    elementRef,
 88 
    elementRef,
72 
    resetPagination,
 89 
    resetPagination,
73 
    sendMessage,
 90 
    sendMessage,
74 
    reportMessage: handleReport
 91 
    reportMessage: handleReport
75 
  };
 92 
  };
76 
};
 93 
};