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/FavoriteTwoTone'
import VolunteerActivismIcon from '@mui/icons-material/VolunteerActivism'
import EmojiEmotionsIcon from '@mui/icons-material/EmojiEmotions'
import TungstenIcon from '@mui/icons-material/Tungsten'
import { axios, debounce } from '../../../utils'
import useOutsideClick from '../../../hooks/useOutsideClick'
import { addNotification } from '../../../redux/notification/notification.actions'
import { useDispatch } from 'react-redux'

export const ReactionButton = ({
  saveReactionRecommendedUrl,
  saveReactionSupportUrl,
  saveReactionLoveUrl,
  saveReactionInterestUrl,
  saveReactionFunUrl,
  myReaction,
}) => {
  const [settedReaction, setSettedReaction] = useState(myReaction)
  const [showReactions, setShowReactions] = useState(false)
  const rectionBtn = useRef(null)
  const outsideClick = useOutsideClick(rectionBtn)
  const dispatch = useDispatch()

  const reactions = [
    {
      type: 'r',
      icon: <RecommendIcon style={{ color: '#7405f9' }} />,
      url: saveReactionRecommendedUrl,
    },
    {
      type: 's',
      icon: <VolunteerActivismIcon style={{ color: '#6495ED' }} />,
      url: saveReactionSupportUrl,
    },
    {
      type: 'l',
      icon: <FavoriteIcon style={{ color: '#DF704D' }} />,
      url: saveReactionLoveUrl,
    },
    {
      type: 'i',
      icon: (
        <TungstenIcon
          style={{ color: '#F5BB5C', transform: 'rotate(180deg)' }}
        />
      ),
      url: saveReactionInterestUrl,
    },
    {
      type: 'f',
      icon: <EmojiEmotionsIcon style={{ color: '#FF7F50' }} />,
      url: saveReactionFunUrl,
    },
  ]

  const reactionHandler = (url, type) => {
    axios.post(url).then((res) => {
      const { success, data } = res.data

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

      setSettedReaction(type)
      setShowReactions(false)
    })
  }

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

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

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

  return (
    <button
      type="button"
      className="reaction-btn"
      onMouseOver={onHover}
      onMouseOut={onUnhover}
      ref={rectionBtn}
    >
      {settedReaction ? (
        reactions.find((reaction) => reaction.type === settedReaction).icon
      ) : (
        <RecommendIcon style={{ color: '#626d7a' }} />
      )}
      <div className={`reactions ${showReactions ? 'active' : ''}`}>
        {reactions.map((reaction) => (
          <button
            key={reaction.type}
            onClick={() => reactionHandler(reaction.url, reaction.type)}
          >
            {reaction.icon}
          </button>
        ))}
      </div>
    </button>
  )
}