Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2134 | Rev 2153 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 2134 Rev 2152
Línea 4... Línea 4...
4 
import useOutsideClick from '../../../hooks/useOutsideClick'
 4 
import useOutsideClick from '../../../hooks/useOutsideClick'
Línea 5... Línea 5...
5 
 
 5 
 
6 
import { REACTIONS } from '@app/constants/feed'
 6 
import { REACTIONS } from '@app/constants/feed'
Línea 7... Línea -...
7 
import { addNotification } from '../../../redux/notification/notification.actions'
 - 
 
8 
 
 - 
 
9 
import ReactionIcon from '@mui/icons-material/Recommend'
 - 
 
10 
 
 - 
 
11 
const initialReaction = {
 - 
 
12 
  label: 'Reaccionar',
 - 
 
13 
  icon: <ReactionIcon />,
 - 
 
14 
  type: 'default'
 - 
 
15 
}
 7 
import { addNotification } from '../../../redux/notification/notification.actions'
16 
 
 8 
 
17 
const ReactionsButton = ({
 9 
const ReactionsButton = ({
18 
  currentReaction,
 10 
  currentReaction,
19 
  onChange = () => null,
 11 
  onChange = () => null,
20 
  withLabel,
 12 
  withLabel,
21 
  saveUrl,
 13 
  saveUrl,
22 
  deleteUrl,
 14 
  deleteUrl,
23 
  ...rest
 15 
  ...rest
24 
}) => {
 16 
}) => {
25 
  const [reaction, setReaction] = useState(initialReaction)
 17 
  const [reaction, setReaction] = useState(null)
26 
  const [isHover, setIsHover] = useState(false)
 18 
  const [isHover, setIsHover] = useState(false)
- 
 
 19 
  const rectionBtn = useRef(null)
27 
  const rectionBtn = useRef(null)
 20 
  const dispatch = useDispatch()
Línea 28... Línea 21...
28 
  const dispatch = useDispatch()
 21 
 
29 
  useOutsideClick(rectionBtn, () => setIsHover(false))
 22 
  useOutsideClick(rectionBtn, () => setIsHover(false))
30 
 
 23 
 
Línea 38... Línea 31...
38 
      if (!success) {
 31 
      if (!success) {
39 
        dispatch(addNotification({ style: 'danger', msg: data }))
 32 
        dispatch(addNotification({ style: 'danger', msg: data }))
40 
        return
 33 
        return
41 
      }
 34 
      }
Línea 42... Línea -...
42 
 
 - 
 
43 
      const newReaction = REACTIONS.find((reaction) => reaction.type === type)
 - 
 
44 
      setReaction(newReaction)
 - 
 
45 
 
 35 
 
46 
      onChange(data)
 36 
      onChange(data)
47 
    })
 37 
    })
Línea 48... Línea 38...
48 
  }
 38 
  }
Línea 54... Línea 44...
54 
      if (!success) {
 44 
      if (!success) {
55 
        dispatch(addNotification({ style: 'danger', msg: data }))
 45 
        dispatch(addNotification({ style: 'danger', msg: data }))
56 
        return
 46 
        return
57 
      }
 47 
      }
Línea -... Línea 48...
- 
 
 48 
 
58 
 
 49 
      setReaction(null)
59 
      onChange(data)
 - 
 
60 
      setReaction(initialReaction)
 50 
      onChange(data)
61 
    })
 51 
    })
Línea 62... Línea 52...
62 
  }
 52 
  }
Línea 63... Línea 53...
63 
 
 53 
 
Línea 64... Línea 54...
64 
  const onHover = debounce(() => setIsHover(true), 500)
 54 
  const onHover = debounce(() => setIsHover(true), 500)
65 
 
 55 
 
66 
  const onUnhover = debounce(() => setIsHover(false), 500)
 - 
 
67 
 
 - 
 
68 
  useEffect(() => {
 56 
  const onUnhover = debounce(() => setIsHover(false), 500)
69 
    const currentOption = REACTIONS.find(({ type }) => type === currentReaction)
 - 
 
70 
 
 - 
 
71 
    if (!currentOption) {
 - 
 
72 
      setReaction(initialReaction)
 - 
 
73 
      return
 57 
 
Línea 74... Línea 58...
74 
    }
 58 
  useEffect(() => {
75 
 
 59 
    const currentOption = REACTIONS.find(({ type }) => type === currentReaction)
76 
    setReaction(currentOption)
 60 
    currentOption ? setReaction(currentOption) : setReaction(null)
Línea 90... Línea 74...
90 
        }
 74 
        }
91 
      >
 75 
      >
92 
        {reaction.icon}
 76 
        {reaction.icon}
93 
        {withLabel && reaction.label}
 77 
        {withLabel && reaction.label}
94 
        <div className={`reactions ${isHover ? 'active' : ''}`}>
 78 
        <div className={`reactions ${isHover ? 'active' : ''}`}>
95 
          {REACTIONS.map(({ icon, type, label }) => (
 79 
          {REACTIONS.map(({ icon: Icon, type, label, color }) => (
96 
            <button
 80 
            <button
97 
              key={type}
 81 
              key={type}
98 
              onClick={(e) => {
 82 
              onClick={(e) => {
99 
                e.stopPropagation()
 83 
                e.stopPropagation()
100 
                saveReaction(type)
 84 
                saveReaction(type)
101 
              }}
 85 
              }}
102 
              title={label}
 86 
              title={label}
103 
            >
 87 
            >
104 
              {icon}
 88 
              <Icon style={{ color }} />
105 
            </button>
 89 
            </button>
106 
          ))}
 90 
          ))}
107 
        </div>
 91 
        </div>
108 
      </button>
 92 
      </button>
109 
    </>
 93 
    </>