Proyectos de Subversion LeadersLinked - SPA

import React, { useState, useEffect } from 'react';

import { useDispatch } from 'react-redux';

import { axios, debounce } from '../../../utils';

import { useOutsideClick } from '@hooks';

import { REACTIONS } from '@app/constants/feed';

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

const ReactionsButton = ({

  currentReaction,

  onChange = () => null,

  withLabel,

  saveUrl,

  deleteUrl,

  ...rest

}) => {

  const [reaction, setReaction] = useState(null);

  const [isHover, setIsHover] = useState(false);

  const dispatch = useDispatch();

  const [ref] = useOutsideClick(() => setIsHover(false));

  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;

      }

      onChange(data);

    });

  };

  const deleteReaction = () => {

    axios.post(deleteUrl).then((res) => {

      const { success, data } = res.data;

      if (!success) {

        dispatch(addNotification({ style: 'danger', msg: data }));

        return;

      }

      setReaction(null);

      onChange(data);

    });

  };

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

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

  useEffect(() => {

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

    currentOption ? setReaction(currentOption) : setReaction(null);

  }, [currentReaction]);

  return (

    <>

      <button

        {...rest}

        onMouseOver={onHover}

        onMouseOut={onUnhover}

        ref={ref}

        onClick={() =>

          reaction.type !== 'default' ? deleteReaction() : saveReaction(REACTIONS[0].type)

        }

      >

        {reaction.icon}

        {withLabel && reaction.label}

        <div className={`reactions ${isHover ? 'active' : ''}`}>

          {REACTIONS.map(({ icon: Icon, type, label, color }) => (

            <button

              key={type}

              onClick={(e) => {

                e.stopPropagation();

                saveReaction(type);

              }}

              title={label}

            >

              <Icon style={{ color }} />

            </button>

          ))}

        </div>

      </button>

    </>

  );

};

export default ReactionsButton;