Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 7078 Rev 7079
Línea 1... Línea 1...
1 
import React, { useEffect, useRef, useState } from 'react'
 1 
import React, { useRef, useState, useEffect } 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 -... Línea 14...
- 
 
 14 
 
- 
 
 15 
const initialReaction = {
- 
 
 16 
  label: 'Reaccionar',
- 
 
 17 
  icon: <ReactionIcon />,
- 
 
 18 
  type: 'default',
- 
 
 19 
}
14 
 
 20 
 
15 
const ReactionsButton = ({
 21 
const ReactionsButton = ({
16 
  currentReaction,
 22 
  currentReaction,
17 
  onChange,
 23 
  onChange,
18 
  withLabel,
 24 
  withLabel,
19 
  reactionTypesUrl,
 25 
  reactionTypesUrl,
20 
  deleteUrl,
 26 
  deleteUrl,
21 
}) => {
 27 
}) => {
22 
  const [reactionIndex, setReactionIndex] = useState(0)
 28 
  const [reaction, setReaction] = useState(initialReaction)
23 
  const [showReactions, setShowReactions] = useState(false)
 29 
  const [isHover, setIsHover] = useState(false)
24 
  const rectionBtn = useRef(null)
 30 
  const rectionBtn = useRef(null)
25 
  const dispatch = useDispatch()
 31 
  const dispatch = useDispatch()
Línea 26... Línea 32...
26 
  useOutsideClick(rectionBtn, () => setShowReactions(false))
 32 
  useOutsideClick(rectionBtn, () => setIsHover(false))
27 
 
 - 
 
28 
  const reactionsOptions = [
 - 
 
29 
    {
 - 
 
30 
      label: 'Reaccionar',
 - 
 
31 
      icon: <ReactionIcon />,
 - 
 
32 
      type: 'default',
 33 
 
33 
    },
 34 
  const reactions = [
34 
    {
 35 
    {
35 
      type: 'r',
 36 
      type: 'r',
36 
      icon: <RecommendIcon />,
 37 
      icon: <RecommendIcon />,
Línea 57... Línea 58...
57 
      label: 'Me divierte',
 58 
      label: 'Me divierte',
58 
    },
 59 
    },
59 
  ]
 60 
  ]
Línea 60... Línea 61...
60 
 
 61 
 
61 
  const saveReaction = (type) => {
 62 
  const saveReaction = (type) => {
62 
    axios.post(reactionTypesUrl[type]).then((response) => {
 63 
    axios.post(reactionTypesUrl[type]).then((res) => {
Línea 63... Línea 64...
63 
      const { success, data } = response.data
 64 
      const { success, data } = res.data
64 
 
 65 
 
65 
      if (!success) {
 66 
      if (!success) {
66 
        dispatch(addNotification({ style: 'danger', msg: data }))
 67 
        dispatch(addNotification({ style: 'danger', msg: data }))
Línea -... Línea 68...
- 
 
 68 
        return
- 
 
 69 
      }
- 
 
 70 
 
67 
        return
 71 
      const newReaction = reactions.find((reaction) => reaction.type === type)
68 
      }
 72 
      setReaction(newReaction)
69 
 
 73 
 
Línea 70... Línea 74...
70 
      onChange(data.reactions)
 74 
      onChange(data.reactions)
Línea 79... Línea 83...
79 
        dispatch(addNotification({ style: 'danger', msg: data }))
 83 
        dispatch(addNotification({ style: 'danger', msg: data }))
80 
        return
 84 
        return
81 
      }
 85 
      }
Línea 82... Línea 86...
82 
 
 86 
 
83 
      onChange(data.reactions)
 87 
      onChange(data.reactions)
84 
      setReactionIndex(0)
 88 
      setReaction(initialReaction)
85 
    })
 89 
    })
Línea 86... Línea 90...
86 
  }
 90 
  }
Línea 87... Línea 91...
87 
 
 91 
 
Línea 88... Línea 92...
88 
  const onHover = debounce(() => setShowReactions(true), 500)
 92 
  const onHover = debounce(() => setIsHover(true), 500)
89 
 
 93 
 
- 
 
 94 
  const onUnhover = debounce(() => setIsHover(false), 500)
- 
 
 95 
 
90 
  const onUnhover = debounce(() => setShowReactions(false), 500)
 96 
  useEffect(() => {
- 
 
 97 
    const currentOption = reactions.find(({ type }) => type === currentReaction)
91 
 
 98 
 
- 
 
 99 
    if (!currentOption) {
92 
  useEffect(() => {
 100 
      setReaction(initialReaction)
93 
    const currentIndex = reactionsOptions.findIndex(
 101 
      return
Línea 94... Línea 102...
94 
      ({ type }) => type === currentReaction
 102 
    }
- 
 
 103 
 
95 
    )
 104 
    setReaction(currentOption)
96 
    setReactionIndex(currentIndex)
 105 
  }, [currentReaction])
97 
  }, [currentReaction])
 106 
 
98 
 
 107 
  return (
99 
  return (
 108 
    <>
100 
    <button
 109 
      <button
101 
      className="btn position-relative"
 110 
        className="btn position-relative"
102 
      onMouseOver={onHover}
 111 
        onMouseOver={onHover}
103 
      onMouseOut={onUnhover}
 112 
        onMouseOut={onUnhover}
104 
      ref={rectionBtn}
 113 
        ref={rectionBtn}
105 
      onClick={() => {
 114 
        onClick={() =>
106 
        reactionIndex
 115 
          reaction.type !== 'default'
107 
          ? deleteReaction()
 116 
            ? deleteReaction()
108 
          : saveReaction(reactionsOptions[0].type)
 - 
 
109 
      }}
 117 
            : saveReaction(reactions[0].type)
110 
    >
 118 
        }
111 
      {reactionsOptions[reactionIndex].icon}
 119 
      >
112 
      {withLabel && reactionsOptions[reactionIndex].label}
 120 
        {reaction.icon}
113 
 
 121 
        {withLabel && reaction.label}
114 
      <div className={`reactions ${showReactions ? 'active' : ''}`}>
 122 
        <div className={`reactions ${isHover ? 'active' : ''}`}>
115 
        {reactionsOptions.map(({ icon, type, label }, index) => (
 123 
          {reactions.map(({ icon, type, label }) => (
116 
          <button
 - 
 
117 
            key={type}
 124 
            <button
118 
            onClick={(e) => {
 125 
              key={type}
119 
              e.stopPropagation()
 126 
              onClick={(e) => {
120 
              saveReaction(type)
 127 
                e.stopPropagation()
121 
              setReactionIndex(index)
 128 
                saveReaction(type)
122 
            }}
 129 
              }}
123 
            title={label}
 130 
              title={label}
124 
          >
 131 
            >
- 
 
 132 
              {icon}
125 
            {icon}
 133 
            </button>
126 
          </button>
 134 
          ))}
Línea 127... Línea 135...
127 
        ))}
 135 
        </div>