Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect, useRef, useState } 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 ReactionsButton = ({
  currentReaction,
  onChange,
  withLabel,
  reactionTypesUrl,
  deleteUrl,
}) => {
  const [reactionIndex, setReactionIndex] = useState(0)
  const [showReactions, setShowReactions] = useState(false)
  const rectionBtn = useRef(null)
  const dispatch = useDispatch()
  useOutsideClick(rectionBtn, () => setShowReactions(false))

  const reactionsOptions = [
    {
      label: 'Reaccionar',
      icon: <ReactionIcon />,
      type: 'default',
    },
    {
      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) => {
    axios.post(reactionTypesUrl[type]).then((response) => {
      const { success, data } = response.data

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

      onChange(data.reactions)
    })
  }

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

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

      onChange(data.reactions)
      setReactionIndex(0)
    })
  }

  const onHover = debounce(() => setShowReactions(true), 500)

  const onUnhover = debounce(() => setShowReactions(false), 500)

  useEffect(() => {
    const currentIndex = reactionsOptions.findIndex(
      ({ type }) => type === currentReaction
    )
    setReactionIndex(currentIndex)
  }, [currentReaction])

  return (
    <button
      className="btn position-relative"
      onMouseOver={onHover}
      onMouseOut={onUnhover}
      ref={rectionBtn}
      onClick={() => {
        reactionIndex
          ? deleteReaction()
          : saveReaction(reactionsOptions[0].type)
      }}
    >
      {reactionsOptions[reactionIndex].icon}
      {withLabel && reactionsOptions[reactionIndex].label}

      <div className={`reactions ${showReactions ? 'active' : ''}`}>
        {reactionsOptions.map(({ icon, type, label }, index) => (
          <button
            key={type}
            onClick={(e) => {
              e.stopPropagation()
              saveReaction(type)
              setReactionIndex(index)
            }}
            title={label}
          >
            {icon}
          </button>
        ))}
      </div>
    </button>
  )
}

export default ReactionsButton