Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 7231 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
7079 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 
 
7079 stevensc 15 
const initialReaction = {
16 
  label: 'Reaccionar',
17 
  icon: <ReactionIcon />,
18 
  type: 'default',
19 
}
20 
 
6625 stevensc 21 
const ReactionsButton = ({
7077 stevensc 22 
  currentReaction,
7231 stevensc 23 
  onChange = () => null,
6625 stevensc 24 
  withLabel,
7101 stevensc 25 
  saveUrl,
6625 stevensc 26 
  deleteUrl,
7132 stevensc 27 
  ...rest
6625 stevensc 28 
}) => {
7079 stevensc 29 
  const [reaction, setReaction] = useState(initialReaction)
30 
  const [isHover, setIsHover] = useState(false)
6625 stevensc 31 
  const rectionBtn = useRef(null)
32 
  const dispatch = useDispatch()
7079 stevensc 33 
  useOutsideClick(rectionBtn, () => setIsHover(false))
6625 stevensc 34 
 
7079 stevensc 35 
  const reactions = [
7070 stevensc 36 
    {
37 
      type: 'r',
7075 stevensc 38 
      icon: <RecommendIcon />,
7070 stevensc 39 
      label: 'Me gusta',
40 
    },
41 
    {
42 
      type: 's',
7075 stevensc 43 
      icon: <SupportIcon />,
7070 stevensc 44 
      label: 'Dar apoyo',
45 
    },
46 
    {
47 
      type: 'l',
7075 stevensc 48 
      icon: <LoveItIcon />,
7070 stevensc 49 
      label: 'Me encanta',
50 
    },
51 
    {
52 
      type: 'i',
7075 stevensc 53 
      icon: <InterestIcon />,
7070 stevensc 54 
      label: 'Me interesa',
55 
    },
56 
    {
57 
      type: 'f',
7075 stevensc 58 
      icon: <FunIcon />,
7070 stevensc 59 
      label: 'Me divierte',
60 
    },
61 
  ]
62 
 
7073 stevensc 63 
  const saveReaction = (type) => {
7101 stevensc 64 
    const formData = new FormData()
65 
    formData.append('reaction', type)
66 
 
67 
    axios.post(saveUrl, formData).then((res) => {
7079 stevensc 68 
      const { success, data } = res.data
6625 stevensc 69 
 
70 
      if (!success) {
71 
        dispatch(addNotification({ style: 'danger', msg: data }))
7074 stevensc 72 
        return
6625 stevensc 73 
      }
74 
 
7079 stevensc 75 
      const newReaction = reactions.find((reaction) => reaction.type === type)
76 
      setReaction(newReaction)
77 
 
7230 stevensc 78 
      onChange(data)
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 
 
7232 stevensc 91 
      onChange(data)
7079 stevensc 92 
      setReaction(initialReaction)
6625 stevensc 93 
    })
94 
  }
95 
 
7079 stevensc 96 
  const onHover = debounce(() => setIsHover(true), 500)
6625 stevensc 97 
 
7079 stevensc 98 
  const onUnhover = debounce(() => setIsHover(false), 500)
6625 stevensc 99 
 
7077 stevensc 100 
  useEffect(() => {
7079 stevensc 101 
    const currentOption = reactions.find(({ type }) => type === currentReaction)
102 
 
103 
    if (!currentOption) {
104 
      setReaction(initialReaction)
105 
      return
106 
    }
107 
 
108 
    setReaction(currentOption)
7077 stevensc 109 
  }, [currentReaction])
110 
 
6625 stevensc 111 
  return (
7079 stevensc 112 
    <>
113 
      <button
7132 stevensc 114 
        {...rest}
7079 stevensc 115 
        onMouseOver={onHover}
116 
        onMouseOut={onUnhover}
117 
        ref={rectionBtn}
118 
        onClick={() =>
119 
          reaction.type !== 'default'
120 
            ? deleteReaction()
121 
            : saveReaction(reactions[0].type)
122 
        }
123 
      >
124 
        {reaction.icon}
125 
        {withLabel && reaction.label}
126 
        <div className={`reactions ${isHover ? 'active' : ''}`}>
127 
          {reactions.map(({ icon, type, label }) => (
128 
            <button
129 
              key={type}
130 
              onClick={(e) => {
131 
                e.stopPropagation()
132 
                saveReaction(type)
133 
              }}
134 
              title={label}
135 
            >
136 
              {icon}
137 
            </button>
138 
          ))}
139 
        </div>
140 
      </button>
141 
    </>
6625 stevensc 142 
  )
143 
}
144 
 
145 
export default ReactionsButton