Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5816 | Rev 5818 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
5814 stevensc 1 
/* eslint-disable react/display-name */
5737 stevensc 2 
import React, { useEffect, useRef, useState } from 'react'
5577 stevensc 3 
import RecommendIcon from '@mui/icons-material/Recommend'
5747 stevensc 4 
import FavoriteIcon from '@mui/icons-material/FavoriteTwoTone'
5577 stevensc 5 
import VolunteerActivismIcon from '@mui/icons-material/VolunteerActivism'
5746 stevensc 6 
import EmojiEmotionsIcon from '@mui/icons-material/EmojiEmotions'
7 
import TungstenIcon from '@mui/icons-material/Tungsten'
5781 stevensc 8 
import { debounce } from '../../../utils'
5737 stevensc 9 
import useOutsideClick from '../../../hooks/useOutsideClick'
5574 stevensc 10 
 
5814 stevensc 11 
const withReactions = (Component, { onSelect, onDelete, myReaction }) => {
12 
  return () => {
5816 stevensc 13 
    const [settedReaction, setSettedReaction] = useState(null)
5814 stevensc 14 
    const [showReactions, setShowReactions] = useState(false)
15 
    const rectionBtn = useRef(null)
16 
    const outsideClick = useOutsideClick(rectionBtn)
5667 stevensc 17 
 
5814 stevensc 18 
    const reactionsOptions = [
19 
      {
20 
        type: 'r',
21 
        icon: RecommendIcon,
22 
        color: '#7405f9',
5815 stevensc 23 
        label: 'Me gusta',
5814 stevensc 24 
      },
25 
      {
26 
        type: 's',
27 
        icon: VolunteerActivismIcon,
28 
        color: '#6495ED',
5815 stevensc 29 
        label: 'Dar apoyo',
5814 stevensc 30 
      },
31 
      {
32 
        type: 'l',
33 
        icon: FavoriteIcon,
34 
        color: '#DF704D',
5815 stevensc 35 
        label: 'Me encanta',
5814 stevensc 36 
      },
37 
      {
38 
        type: 'i',
39 
        icon: TungstenIcon,
40 
        color: '#F5BB5C',
5815 stevensc 41 
        label: 'Me interesa',
5814 stevensc 42 
      },
43 
      {
44 
        type: 'f',
45 
        icon: EmojiEmotionsIcon,
46 
        color: '#FF7F50',
5815 stevensc 47 
        label: 'Me divierte',
5814 stevensc 48 
      },
49 
    ]
5667 stevensc 50 
 
5814 stevensc 51 
    const selectReactionHandler = (reaction) => {
52 
      onSelect(reaction.type)
53 
      setSettedReaction(reaction)
54 
    }
5771 stevensc 55 
 
5814 stevensc 56 
    const deleteReactionHandler = () => {
57 
      onDelete()
58 
      setSettedReaction('')
59 
    }
5778 stevensc 60 
 
5814 stevensc 61 
    const onHover = debounce(() => setShowReactions(true), 500)
5734 stevensc 62 
 
5814 stevensc 63 
    const onUnhover = debounce(() => setShowReactions(false), 500)
5741 stevensc 64 
 
5814 stevensc 65 
    useEffect(() => {
66 
      if (outsideClick) setShowReactions(false)
67 
    }, [outsideClick])
5737 stevensc 68 
 
5816 stevensc 69 
    useEffect(() => {
70 
      const currentReaction = reactionsOptions.find(
71 
        (reaction) => reaction.type === myReaction
72 
      )
73 
      setSettedReaction(currentReaction)
5817 stevensc 74 
    }, [])
5816 stevensc 75 
 
5814 stevensc 76 
    return (
5817 stevensc 77 
      <Component
5814 stevensc 78 
        onMouseOver={onHover}
79 
        onMouseOut={onUnhover}
80 
        ref={rectionBtn}
5817 stevensc 81 
        Icon={settedReaction ? settedReaction.icon : RecommendIcon}
82 
        color={settedReaction ? settedReaction.color : '#626d7a'}
83 
        title={settedReaction ? settedReaction.label : 'Reaccionar'}
84 
        onClick={() => {
85 
          settedReaction
86 
            ? deleteReactionHandler()
87 
            : selectReactionHandler(reactionsOptions[0].type)
88 
        }}
5814 stevensc 89 
      >
90 
        <div className={`reactions ${showReactions ? 'active' : ''}`}>
91 
          {reactionsOptions.map((reaction) => {
5815 stevensc 92 
            const { icon: Icon, color, type, label } = reaction
5814 stevensc 93 
            return (
94 
              <button
95 
                key={type}
96 
                onClick={(e) => {
97 
                  e.stopPropagation()
98 
                  selectReactionHandler(reaction)
99 
                }}
5815 stevensc 100 
                title={label}
5814 stevensc 101 
              >
102 
                <Icon style={{ color }} />
103 
              </button>
104 
            )
105 
          })}
106 
        </div>
5817 stevensc 107 
      </Component>
5814 stevensc 108 
    )
109 
  }
5577 stevensc 110 
}
5814 stevensc 111 
 
112 
export default withReactions