Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev Autor Línea Nro. Línea
6626 stevensc 1 
import React, { useRef, useState, useEffect } from 'react'
6625 stevensc 2 
import { useDispatch } from 'react-redux'
3 
import { axios, debounce } from '../../../utils'
4 
import useOutsideClick from '../../../hooks/useOutsideClick'
5 
 
6 
import { addNotification } from '../../../redux/notification/notification.actions'
7 
 
6631 stevensc 8 
import ReactionIcon from '@mui/icons-material/Recommend'
9 
import FunIcon from '../icons/Fun'
6625 stevensc 10 
import LoveItIcon from '../icons/LoveIt'
6631 stevensc 11 
import SupportIcon from '../icons/Support'
6625 stevensc 12 
import InterestIcon from '../icons/Interest'
13 
import RecommendIcon from '../icons/Recommned'
14 
 
15 
const reactionsOptions = [
16 
  {
17 
    type: 'r',
18 
    icon: RecommendIcon,
19 
    label: 'Me gusta',
20 
  },
21 
  {
22 
    type: 's',
23 
    icon: SupportIcon,
24 
    label: 'Dar apoyo',
25 
  },
26 
  {
27 
    type: 'l',
28 
    icon: LoveItIcon,
29 
    label: 'Me encanta',
30 
  },
31 
  {
32 
    type: 'i',
33 
    icon: InterestIcon,
34 
    label: 'Me interesa',
35 
  },
36 
  {
37 
    type: 'f',
38 
    icon: FunIcon,
39 
    label: 'Me divierte',
40 
  },
41 
]
42 
 
43 
const defaultReaction = {
44 
  label: 'Reaccionar',
6631 stevensc 45 
  icon: ReactionIcon,
6625 stevensc 46 
  type: 'default',
47 
}
48 
 
49 
const ReactionsButton = ({
6626 stevensc 50 
  currentReaction,
6625 stevensc 51 
  onChange,
52 
  withLabel,
53 
  reactionTypesUrl,
54 
  deleteUrl,
55 
}) => {
6626 stevensc 56 
  const [settedReaction, setSettedReaction] = useState(defaultReaction)
6625 stevensc 57 
  const [showReactions, setShowReactions] = useState(false)
58 
  const rectionBtn = useRef(null)
59 
  const dispatch = useDispatch()
60 
 
6627 stevensc 61 
  const { icon: Icon } = settedReaction
62 
 
6625 stevensc 63 
  useOutsideClick(rectionBtn, () => setShowReactions(false))
64 
 
65 
  const saveReaction = async (type) => {
66 
    await axios.post(reactionTypesUrl[type]).then((res) => {
67 
      const { success, data } = res.data
68 
 
69 
      if (!success) {
70 
        dispatch(addNotification({ style: 'danger', msg: data }))
71 
      }
72 
 
73 
      onChange(data.reactions)
74 
      setSettedReaction(reactionsOptions[type])
75 
    })
76 
  }
77 
 
78 
  const deleteReaction = async () => {
79 
    await axios.post(deleteUrl).then((res) => {
80 
      const { success, data } = res.data
81 
 
82 
      if (!success) {
83 
        dispatch(addNotification({ style: 'danger', msg: data }))
84 
        return
85 
      }
86 
 
87 
      onChange(data.reactions)
88 
      setSettedReaction(defaultReaction)
89 
    })
90 
  }
91 
 
92 
  const onHover = debounce(() => setShowReactions(true), 500)
93 
 
94 
  const onUnhover = debounce(() => setShowReactions(false), 500)
95 
 
6626 stevensc 96 
  useEffect(() => {
97 
    const currentOption = reactionsOptions.find(
98 
      (reaction) => reaction.icon === currentReaction
99 
    )
100 
    if (!currentOption) {
101 
      setSettedReaction(defaultReaction)
102 
      return
103 
    }
104 
 
105 
    setSettedReaction(currentOption)
106 
  }, [currentReaction])
107 
 
6625 stevensc 108 
  return (
109 
    <>
110 
      <button
6630 stevensc 111 
        className="btn position-relative"
6625 stevensc 112 
        onMouseOver={onHover}
113 
        onMouseOut={onUnhover}
114 
        ref={rectionBtn}
115 
        onClick={() =>
116 
          settedReaction.type !== 'default'
117 
            ? deleteReaction()
118 
            : saveReaction(reactionsOptions[0].type)
119 
        }
120 
      >
6631 stevensc 121 
        <Icon />
6625 stevensc 122 
        {withLabel && settedReaction.label}
123 
        <div className={`reactions ${showReactions ? 'active' : ''}`}>
124 
          {reactionsOptions.map((reaction) => {
125 
            const { icon: Icon, color, type, label } = reaction
126 
 
127 
            return (
128 
              <button
129 
                key={type}
130 
                onClick={(e) => {
131 
                  e.stopPropagation()
132 
                  saveReaction(type)
133 
                }}
134 
                title={label}
135 
              >
136 
                <Icon style={{ color }} />
137 
              </button>
138 
            )
139 
          })}
140 
        </div>
141 
      </button>
142 
    </>
143 
  )
144 
}
145 
 
146 
export default ReactionsButton