Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2775 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 2775 Rev 3719
Línea 1... Línea 1...
1 
import React, { useState, useEffect } from 'react'
 1 
import React, { useState, useEffect } from 'react';
2 
import { useDispatch } from 'react-redux'
 2 
import { useDispatch } from 'react-redux';
3 
 
 3 
 
4 
import { axios, debounce } from '../../../utils'
 4 
import { axios, debounce } from '../../../utils';
5 
import { useOutsideClick } from '@hooks'
 5 
import { useOutsideClick } from '@hooks';
6 
 
 6 
 
7 
import { REACTIONS } from '@app/constants/feed'
 7 
import { REACTIONS } from '@app/constants/feed';
8 
import { addNotification } from '../../../redux/notification/notification.actions'
 8 
import { addNotification } from '../../../redux/notification/notification.actions';
9 
 
 9 
 
10 
const ReactionsButton = ({
 10 
const ReactionsButton = ({
11 
  currentReaction,
 11 
  currentReaction,
12 
  onChange = () => null,
 12 
  onChange = () => null,
13 
  withLabel,
 13 
  withLabel,
14 
  saveUrl,
 14 
  saveUrl,
15 
  deleteUrl,
 15 
  deleteUrl,
16 
  ...rest
 16 
  ...rest
17 
}) => {
 17 
}) => {
18 
  const [reaction, setReaction] = useState(null)
 18 
  const [reaction, setReaction] = useState(null);
19 
  const [isHover, setIsHover] = useState(false)
 19 
  const [isHover, setIsHover] = useState(false);
20 
  const dispatch = useDispatch()
 20 
  const dispatch = useDispatch();
21 
 
 21 
 
22 
  const [ref] = useOutsideClick(() => setIsHover(false))
 22 
  const [ref] = useOutsideClick(() => setIsHover(false));
23 
 
 23 
 
24 
  const saveReaction = (type) => {
 24 
  const saveReaction = (type) => {
25 
    const formData = new FormData()
 25 
    const formData = new FormData();
26 
    formData.append('reaction', type)
 26 
    formData.append('reaction', type);
27 
 
 27 
 
28 
    axios.post(saveUrl, formData).then((res) => {
 28 
    axios.post(saveUrl, formData).then((res) => {
29 
      const { success, data } = res.data
 29 
      const { success, data } = res.data;
30 
 
 30 
 
31 
      if (!success) {
 31 
      if (!success) {
32 
        dispatch(addNotification({ style: 'danger', msg: data }))
 32 
        dispatch(addNotification({ style: 'danger', msg: data }));
33 
        return
 33 
        return;
34 
      }
 34 
      }
35 
 
 35 
 
36 
      onChange(data)
 36 
      onChange(data);
37 
    })
 37 
    });
38 
  }
 38 
  };
39 
 
 39 
 
40 
  const deleteReaction = () => {
 40 
  const deleteReaction = () => {
41 
    axios.post(deleteUrl).then((res) => {
 41 
    axios.post(deleteUrl).then((res) => {
42 
      const { success, data } = res.data
 42 
      const { success, data } = res.data;
43 
 
 43 
 
44 
      if (!success) {
 44 
      if (!success) {
45 
        dispatch(addNotification({ style: 'danger', msg: data }))
 45 
        dispatch(addNotification({ style: 'danger', msg: data }));
46 
        return
 46 
        return;
47 
      }
 47 
      }
48 
 
 48 
 
49 
      setReaction(null)
 49 
      setReaction(null);
50 
      onChange(data)
 50 
      onChange(data);
51 
    })
 51 
    });
52 
  }
 52 
  };
53 
 
 53 
 
54 
  const onHover = debounce(() => setIsHover(true), 500)
 54 
  const onHover = debounce(() => setIsHover(true), 500);
55 
 
 55 
 
56 
  const onUnhover = debounce(() => setIsHover(false), 500)
 56 
  const onUnhover = debounce(() => setIsHover(false), 500);
57 
 
 57 
 
58 
  useEffect(() => {
 58 
  useEffect(() => {
59 
    const currentOption = REACTIONS.find(({ type }) => type === currentReaction)
 59 
    const currentOption = REACTIONS.find(({ type }) => type === currentReaction);
60 
    currentOption ? setReaction(currentOption) : setReaction(null)
 60 
    currentOption ? setReaction(currentOption) : setReaction(null);
61 
  }, [currentReaction])
 61 
  }, [currentReaction]);
62 
 
 62 
 
63 
  return (
 63 
  return (
64 
    <>
 64 
    <>
65 
      <button
 65 
      <button
66 
        {...rest}
 66 
        {...rest}
67 
        onMouseOver={onHover}
 67 
        onMouseOver={onHover}
68 
        onMouseOut={onUnhover}
 68 
        onMouseOut={onUnhover}
69 
        ref={ref}
 69 
        ref={ref}
70 
        onClick={() =>
 70 
        onClick={() =>
71 
          reaction.type !== 'default'
 - 
 
72 
            ? deleteReaction()
 - 
 
73 
            : saveReaction(REACTIONS[0].type)
 71 
          reaction.type !== 'default' ? deleteReaction() : saveReaction(REACTIONS[0].type)
74 
        }
 72 
        }
75 
      >
 73 
      >
76 
        {reaction.icon}
 74 
        {reaction.icon}
77 
        {withLabel && reaction.label}
 75 
        {withLabel && reaction.label}
78 
        <div className={`reactions ${isHover ? 'active' : ''}`}>
 76 
        <div className={`reactions ${isHover ? 'active' : ''}`}>
79 
          {REACTIONS.map(({ icon: Icon, type, label, color }) => (
 77 
          {REACTIONS.map(({ icon: Icon, type, label, color }) => (
80 
            <button
 78 
            <button
81 
              key={type}
 79 
              key={type}
82 
              onClick={(e) => {
 80 
              onClick={(e) => {
83 
                e.stopPropagation()
 81 
                e.stopPropagation();
84 
                saveReaction(type)
 82 
                saveReaction(type);
85 
              }}
 83 
              }}
86 
              title={label}
 84 
              title={label}
87 
            >
 85 
            >
88 
              <Icon style={{ color }} />
 86 
              <Icon style={{ color }} />
89 
            </button>
 87 
            </button>
90 
          ))}
 88 
          ))}
91 
        </div>
 89 
        </div>
92 
      </button>
 90 
      </button>
93 
    </>
 91 
    </>
94 
  )
 92 
  );
95 
}
 93 
};
96 
 
 94 
 
97 
export default ReactionsButton
 95 
export default ReactionsButton;