Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/display-name */
import React, { useEffect, useRef, useState } from 'react'
import RecommendIcon from '@mui/icons-material/Recommend'
import FavoriteIcon from '@mui/icons-material/FavoriteTwoTone'
import VolunteerActivismIcon from '@mui/icons-material/VolunteerActivism'
import EmojiEmotionsIcon from '@mui/icons-material/EmojiEmotions'
import TungstenIcon from '@mui/icons-material/Tungsten'
import { debounce } from '../../../utils'
import useOutsideClick from '../../../hooks/useOutsideClick'

const withReactions = (Component, { onSelect, onDelete, myReaction }) => {
  return () => {
    const [settedReaction, setSettedReaction] = useState(myReaction)
    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 selectReactionHandler = (reaction) => {
      onSelect(reaction.type)
      setSettedReaction(reaction)
    }

    const deleteReactionHandler = () => {
      onDelete()
      setSettedReaction('')
    }

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

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

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

    return (
      <div
        className="reaction-btn"
        onMouseOver={onHover}
        onMouseOut={onUnhover}
        ref={rectionBtn}
      >
        <Component
          Icon={settedReaction ? settedReaction.icon : RecommendIcon}
          color={settedReaction ? settedReaction.color : '#626d7a'}
          title={settedReaction ? settedReaction.label : 'Reaccionar'}
          onClick={() => {
            settedReaction
              ? deleteReactionHandler()
              : selectReactionHandler(reactionsOptions[0].type)
          }}
        />

        <div className={`reactions ${showReactions ? 'active' : ''}`}>
          {reactionsOptions.map((reaction) => {
            const { icon: Icon, color, type, label } = reaction
            return (
              <button
                key={type}
                onClick={(e) => {
                  e.stopPropagation()
                  selectReactionHandler(reaction)
                }}
                title={label}
              >
                <Icon style={{ color }} />
              </button>
            )
          })}
        </div>
      </div>
    )
  }
}

export default withReactions