Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 7075 Rev 7076
Línea 1... Línea 1...
1 
import React, { useRef, useState, useEffect } from 'react'
 1 
import React, { useRef, useState } from 'react'
2 
import { useDispatch } from 'react-redux'
 2 
import { useDispatch } from 'react-redux'
3 
import { axios, debounce } from '../../../utils'
 3 
import { axios, debounce } from '../../../utils'
4 
import useOutsideClick from '../../../hooks/useOutsideClick'
 4 
import useOutsideClick from '../../../hooks/useOutsideClick'
Línea 5... Línea 5...
5 
 
 5 
 
Línea 10... Línea 10...
10 
import LoveItIcon from '../icons/LoveIt'
 10 
import LoveItIcon from '../icons/LoveIt'
11 
import SupportIcon from '../icons/Support'
 11 
import SupportIcon from '../icons/Support'
12 
import InterestIcon from '../icons/Interest'
 12 
import InterestIcon from '../icons/Interest'
13 
import RecommendIcon from '../icons/Recommned'
 13 
import RecommendIcon from '../icons/Recommned'
Línea 14... Línea -...
14 
 
 - 
 
15 
const defaultReaction = {
 - 
 
16 
  label: 'Reaccionar',
 - 
 
17 
  icon: <ReactionIcon />,
 - 
 
18 
  type: 'default',
 - 
 
19 
}
 - 
 
20 
 
 14 
 
21 
const ReactionsButton = ({
 15 
const ReactionsButton = ({
22 
  currentReaction,
 16 
  currentReaction = 0,
23 
  onChange,
 17 
  onChange,
24 
  withLabel,
 18 
  withLabel,
25 
  reactionTypesUrl,
 19 
  reactionTypesUrl,
26 
  deleteUrl,
 20 
  deleteUrl,
27 
}) => {
 21 
}) => {
28 
  const [settedReaction, setSettedReaction] = useState(defaultReaction)
 22 
  const [reactionIndex, setReactionIndex] = useState(currentReaction)
29 
  const [showReactions, setShowReactions] = useState(false)
 23 
  const [showReactions, setShowReactions] = useState(false)
30 
  const rectionBtn = useRef(null)
 24 
  const rectionBtn = useRef(null)
31 
  const dispatch = useDispatch()
 25 
  const dispatch = useDispatch()
Línea 32... Línea 26...
32 
  useOutsideClick(rectionBtn, () => setShowReactions(false))
 26 
  useOutsideClick(rectionBtn, () => setShowReactions(false))
33 
 
 27 
 
- 
 
 28 
  const reactionsOptions = [
- 
 
 29 
    {
- 
 
 30 
      label: 'Reaccionar',
- 
 
 31 
      icon: <ReactionIcon />,
- 
 
 32 
      type: 'default',
34 
  const reactionsOptions = [
 33 
    },
35 
    {
 34 
    {
36 
      type: 'r',
 35 
      type: 'r',
37 
      icon: <RecommendIcon />,
 36 
      icon: <RecommendIcon />,
38 
      label: 'Me gusta',
 37 
      label: 'Me gusta',
Línea 69... Línea 68...
69 
      }
 68 
      }
Línea 70... Línea 69...
70 
 
 69 
 
71 
      const typeIndex = reactionsOptions.findIndex(
 70 
      const typeIndex = reactionsOptions.findIndex(
72 
        (option) => option.type === type
 71 
        (option) => option.type === type
73 
      )
 - 
 
74 
      const newReaction = reactionsOptions[typeIndex]
 - 
 
Línea 75... Línea 72...
75 
      console.log(newReaction)
 72 
      )
76 
 
 73 
 
77 
      onChange(data.reactions)
 74 
      onChange(data.reactions)
78 
      setSettedReaction(newReaction)
 75 
      setReactionIndex(typeIndex)
Línea 79... Línea 76...
79 
    })
 76 
    })
80 
  }
 77 
  }
Línea 87... Línea 84...
87 
        dispatch(addNotification({ style: 'danger', msg: data }))
 84 
        dispatch(addNotification({ style: 'danger', msg: data }))
88 
        return
 85 
        return
89 
      }
 86 
      }
Línea 90... Línea 87...
90 
 
 87 
 
91 
      onChange(data.reactions)
 88 
      onChange(data.reactions)
92 
      setSettedReaction(defaultReaction)
 89 
      setReactionIndex(0)
93 
    })
 90 
    })
Línea 94... Línea 91...
94 
  }
 91 
  }
Línea 95... Línea 92...
95 
 
 92 
 
Línea 96... Línea -...
96 
  const onHover = debounce(() => setShowReactions(true), 500)
 - 
 
97 
 
 - 
 
98 
  const onUnhover = debounce(() => setShowReactions(false), 500)
 - 
 
99 
 
 - 
 
100 
  useEffect(() => {
 - 
 
101 
    const currentOption = reactionsOptions.find(
 - 
 
102 
      (reaction) => reaction.icon === currentReaction
 - 
 
103 
    )
 - 
 
104 
 
 - 
 
105 
    if (!currentOption) {
 - 
 
106 
      setSettedReaction(defaultReaction)
 - 
 
107 
      return
 - 
 
108 
    }
 - 
 
109 
 
 93 
  const onHover = debounce(() => setShowReactions(true), 500)
110 
    setSettedReaction(currentOption)
 94 
 
111 
  }, [currentReaction])
 95 
  const onUnhover = debounce(() => setShowReactions(false), 500)
112 
 
 96 
 
113 
  return (
 97 
  return (
114 
    <>
 98 
    <>
115 
      <button
 99 
      <button
116 
        className="btn position-relative"
 100 
        className="btn position-relative"
117 
        onMouseOver={onHover}
 101 
        onMouseOver={onHover}
118 
        onMouseOut={onUnhover}
 102 
        onMouseOut={onUnhover}
119 
        ref={rectionBtn}
 103 
        ref={rectionBtn}
120 
        onClick={() =>
 104 
        onClick={() => {
121 
          settedReaction.type === 'default'
 105 
          reactionIndex
122 
            ? saveReaction(reactionsOptions[0].type)
 106 
            ? deleteReaction()
123 
            : deleteReaction()
 107 
            : saveReaction(reactionsOptions[0].type)
- 
 
 108 
        }}
124 
        }
 109 
      >
125 
      >
 110 
        {reactionsOptions[reactionIndex].icon}
126 
        {settedReaction.icon}
 111 
        {withLabel && reactionsOptions[reactionIndex].label}
127 
        {withLabel && settedReaction.label}
 112 
 
128 
        <div className={`reactions ${showReactions ? 'active' : ''}`}>
 113 
        <div className={`reactions ${showReactions ? 'active' : ''}`}>