Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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