Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 5778 Rev 5781
Línea 2... Línea 2...
2 
import RecommendIcon from '@mui/icons-material/Recommend'
 2 
import RecommendIcon from '@mui/icons-material/Recommend'
3 
import FavoriteIcon from '@mui/icons-material/FavoriteTwoTone'
 3 
import FavoriteIcon from '@mui/icons-material/FavoriteTwoTone'
4 
import VolunteerActivismIcon from '@mui/icons-material/VolunteerActivism'
 4 
import VolunteerActivismIcon from '@mui/icons-material/VolunteerActivism'
5 
import EmojiEmotionsIcon from '@mui/icons-material/EmojiEmotions'
 5 
import EmojiEmotionsIcon from '@mui/icons-material/EmojiEmotions'
6 
import TungstenIcon from '@mui/icons-material/Tungsten'
 6 
import TungstenIcon from '@mui/icons-material/Tungsten'
7 
import { axios, debounce } from '../../../utils'
 7 
import { debounce } from '../../../utils'
8 
import useOutsideClick from '../../../hooks/useOutsideClick'
 8 
import useOutsideClick from '../../../hooks/useOutsideClick'
9 
import { addNotification } from '../../../redux/notification/notification.actions'
 - 
 
10 
import { useDispatch } from 'react-redux'
 - 
 
Línea 11... Línea 9...
11 
 
 9 
 
