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 { debounce } from '../../../utils'

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

export const ReactionButton = ({ onSelect, onDelete, myReaction }) => {

  const [settedReaction, setSettedReaction] = useState(myReaction)

  const [showReactions, setShowReactions] = useState(false)

  const rectionBtn = useRef(null)

  const outsideClick = useOutsideClick(rectionBtn)

  const reactionsOptions = [

    {

      type: 'r',

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

    },

    {

      type: 's',

      icon: <VolunteerActivismIcon style={{ color: '#6495ED' }} />,

    },

    {

      type: 'l',

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

    },

    {

      type: 'i',

      icon: (

        <TungstenIcon

          style={{ color: '#F5BB5C', transform: 'rotate(180deg)' }}

        />

      ),

    },

    {

      type: 'f',

      icon: <EmojiEmotionsIcon style={{ color: '#FF7F50' }} />,

    },

  ]

  const selectReactionHandler = async (type) => {

    const res = await onSelect(type)

    console.log(res)

    if (res) setSettedReaction(type)

  }

  const deleteReactionHandler = async () => {

    const res = await onDelete()

    if (res) setSettedReaction('')

  }

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

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

  useEffect(() => {

    if (outsideClick) setShowReactions(false)

  }, [outsideClick])

  return (

    <button

      type="button"

      className="reaction-btn"

      onMouseOver={onHover}

      onMouseOut={onUnhover}

      onClick={() => {

        settedReaction

          ? deleteReactionHandler()

          : selectReactionHandler(reactionsOptions[0].type)

      }}

      ref={rectionBtn}

    >

      {settedReaction ? (

        reactionsOptions.find((reaction) => reaction.type === settedReaction)

          .icon

      ) : (

        <RecommendIcon style={{ color: '#626d7a' }} />

      )}

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

        {reactionsOptions.map((reaction) => (

          <button

            key={reaction.type}

            onClick={(e) => {

              e.stopPropagation()

              selectReactionHandler(reaction.type)

            }}

          >

            {reaction.icon}

          </button>

        ))}

      </div>

    </button>

  )

}