Proyectos de Subversion LeadersLinked - SPA

import React, { useCallback, useMemo, useState } from 'react'
import { useDispatch } from 'react-redux'
import { Box, styled } from '@mui/material'

import { axios } from '@app/utils'
import { REACTIONS } from '@app/constants/feed'
import { addNotification } from '@app/redux/notification/notification.actions'
import useDebounce from '@app/hooks/useDebounce'

const ReactionsBox = styled(Box)(({ theme }) => ({
  position: 'absolute',
  bottom: '100%',
  backgroundColor: 'var(--bg-color)',
  boxShadow: theme.shadows[1],
  gap: 1,
  left: 0,
  display: 'flex',
  padding: 1,
  width: 'fit-content',
  borderRadius: theme.shape.borderRadius,
  transform: 'scale(0)',
  transformOrigin: 'left bottom',
  transition: theme.transitions.create('transform', {
    duration: theme.transitions.duration.short,
    easing: theme.transitions.easing.easeInOut,
    delay: theme.transitions.duration.short
  }),

  '& > button': {
    transition: theme.transitions.create('transform', {
      duration: theme.transitions.duration.short,
      easing: theme.transitions.easing.easeInOut
    }),
    '&:hover': {
      transform: 'scale(1.1) translateY(-4px)'
    },
    svg: {
      fontSize: '32px'
    }
  }
}))

export default function withReactions(Component) {
  const HOC = ({
    saveUrl = '',
    deleteUrl = '',
    currentReactionType = null,
    onReaction = () => null
  }) => {
    const [isHover, setIsHover] = useState(false)
    const debounceHover = useDebounce(isHover, 500)
    const dispatch = useDispatch()

    const currentReaction = useMemo(() => {
      const reaction = REACTIONS.find((r) => r.type === currentReactionType)
      console.log(reaction)
      console.log(currentReactionType)
      return reaction
    }, [currentReactionType])
    const Icon = currentReaction ? currentReaction.icon : REACTIONS[0].icon

    const saveReaction = useCallback(
      (type = 'r') => {
        const formData = new FormData()
        formData.append('reaction', type)

        axios.post(saveUrl, formData).then((res) => {
          const { success, data } = res.data

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

          onReaction({
            reactions: data.reactions,
            currentReactionType: type
          })
        })
      },
      [saveUrl, dispatch]
    )

    const deleteReaction = useCallback(() => {
      axios.post(deleteUrl).then((res) => {
        const { success, data } = res.data

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

        onReaction({
          reactions: data.reactions,
          currentReactionType: ''
        })
      })
    }, [])

    return (
      <Component
        onClick={() => (currentReaction ? deleteReaction() : saveReaction())}
        onMouseEnter={() => setIsHover(true)}
        onMouseLeave={() => setIsHover(false)}
      >
        {currentReaction ? (
          <Icon style={{ color: currentReaction.color }} />
        ) : (
          <Icon />
        )}

        {currentReaction ? currentReaction.label : 'Reaccionar'}

        <ReactionsBox
          sx={{ transform: debounceHover ? 'scale(1)' : 'scale(0)' }}
        >
          {REACTIONS.map(({ type, label, icon: Icon, color }) => (
            <button
              key={type}
              title={label}
              onClickCapture={(e) => {
                e.stopPropagation()
                saveReaction(type)
              }}
            >
              <Icon style={{ color }} />
            </button>
          ))}
        </ReactionsBox>
      </Component>
    )
  }

  return HOC
}