Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3208 Rev 3432
Línea 1... Línea 1...
1 
import { useEffect, useState } from 'react'
 1 
import { useEffect, useState } from "react";
2 
import { useDispatch } from 'react-redux'
 2 
import { useDispatch } from "react-redux";
Línea 3... Línea 3...
3 
 
 3 
 
4 
import { axios } from '@app/utils'
 4 
import { axios } from "@app/utils";
5 
import { addNotification } from '@app/redux/notification/notification.actions'
 5 
import { addNotification } from "@app/redux/notification/notification.actions";
Línea 6... Línea 6...
6 
import { showReportModal } from '@app/redux/report/report.actions'
 6 
import { showReportModal } from "@app/redux/report/report.actions";
7 
 
 7 
 
8 
export function useMessages(messagesUrl) {
 8 
export function useMessages(messagesUrl) {
9 
  const [loading, setLoading] = useState(false)
 9 
  const [loading, setLoading] = useState(false);
10 
  const [messages, setMessages] = useState([])
 10 
  const [messages, setMessages] = useState([]);
11 
  const [currentPage, setCurrentPage] = useState(1)
 11 
  const [currentPage, setCurrentPage] = useState(1);
Línea 12... Línea 12...
12 
  const [pages, setPages] = useState(1)
 12 
  const [pages, setPages] = useState(1);
13 
  const dispatch = useDispatch()
 13 
  const dispatch = useDispatch();
14 
 
 14 
 
15 
  function compareMessages(ref = [], newValue = []) {
 15 
  function compareMessages(ref = [], newValue = []) {
16 
    const set = new Set(ref.map((obj) => obj.id))
 16 
    const set = new Set(ref.map((obj) => obj.id));
Línea 17... Línea 17...
17 
    const difference = newValue.filter((obj) => !set.has(obj.id))
 17 
    const difference = newValue.filter((obj) => !set.has(obj.id));
18 
    return difference
 18 
    return difference;
19 
  }
 19 
  }
Línea 28... Línea 28...
28 
      mtype,
 28 
      mtype,
29 
      date,
 29 
      date,
30 
      time,
 30 
      time,
31 
      id,
 31 
      id,
32 
      uuid,
 32 
      uuid,
33 
      message: content
 33 
      message: content,
34 
    } = message
 34 
    } = message;
Línea 35... Línea 35...
35 
 
 35 
 
36 
    return {
 36 
    return {
37 
      id: id ?? uuid,
 37 
      id: id ?? uuid,
38 
      content: m || content || filename || '',
 38 
      content: m || content || filename || "",
39 
      send: u === 1 || side === 'left',
 39 
      send: u === 1 || side === "left",
40 
      contentType: mtype || type,
 40 
      contentType: mtype || type,
41 
      time: time || date,
 41 
      time: time || date,
42 
      ...message
 42 
      ...message,
43 
    }
 43 
    };
44 
  }
 44 
  };
45 
 
 45 
 
46 
  const getMessages = async ({ url = '', page = 1 }) => {
 46 
  const getMessages = async ({ url = "", page = 1 }) => {
47 
    if (!url) return
 47 
    if (!url) return;
48 
    setLoading(true)
 48 
    setLoading(true);
49 
    return axios
 49 
    return axios
50 
      .get(`${url}?page=${page}`)
 50 
      .get(`${url}?page=${page}`)
51 
      .then(({ data: response }) => {
 51 
      .then((response) => {
Línea 52... Línea 52...
52 
        const { data, success, pagination } = response
 52 
        const { data, success, pagination } = response.data;
53 
 
 53 
 
54 
        if (!success) {
 54 
        if (!success) {
Línea 55... Línea 55...
55 
          throw new Error('Ha ocurrido un error al obtener los mensajes')
 55 
          throw new Error("Ha ocurrido un error al obtener los mensajes");
56 
        }
 56 
        }
Línea 57... Línea 57...
57 
 
 57 
 
58 
        const resMessages = data.items ?? data
 58 
        const resMessages = data.items ?? data;
59 
        const adapterMessages = resMessages.map((mes) => messagesAdapter(mes))
 59 
        const adapterMessages = resMessages.map((mes) => messagesAdapter(mes));
60 
 
 60 
 
61 
        return {
 61 
        return {
62 
          currentPage: pagination ? pagination.current : data.page,
 62 
          currentPage: pagination ? pagination.current : data.page,
63 
          messages: adapterMessages,
 63 
          messages: adapterMessages,
64 
          lastPage: pagination ? pagination.last : data.pages
 64 
          lastPage: pagination ? pagination.last : data.pages,
Línea 65... Línea 65...
65 
        }
 65 
        };
66 
      })
 66 
      })
67 
      .finally(() => setLoading(false))
 67 
      .finally(() => setLoading(false));
68 
  }
 68 
  };
Línea 69... Línea 69...
69 
 
 69 
 