12 
export const ReactionButton = ({
 - 
 
13 
  saveReactionRecommendedUrl,
 - 
 
14 
  saveReactionSupportUrl,
 - 
 
15 
  saveReactionLoveUrl,
 - 
 
16 
  saveReactionInterestUrl,
 - 
 
17 
  saveReactionFunUrl,
 - 
 
18 
  deleteReactionUrl,
 - 
 
19 
  myReaction,
 - 
 
20 
  reactions,
 - 
 
21 
}) => {
 10 
export const ReactionButton = ({ onSelect, onDelete, myReaction }) => {
22 
  const [settedReaction, setSettedReaction] = useState(myReaction)
 11 
  const [settedReaction, setSettedReaction] = useState(myReaction)
23 
  const [showReactions, setShowReactions] = useState(false)
 12 
  const [showReactions, setShowReactions] = useState(false)
24 
  const rectionBtn = useRef(null)
 13 
  const rectionBtn = useRef(null)
25 
  const outsideClick = useOutsideClick(rectionBtn)
 - 
 
Línea 26... Línea 14...
26 
  const dispatch = useDispatch()
 14 
  const outsideClick = useOutsideClick(rectionBtn)
27 
 
 15 
 
28 
  const reactionsOptions = [
 16 
  const reactionsOptions = [
29 
    {
 17 
    {
30 
      type: 'r',
 - 
 
31 
      icon: <RecommendIcon style={{ color: '#7405f9' }} />,
 18 
      type: 'r',
32 
      url: saveReactionRecommendedUrl,
 19 
      icon: <RecommendIcon style={{ color: '#7405f9' }} />,
33 
    },
 20 
    },
34 
    {
 21 
    {
35 
      type: 's',
 - 
 
36 
      icon: <VolunteerActivismIcon style={{ color: '#6495ED' }} />,
 22 
      type: 's',
37 
      url: saveReactionSupportUrl,
 23 
      icon: <VolunteerActivismIcon style={{ color: '#6495ED' }} />,
38 
    },
 24 
    },
39 
    {
 25 
    {
40 
      type: 'l',
 - 
 
41 
      icon: <FavoriteIcon style={{ color: '#DF704D' }} />,
 26 
      type: 'l',
42 
      url: saveReactionLoveUrl,
 27 
      icon: <FavoriteIcon style={{ color: '#DF704D' }} />,
43 
    },
 28 
    },
44 
    {
 29 
    {
45 
      type: 'i',
 30 
      type: 'i',
46 
      icon: (
 31 
      icon: (
47 
        <TungstenIcon
 32 
        <TungstenIcon
48 
          style={{ color: '#F5BB5C', transform: 'rotate(180deg)' }}
 33 
          style={{ color: '#F5BB5C', transform: 'rotate(180deg)' }}
49 
        />
 - 
 
50 
      ),
 34 
        />
51 
      url: saveReactionInterestUrl,
 35 
      ),
52 
    },
 36 
    },
53 
    {
 37 
    {
54 
      type: 'f',
 - 
 
55 
      icon: <EmojiEmotionsIcon style={{ color: '#FF7F50' }} />,
 38 
      type: 'f',
56 
      url: saveReactionFunUrl,
 39 
      icon: <EmojiEmotionsIcon style={{ color: '#FF7F50' }} />,
Línea 57... Línea 40...
57 
    },
 40 
    },
58 
  ]
 - 
 
59 
 
 41 
  ]
60 
  const reactionHandler = (url, type) => {
 - 
 
61 
    axios.post(url).then((res) => {
 - 
 
62 
      const { success, data } = res.data
 - 
 
63 
 
 - 
 
64 
      if (!success) {
 - 
 
65 
        dispatch(addNotification({ style: 'danger', msg: data }))
 - 
 
66 
        return
 42 
 
67 
      }
 - 
 
68 
 
 - 
 
69 
      setSettedReaction(type)
 43 
  const selectReactionHandler = async (type) => {
Línea 70... Línea 44...
70 
      setShowReactions(false)
 44 
    const res = await onSelect(type)
71 
    })
 - 
 
72 
  }
 45 
    if (res) setSettedReaction(type)
73 
 
 - 
 
74 
  const deleteReaction = () => {
 - 
 
75 
    axios.post(deleteReactionUrl).then((res) => {
 - 
 
76 
      const { success, data } = res.data
 - 
 
77 
 
 - 
 
78 
      if (!success) {
 - 
 
79 
        dispatch(addNotification({ style: 'danger', msg: data }))
 46 
  }
80 
        return
 - 
 
81 
      }
 - 
 
82 
 
 47 
 
Línea 83... Línea 48...
83 
      setSettedReaction('')
 48 
  const deleteReactionHandler = async () => {
Línea 84... Línea 49...
84 
      setShowReactions(false)
 49 
    const res = await onDelete()
Línea 85... Línea 50...
85 
    })
 50 
    if (res) setSettedReaction('')
86 
  }
 - 
 
87 
 
 51 
  }
88 
  const onHover = debounce(() => setShowReactions(true), 500)
 - 
 
89 
 
 52 
 
Línea 90... Línea 53...
90 
  const onUnhover = debounce(() => setShowReactions(false), 500)
 53 
  const onHover = debounce(() => setShowReactions(true), 500)
91 
 
 54 
 
92 
  useEffect(() => {
 55 
  const onUnhover = debounce(() => setShowReactions(false), 500)
93 
    if (outsideClick) {
 56 
 
94 
      setShowReactions(false)
 57 
  useEffect(() => {
95 
    }
 58 
    if (outsideClick) setShowReactions(false)
96 
  }, [outsideClick])
 59 
  }, [outsideClick])
97 
 
 60 
 
98 
  return (
 61 
  return (
99 
    <button
 - 
 
100 
      type="button"
 - 
 
101 
      className="reaction-btn"
 - 
 
102 
      onMouseOver={onHover}
 62 
    <button
103 
      onMouseOut={onUnhover}
 63 
      type="button"
104 
      onClick={() => {
 64 
      className="reaction-btn"
105 
        if (settedReaction) {
 65 
      onMouseOver={onHover}
106 
          deleteReaction()
 66 
      onMouseOut={onUnhover}
107 
          return
 67 
      onClick={() => {
Línea 119... Línea 79...
119 
      )}
 79 
      )}
120 
      <div className={`reactions ${showReactions ? 'active' : ''}`}>
 80 
      <div className={`reactions ${showReactions ? 'active' : ''}`}>
121 
        {reactionsOptions.map((reaction) => (
 81 
        {reactionsOptions.map((reaction) => (
122 
          <button
 82 
          <button
123 
            key={reaction.type}
 83 
            key={reaction.type}
124 
            onClick={() => reactionHandler(reaction.url, reaction.type)}
 84 
            onClick={() => selectReactionHandler(reaction.type)}
125 
          >
 85 
          >
126 
            {reaction.icon}
 86 
            {reaction.icon}
127 
          </button>
 87 
          </button>
128 
        ))}
 88 
        ))}
129 
      </div>
 89 
      </div>