Proyectos de Subversion LeadersLinked - SPA

import React, { useRef, useState, useEffect } from "react";
import { useDispatch } from "react-redux";
import { axios, debounce } from "../../../utils";
import useOutsideClick from "../../../hooks/useOutsideClick";

import { addNotification } from "../../../redux/notification/notification.actions";

import ReactionIcon from "@mui/icons-material/Recommend";
import FunIcon from "../icons/Fun";
import LoveItIcon from "../icons/LoveIt";
import SupportIcon from "../icons/Support";
import InterestIcon from "../icons/Interest";
import RecommendIcon from "../icons/Recommned";

const initialReaction = {
  label: "Reaccionar",
  icon: <ReactionIcon />,
  type: "default",
};

const ReactionsButton = ({
  currentReaction,
  onChange = () => null,
  withLabel,
  saveUrl,
  deleteUrl,
  ...rest
}) => {
  const [reaction, setReaction] = useState(initialReaction);
  const [isHover, setIsHover] = useState(false);
  const rectionBtn = useRef(null);
  const dispatch = useDispatch();
  useOutsideClick(rectionBtn, () => setIsHover(false));

  const reactions = [
    {
      type: "r",
      icon: <RecommendIcon />,
      label: "Me gusta",
    },
    {
      type: "s",
      icon: <SupportIcon />,
      label: "Dar apoyo",
    },
    {
      type: "l",
      icon: <LoveItIcon />,
      label: "Me encanta",
    },
    {
      type: "i",
      icon: <InterestIcon />,
      label: "Me interesa",
    },
    {
      type: "f",
      icon: <FunIcon />,
      label: "Me divierte",
    },
  ];

  const saveReaction = (type) => {
    const formData = new FormData();
    formData.append("reaction", type);

    axios.post(saveUrl, formData).then((res) => {
      const { success, data } = res.data;

      if (!success) {
        dispatch(addNotification({ style: "danger", msg: data }));
        return;
      }

      const newReaction = reactions.find((reaction) => reaction.type === type);
      setReaction(newReaction);

      onChange(data);
    });
  };

  const deleteReaction = () => {
    axios.post(deleteUrl).then((res) => {
      const { success, data } = res.data;

      if (!success) {
        dispatch(addNotification({ style: "danger", msg: data }));
        return;
      }

      onChange(data);
      setReaction(initialReaction);
    });
  };

  const onHover = debounce(() => setIsHover(true), 500);

  const onUnhover = debounce(() => setIsHover(false), 500);

  useEffect(() => {
    const currentOption = reactions.find(
      ({ type }) => type === currentReaction
    );

    if (!currentOption) {
      setReaction(initialReaction);
      return;
    }

    setReaction(currentOption);
  }, [currentReaction]);

  return (
    <>
      <button
        {...rest}
        onMouseOver={onHover}
        onMouseOut={onUnhover}
        ref={rectionBtn}
        onClick={() =>
          reaction.type !== "default"
            ? deleteReaction()
            : saveReaction(reactions[0].type)
        }
      >
        {reaction.icon}
        {withLabel && reaction.label}
        <div className={`reactions ${isHover ? "active" : ""}`}>
          {reactions.map(({ icon, type, label }) => (
            <button
              key={type}
              onClick={(e) => {
                e.stopPropagation();
                saveReaction(type);
              }}
              title={label}
            >
              {icon}
            </button>
          ))}
        </div>
      </button>
    </>
  );
};

export default ReactionsButton;