70 
  const loadMoreMessages = async ({ url = '', page = 2 }) => {
 70 
  const loadMoreMessages = async ({ url = "", page = 2 }) => {
71 
    try {
 71 
    try {
72 
      const response = await getMessages({ url, page })
 72 
      const response = await getMessages({ url, page });
73 
      const { messages } = response
 73 
      const { messages } = response;
Línea 74... Línea 74...
74 
 
 74 
 
75 
      setMessages((prevState) => [...prevState, ...messages])
 75 
      setMessages((prevState) => [...prevState, ...messages]);
76 
    } catch (error) {
 76 
    } catch (error) {
Línea 77... Línea 77...
77 
      dispatch(addNotification({ style: 'danger', msg: error.message }))
 77 
      dispatch(addNotification({ style: "danger", msg: error.message }));
78 
    }
 78 
    }
79 
  }
 79 
  };
80 
 
 80 
 
81 
  const heartBeat = async ({ url }) => {
 81 
  const heartBeat = async ({ url }) => {
82 
    try {
 82 
    try {
83 
      const { lastPage, messages: resMessages } = await getMessages({ url })
 83 
      const { lastPage, messages: resMessages } = await getMessages({ url });
84 
 
 84 
 
85 
      setPages(lastPage)
 85 
      setPages(lastPage);
86 
      setMessages((prevState) => {
 86 
      setMessages((prevState) => {
Línea 87... Línea 87...
87 
        const diff = compareMessages(prevState, resMessages)
 87 
        const diff = compareMessages(prevState, resMessages);
88 
        if (!diff.length) return prevState
 88 
        if (!diff.length) return prevState;
89 
        return [...diff, ...prevState]
 89 
        return [...diff, ...prevState];
90 
      })
 90 
      });
Línea 91... Línea 91...
91 
    } catch (error) {
 91 
    } catch (error) {
92 
      dispatch(addNotification({ style: 'danger', msg: error.message }))
 92 
      dispatch(addNotification({ style: "danger", msg: error.message }));
93 
    }
 93 
    }
94 
  }
 94 
  };
95 
 
 95 
 
96 
  const changePage = () => {
 96 
  const changePage = () => {
97 
    if (currentPage >= pages) return
 97 
    if (currentPage >= pages) return;
98 
    setCurrentPage((prevState) => prevState + 1)
 98 
    setCurrentPage((prevState) => prevState + 1);
99 
  }
 99 
  };
100 
 
 100 
 
101 
  const markReport = (id) => {
 101 
  const markReport = (id) => {
102 
    setMessages((prevMessages) => {
 102 
    setMessages((prevMessages) => {
103 
      return prevMessages.map((message) =>
 103 
      return prevMessages.map((message) =>
104 
        message.id === id
 104 
        message.id === id
Línea 105... Línea 105...
105 
          ? {
 105 
          ? {
106 
              ...message,
 106 
              ...message,
107 
              content: 'Contenido reportado',
 107 
              content: "Contenido reportado",
108 
              url_abuse_report: '',
 108 
              url_abuse_report: "",
109 
              contentType: 'text'
 109 
              contentType: "text",
110 
            }
 110 
            }
111 
          : message
 111 
          : message
112 
      )
 112 
      );
113 
    })
 113 
    });
Línea 114... Línea 114...
114 
  }
 114 
  };
115 
 
 115 
 
116 
  const handleReport = ({ url, id }) => {
 116 
  const handleReport = ({ url, id }) => {
117 
    dispatch(
 117 
    dispatch(
118 
      showReportModal({
 118 
      showReportModal({
Línea 119... Línea 119...
119 
        reportUrl: url,
 119 
        reportUrl: url,
120 
        type: 'mensaje',
 120 
        type: "mensaje",
121 
        onComplete: () => markReport(id)
 121 
        onComplete: () => markReport(id),
122 
      })
 122 
      })
Línea 123... Línea 123...
123 
    )
 123 
    );
124 
  }
 124 
  };
125 
 
 125 
 
126 
  useEffect(() => {
 126 
  useEffect(() => {
Línea 127... Línea 127...
127 
    setMessages([])
 127 
    setMessages([]);
128 
    setCurrentPage(1)
 128 
    setCurrentPage(1);
129 
    setPages(1)
 129 
    setPages(1);
130 
  }, [messagesUrl])
 130 
  }, [messagesUrl]);
Línea 131... Línea 131...
131 
 
 131 
 
132 
  useEffect(() => {
 132 
  useEffect(() => {
133 
    if (currentPage === 1) return
 133 
    if (currentPage === 1) return;
134 
    loadMoreMessages({ url: messagesUrl, page: currentPage })
 134 
    loadMoreMessages({ url: messagesUrl, page: currentPage });
135 
  }, [messagesUrl, currentPage, loading])
 135 
  }, [messagesUrl, currentPage, loading]);
136 
 
 136 
 
137 
  useEffect(() => {
 137 
  useEffect(() => {