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