Proyectos de Subversion LeadersLinked - SPA

import React, { useRef, useState, useEffect } 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 initialReaction = {

  label: 'Reaccionar',

  icon: <ReactionIcon />,

  type: 'default'

}

const ReactionsButton = ({

  currentReaction,

  onChange = () => null,

  withLabel,

  saveUrl,

  deleteUrl,

  ...rest

}) => {

  const [reaction, setReaction] = useState(initialReaction)

  const [isHover, setIsHover] = useState(false)

  const rectionBtn = useRef(null)

  const dispatch = useDispatch()

  useOutsideClick(rectionBtn, () => setIsHover(false))

  const reactions = [

    {

      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(saveUrl, { type }).then((res) => {

      const { success, data } = res.data

      if (!success) {

        dispatch(addNotification({ style: 'danger', msg: data }))

        return

      }

      const newReaction = reactions.find((reaction) => reaction.type === type)

      setReaction(newReaction)

      onChange(data)

    })

  }

  const deleteReaction = () => {

    axios.post(deleteUrl).then((res) => {

      const { success, data } = res.data

      if (!success) {

        dispatch(addNotification({ style: 'danger', msg: data }))

        return

      }

      onChange(data)

      setReaction(initialReaction)

    })

  }

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

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

  useEffect(() => {

    const currentOption = reactions.find(({ type }) => type === currentReaction)

    if (!currentOption) {

      setReaction(initialReaction)

      return

    }

    setReaction(currentOption)

  }, [currentReaction])

  return (

    <>

      <button

        {...rest}

        onMouseOver={onHover}

        onMouseOut={onUnhover}

        ref={rectionBtn}

        onClick={() =>

          reaction.type !== 'default'

            ? deleteReaction()

            : saveReaction(reactions[0].type)

        }

      >

        {reaction.icon}

        {withLabel && reaction.label}

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

          {reactions.map(({ icon, type, label }) => (

            <button

              key={type}

              onClick={(e) => {

                e.stopPropagation()

                saveReaction(type)

              }}

              title={label}

            >

              {icon}

            </button>

          ))}

        </div>

      </button>

    </>

  )

}

export default ReactionsButton