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;