Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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