Proyectos de Subversion LeadersLinked - SPA

import { useEffect, useState } from "react";
import { useDispatch } from "react-redux";

import { axios } from "@app/utils";
import { addNotification } from "@app/redux/notification/notification.actions";
import { showReportModal } from "@app/redux/report/report.actions";

export function useMessages(messagesUrl) {
  const [loading, setLoading] = useState(false);
  const [messages, setMessages] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [pages, setPages] = useState(1);
  const dispatch = useDispatch();

  function compareMessages(ref = [], newValue = []) {
    const set = new Set(ref.map((obj) => obj.id));
    const difference = newValue.filter((obj) => !set.has(obj.id));
    return difference;
  }

  const messagesAdapter = (message) => {
    const {
      u,
      side,
      type,
      filename,
      m,
      mtype,
      date,
      time,
      id,
      uuid,
      message: content,
    } = message;

    return {
      id: id ?? uuid,
      content: m || content || filename || "",
      send: u === 1 || side === "left",
      contentType: mtype || type,
      time: time || date,
      ...message,
    };
  };

  const getMessages = async ({ url = "", page = 1 }) => {
    if (!url) return;
    setLoading(true);
    return axios
      .get(`${url}?page=${page}`)
      .then((response) => {
        const { data, success, pagination } = response.data;

        if (!success) {
          throw new Error("Ha ocurrido un error al obtener los mensajes");
        }

        const resMessages = data.items ?? data;
        const adapterMessages = resMessages.map((mes) => messagesAdapter(mes));

        return {
          currentPage: pagination ? pagination.current : data.page,
          messages: adapterMessages,
          lastPage: pagination ? pagination.last : data.pages,
        };
      })
      .finally(() => setLoading(false));
  };

  const loadMoreMessages = async ({ url = "", page = 2 }) => {
    try {
      const response = await getMessages({ url, page });
      const { messages } = response;

      setMessages((prevState) => [...prevState, ...messages]);
    } catch (error) {
      dispatch(addNotification({ style: "danger", msg: error.message }));
    }
  };

  const heartBeat = async ({ url }) => {
    try {
      const { lastPage, messages: resMessages } = await getMessages({ url });

      setPages(lastPage);
      setMessages((prevState) => {
        const diff = compareMessages(prevState, resMessages);
        if (!diff.length) return prevState;
        return [...diff, ...prevState];
      });
    } catch (error) {
      dispatch(addNotification({ style: "danger", msg: error.message }));
    }
  };

  const changePage = () => {
    if (currentPage >= pages) return;
    setCurrentPage((prevState) => prevState + 1);
  };

  const markReport = (id) => {
    setMessages((prevMessages) => {
      return prevMessages.map((message) =>
        message.id === id
          ? {
              ...message,
              content: "Contenido reportado",
              url_abuse_report: "",
              contentType: "text",
            }
          : message
      );
    });
  };

  const handleReport = ({ url, id }) => {
    dispatch(
      showReportModal({
        reportUrl: url,
        type: "mensaje",
        onComplete: () => markReport(id),
      })
    );
  };

  useEffect(() => {
    setMessages([]);
    setCurrentPage(1);
    setPages(1);
  }, [messagesUrl]);

  useEffect(() => {
    if (currentPage === 1) return;
    loadMoreMessages({ url: messagesUrl, page: currentPage });
  }, [messagesUrl, currentPage, loading]);

  useEffect(() => {
    const messagesInterval = setTimeout(() => {
      heartBeat({ url: messagesUrl });
    }, 2000);

    return () => {
      clearTimeout(messagesInterval);
    };
  }, [messagesUrl, loading]);

  return {
    messages,
    loading,
    loadMore: changePage,
    report: handleReport,
  };
}