Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { 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 = 0,

  onChange,

  withLabel,

  reactionTypesUrl,

  deleteUrl,

}) => {

  const [reactionIndex, setReactionIndex] = useState(currentReaction)

  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

      }

      const typeIndex = reactionsOptions.findIndex(

        (option) => option.type === type

      )

      onChange(data.reactions)

      setReactionIndex(typeIndex)

    })

  }

  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)

  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 }) => (

            <button

              key={type}

              onClick={(e) => {

                e.stopPropagation()

                saveReaction(type)

              }}

              title={label}

            >

              {icon}

            </button>

          ))}

        </div>

      </button>

    </>

  )

}

export default ReactionsButton