Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/display-name */
import React, { useEffect, useRef, useState } from 'react'
import RecommendIcon from './reactions/Recommned'
import FavoriteIcon from './reactions/LoveIt'
import VolunteerActivismIcon from './reactions/Support'
import EmojiEmotionsIcon from './reactions/Fun'
import TungstenIcon from './reactions/UserIdea'

import { debounce } from '../../../utils'
import useOutsideClick from '../../../hooks/useOutsideClick'

const withReactions = (
  Component,
  { onSelect, onDelete, myReaction, withTitle = false }
) => {
  return () => {
    const [settedReaction, setSettedReaction] = useState(null)
    const [showReactions, setShowReactions] = useState(false)
    const rectionBtn = useRef(null)
    const outsideClick = useOutsideClick(rectionBtn)

    const reactionsOptions = [
      {
        type: 'r',
        icon: RecommendIcon,
        color: '#7405f9',
        label: 'Me gusta',
      },
      {
        type: 's',
        icon: VolunteerActivismIcon,
        color: '#6495ED',
        label: 'Dar apoyo',
      },
      {
        type: 'l',
        icon: FavoriteIcon,
        color: '#DF704D',
        label: 'Me encanta',
      },
      {
        type: 'i',
        icon: TungstenIcon,
        color: '#F5BB5C',
        label: 'Me interesa',
      },
      {
        type: 'f',
        icon: EmojiEmotionsIcon,
        color: '#FF7F50',
        label: 'Me divierte',
      },
    ]

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

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

    useEffect(() => {
      if (outsideClick) setShowReactions(false)
    }, [outsideClick])

    useEffect(() => {
      const currentReaction = reactionsOptions.find(
        (reaction) => reaction.type === myReaction
      )
      setSettedReaction(currentReaction)
    }, [])

    return (
      <Component
        onMouseOver={onHover}
        onMouseOut={onUnhover}
        ref={rectionBtn}
        Icon={settedReaction ? settedReaction.icon : RecommendIcon}
        color={settedReaction ? settedReaction.color : '#626d7a'}
        title={settedReaction ? settedReaction.label : 'Reaccionar'}
        onClick={() => {
          settedReaction ? onDelete() : onSelect(reactionsOptions[0].type)
        }}
        withTitle={withTitle}
      >
        <div className={`reactions ${showReactions ? 'active' : ''}`}>
          {reactionsOptions.map((reaction) => {
            const { icon: Icon, color, type, label } = reaction
            return (
              <button
                key={type}
                onClick={(e) => {
                  e.stopPropagation()
                  onSelect(type)
                }}
                title={label}
              >
                <Icon style={{ color }} />
              </button>
            )
          })}
        </div>
      </Component>
    )
  }
}

export default withReactions