Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 7073 | Rev 7075 | 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()
7073 stevensc 32 
  useOutsideClick(rectionBtn, () => setShowReactions(false))
6625 stevensc 33 
 
7073 stevensc 34 
  const { icon: Icon } = settedReaction
35 
 
7070 stevensc 36 
  const reactionsOptions = [
37 
    {
38 
      type: 'r',
39 
      icon: RecommendIcon,
40 
      label: 'Me gusta',
41 
    },
42 
    {
43 
      type: 's',
44 
      icon: SupportIcon,
45 
      label: 'Dar apoyo',
46 
    },
47 
    {
48 
      type: 'l',
49 
      icon: LoveItIcon,
50 
      label: 'Me encanta',
51 
    },
52 
    {
53 
      type: 'i',
54 
      icon: InterestIcon,
55 
      label: 'Me interesa',
56 
    },
57 
    {
58 
      type: 'f',
59 
      icon: FunIcon,
60 
      label: 'Me divierte',
61 
    },
62 
  ]
63 
 
7073 stevensc 64 
  const saveReaction = (type) => {
7074 stevensc 65 
    axios.post(reactionTypesUrl[type]).then((response) => {
66 
      const { success, data } = response.data
6625 stevensc 67 
 
68 
      if (!success) {
69 
        dispatch(addNotification({ style: 'danger', msg: data }))
7074 stevensc 70 
        return
6625 stevensc 71 
      }
72 
 
7071 stevensc 73 
      const typeIndex = reactionsOptions.findIndex(
74 
        (option) => option.type === type
75 
      )
7074 stevensc 76 
      const newReaction = reactionsOptions[typeIndex]
77 
      console.log(newReaction)
6625 stevensc 78 
      onChange(data.reactions)
7074 stevensc 79 
      setSettedReaction(newReaction)
6625 stevensc 80 
    })
81 
  }
82 
 
7073 stevensc 83 
  const deleteReaction = () => {
84 
    axios.post(deleteUrl).then((res) => {
6625 stevensc 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 
    )
7073 stevensc 105 
 
6626 stevensc 106 
    if (!currentOption) {
107 
      setSettedReaction(defaultReaction)
108 
      return
109 
    }
110 
 
111 
    setSettedReaction(currentOption)
112 
  }, [currentReaction])
113 
 
6625 stevensc 114 
  return (
115 
    <>
116 
      <button
6630 stevensc 117 
        className="btn position-relative"
6625 stevensc 118 
        onMouseOver={onHover}
119 
        onMouseOut={onUnhover}
120 
        ref={rectionBtn}
121 
        onClick={() =>
122 
          settedReaction.type !== 'default'
123 
            ? deleteReaction()
124 
            : saveReaction(reactionsOptions[0].type)
125 
        }
126 
      >
6631 stevensc 127 
        <Icon />
6625 stevensc 128 
        {withLabel && settedReaction.label}
129 
        <div className={`reactions ${showReactions ? 'active' : ''}`}>
130 
          {reactionsOptions.map((reaction) => {
131 
            const { icon: Icon, color, type, label } = reaction
132 
 
133 
            return (
134 
              <button
135 
                key={type}
136 
                onClick={(e) => {
137 
                  e.stopPropagation()
138 
                  saveReaction(type)
139 
                }}
140 
                title={label}
141 
              >
142 
                <Icon style={{ color }} />
143 
              </button>
144 
            )
145 
          })}
146 
        </div>
147 
      </button>
148 
    </>
149 
  )
150 
}
151 
 
152 
export default ReactionsButton