Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 5772 Rev 5778
Línea 13... Línea 13...
13 
  saveReactionRecommendedUrl,
 13 
  saveReactionRecommendedUrl,
14 
  saveReactionSupportUrl,
 14 
  saveReactionSupportUrl,
15 
  saveReactionLoveUrl,
 15 
  saveReactionLoveUrl,
16 
  saveReactionInterestUrl,
 16 
  saveReactionInterestUrl,
17 
  saveReactionFunUrl,
 17 
  saveReactionFunUrl,
- 
 
 18 
  deleteReactionUrl,
18 
  myReaction,
 19 
  myReaction,
- 
 
 20 
  reactions,
19 
}) => {
 21 
}) => {
20 
  const [settedReaction, setSettedReaction] = useState(myReaction)
 22 
  const [settedReaction, setSettedReaction] = useState(myReaction)
21 
  const [showReactions, setShowReactions] = useState(false)
 23 
  const [showReactions, setShowReactions] = useState(false)
22 
  const rectionBtn = useRef(null)
 24 
  const rectionBtn = useRef(null)
23 
  const outsideClick = useOutsideClick(rectionBtn)
 25 
  const outsideClick = useOutsideClick(rectionBtn)
24 
  const dispatch = useDispatch()
 26 
  const dispatch = useDispatch()
Línea 25... Línea 27...
25 
 
 27 
 
26 
  const reactions = [
 28 
  const reactionsOptions = [
27 
    {
 29 
    {
28 
      type: 'r',
 30 
      type: 'r',
29 
      icon: <RecommendIcon style={{ color: '#7405f9' }} />,
 31 
      icon: <RecommendIcon style={{ color: '#7405f9' }} />,
30 
      url: saveReactionRecommendedUrl,
 32 
      url: saveReactionRecommendedUrl,
Línea 67... Línea 69...
67 
      setSettedReaction(type)
 69 
      setSettedReaction(type)
68 
      setShowReactions(false)
 70 
      setShowReactions(false)
69 
    })
 71 
    })
70 
  }
 72 
  }
Línea -... Línea 73...
- 
 
 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 }))
- 
 
 80 
        return
- 
 
 81 
      }
- 
 
 82 
 
- 
 
 83 
      setSettedReaction('')
- 
 
 84 
      setShowReactions(false)
- 
 
 85 
    })
- 
 
 86 
  }
71 
 
 87 
 
Línea 72... Línea 88...
72 
  const onHover = debounce(() => setShowReactions(true), 500)
 88 
  const onHover = debounce(() => setShowReactions(true), 500)
Línea 73... Línea 89...
73 
 
 89 
 
74 
  const onUnhover = debounce((e) => setShowReactions(false), 500)
 90 
  const onUnhover = debounce(() => setShowReactions(false), 500)
75 
 
 91 
 
76 
  useEffect(() => {
 92 
  useEffect(() => {
Línea 83... Línea 99...
83 
    <button
 99 
    <button
84 
      type="button"
 100 
      type="button"
85 
      className="reaction-btn"
 101 
      className="reaction-btn"
86 
      onMouseOver={onHover}
 102 
      onMouseOver={onHover}
87 
      onMouseOut={onUnhover}
 103 
      onMouseOut={onUnhover}
- 
 
 104 
      onClick={() => {
- 
 
 105 
        if (settedReaction) {
- 
 
 106 
          deleteReaction()
- 
 
 107 
          return
- 
 
 108 
        }
- 
 
 109 
 
- 
 
 110 
        reactionHandler(reactionsOptions[0].url, reactionsOptions[0].type)
- 
 
 111 
      }}
88 
      ref={rectionBtn}
 112 
      ref={rectionBtn}
89 
    >
 113 
    >
90 
      {settedReaction ? (
 114 
      {settedReaction ? (
91 
        reactions.find((reaction) => reaction.type === settedReaction).icon
 115 
        reactionsOptions.find((reaction) => reaction.type === settedReaction)
- 
 
 116 
          .icon
92 
      ) : (
 117 
      ) : (
93 
        <RecommendIcon style={{ color: '#626d7a' }} />
 118 
        <RecommendIcon style={{ color: '#626d7a' }} />
94 
      )}
 119 
      )}
95 
      <div className={`reactions ${showReactions ? 'active' : ''}`}>
 120 
      <div className={`reactions ${showReactions ? 'active' : ''}`}>
96 
        {reactions.map((reaction) => (
 121 
        {reactionsOptions.map((reaction) => (
97 
          <button
 122 
          <button
98 
            key={reaction.type}
 123 
            key={reaction.type}
99 
            onClick={() => reactionHandler(reaction.url, reaction.type)}
 124 
            onClick={() => reactionHandler(reaction.url, reaction.type)}
100 
          >
 125 
          >
101 
            {reaction.icon}
 126 
            {reaction.icon}