Proyectos de Subversion LeadersLinked - Antes de SPA

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

import RecommendIcon from '@mui/icons-material/Recommend'

import FavoriteIcon from '@mui/icons-material/Favorite'

import VolunteerActivismIcon from '@mui/icons-material/VolunteerActivism'

import { debounce } from '../../../utils'

import useOutsideClick from '../../../hooks/useOutsideClick'

export const ReactionButton = () => {

  const [settedReaction, setSettedReaction] = useState('r')

  const [showReactions, setShowReactions] = useState(false)

  const rectionBtn = useRef(null)

  const outsideClick = useOutsideClick(rectionBtn)

  const reactions = [

    {

      type: 'r',

      icon: <RecommendIcon style={{ color: '#7405f9' }} />,

    },

    {

      type: 'f',

      icon: <FavoriteIcon style={{ color: '#E7A33E' }} />,

    },

    {

      type: 'v',

      icon: <VolunteerActivismIcon style={{ color: '#7FC15E' }} />,

    },

  ]

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

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

  const handleClick = (reaction) => {

    setSettedReaction(reaction)

    setShowReactions(false)

  }

  useEffect(() => {

    if (outsideClick) {

      setShowReactions(false)

    }

  }, [outsideClick])

  return (

    <button

      type="button"

      className="reaction-btn"

      onMouseOver={onHover}

      onMouseOut={onUnhover}

      ref={rectionBtn}

    >

      {reactions.map((reaction) =>

        reaction.type === settedReaction ? reaction.icon : null

      )}

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

        {reactions.map((reaction) => (

          <button

            key={reaction.type}

            onClick={() => handleClick(reaction.type)}

          >

            {reaction.icon}

          </button>

        ))}

      </div>

    </button>

  )

}