Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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