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 />,
    },
    {
      type: 'f',
      icon: <FavoriteIcon />,
    },
    {
      type: 'v',
      icon: <VolunteerActivismIcon />,
    },
  ]

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

  useEffect(() => {
    if (outsideClick) {
      setShowReactions(false)
    }
  }, [outsideClick])

  return (
    <button type="button" className="reaction-btn" onMouseEnter={onHover}>
      {reactions.map((reaction) =>
        reaction.type === settedReaction ? reaction.icon : null
      )}
      <div className={`reactions ${showReactions ? 'active' : ''}`}>
        {reactions.map((reaction) => (
          <button
            key={reaction.type}
            onClick={() => setSettedReaction(reaction.type)}
          >
            {reaction.icon}
          </button>
        ))}
      </div>
    </button>
  )
}