Proyectos de Subversion LeadersLinked - SPA

import React, { useCallback } from 'react'
import { useDispatch } from 'react-redux'
import { axios } from '../utils'
import { addNotification } from 'store/notification/notification.actions'
import styled from 'styled-components'

import FunIcon from '../components/UI/icons/Fun'
import LoveItIcon from '../components/UI/icons/LoveIt'
import SupportIcon from '../components/UI/icons/Support'
import InterestIcon from '../components/UI/icons/Interest'
import RecommendIcon from '../components/UI/icons/Recommned'

const reactions = {
  r: {
    icon: RecommendIcon,
    label: 'Me gusta',
    type: 'r'
  },
  s: {
    icon: SupportIcon,
    label: 'Dar apoyo',
    type: 's'
  },
  l: {
    icon: LoveItIcon,
    label: 'Me encanta',
    type: 'l'
  },
  i: {
    icon: InterestIcon,
    label: 'Me interesa',
    type: 'i'
  },
  f: {
    icon: FunIcon,
    label: 'Me divierte',
    type: 'f'
  }
}

const StyledReactionsContainer = styled.div`
  position: absolute;
  bottom: 100%;
  background-color: var(--bg-color);
  box-shadow: 0px 0px 3px #000;
  gap: 0.5rem;
  left: 0;
  display: flex;
  padding: 0.2rem;
  width: fit-content;
  border-radius: var(--border-radius);
  transform: scale(0);
  transform-origin: left bottom;
  transition: all 0.2s ease-out;
  button {
    transition: all 0.2s ease-in;
    svg {
      font-size: 32px;
    }
    &:hover {
      transform: scale(1.1) translateY(-4px);
    }
  }
`

export default function withReactions(Component) {
  const HOC = ({
    saveUrl = '',
    deleteUrl = '',
    currentReaction = null,
    onReaction = () => null
  }) => {
    const dispatch = useDispatch()

    const saveReaction = useCallback(
      (type) => {
        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,
            currentReaction: type
          })
        })
      },
      [saveUrl, dispatch, reactions]
    )

    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,
          currentReaction: ''
        })
      })
    }, [])

    return (
      <Component
        icon={currentReaction ? reactions[currentReaction].icon : RecommendIcon}
        onClick={() =>
          currentReaction ? deleteReaction() : saveReaction(reactions.r.type)
        }
        label={
          currentReaction ? reactions[currentReaction].label : 'Reaccionar'
        }
      >
        <StyledReactionsContainer>
          {Object.values(reactions).map(({ type, label, icon: Icon }) => (
            <button
              key={type}
              title={label}
              onClick={(e) => {
                e.stopPropagation()
                saveReaction(type)
                e.currentTarget.blur()
              }}
            >
              <Icon />
            </button>
          ))}
        </StyledReactionsContainer>
      </Component>
    )
  }

  return HOC
}