Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 5748 Rev 5771
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 { debounce } from '../../../utils'
 7 
import { axios, 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 9... Línea 11...
9 
 
 11 
 
- 
 
 12 
export const ReactionButton = ({
- 
 
 13 
  feed_save_reaction_recommended_url,
- 
 
 14 
  feed_save_reaction_support_url,
- 
 
 15 
  feed_save_reaction_love_url,
- 
 
 16 
  feed_save_reaction_interest_url,
- 
 
 17 
  feed_save_reaction_fun_url,
10 
export const ReactionButton = () => {
 18 
}) => {
11 
  const [settedReaction, setSettedReaction] = useState(null)
 19 
  const [settedReaction, setSettedReaction] = useState(null)
12 
  const [showReactions, setShowReactions] = useState(false)
 20 
  const [showReactions, setShowReactions] = useState(false)
13 
  const rectionBtn = useRef(null)
 21 
  const rectionBtn = useRef(null)
- 
 
 22 
  const outsideClick = useOutsideClick(rectionBtn)
Línea 14... Línea 23...
14 
  const outsideClick = useOutsideClick(rectionBtn)
 23 
  const dispatch = useDispatch()
15 
 
 24 
 
16 
  const reactions = [
 25 
  const reactions = [
17 
    {
 26 
    {
- 
 
 27 
      type: 'r',
18 
      type: 'r',
 28 
      icon: <RecommendIcon style={{ color: '#7405f9' }} />,
19 
      icon: <RecommendIcon style={{ color: '#7405f9' }} />,
 29 
      url: feed_save_reaction_recommended_url,
20 
    },
 30 
    },
21 
    {
 31 
    {
- 
 
 32 
      type: 's',
22 
      type: 's',
 33 
      icon: <VolunteerActivismIcon style={{ color: '#6495ED' }} />,
23 
      icon: <VolunteerActivismIcon style={{ color: '#6495ED' }} />,
 34 
      url: feed_save_reaction_support_url,
24 
    },
 35 
    },
25 
    {
 36 
    {
- 
 
 37 
      type: 'l',
26 
      type: 'l',
 38 
      icon: <FavoriteIcon style={{ color: '#DF704D' }} />,
27 
      icon: <FavoriteIcon style={{ color: '#DF704D' }} />,
 39 
      url: feed_save_reaction_love_url,
28 
    },
 40 
    },
29 
    {
 41 
    {
30 
      type: 'i',
 42 
      type: 'i',
31 
      icon: (
 43 
      icon: (
32 
        <TungstenIcon
 44 
        <TungstenIcon
33 
          style={{ color: '#F5BB5C', transform: 'rotate(180deg)' }}
 45 
          style={{ color: '#F5BB5C', transform: 'rotate(180deg)' }}
- 
 
 46 
        />
34 
        />
 47 
      ),
35 
      ),
 48 
      url: feed_save_reaction_interest_url,
36 
    },
 49 
    },
37 
    {
 50 
    {
- 
 
 51 
      type: 'f',
38 
      type: 'f',
 52 
      icon: <EmojiEmotionsIcon style={{ color: '#FF7F50' }} />,
39 
      icon: <EmojiEmotionsIcon style={{ color: '#FF7F50' }} />,
 53 
      url: feed_save_reaction_fun_url,
Línea -... Línea 54...
- 
 
 54 
    },
- 
 
 55 
  ]
- 
 
 56 
 
- 
 
 57 
  const reactionHandler = (url, type) => {
- 
 
 58 
    axios.post(url).then((res) => {
- 
 
 59 
      const { success, data } = res.data
- 
 
 60 
 
- 
 
 61 
      if (!success) {
- 
 
 62 
        dispatch(addNotification({ style: 'danger', msg: data }))
- 
 
 63 
        return
- 
 
 64 
      }
- 
 
 65 
 
- 
 
 66 
      setSettedReaction(type)
- 
 
 67 
      setShowReactions(false)
40 
    },
 68 
    })
Línea 41... Línea 69...
41 
  ]
 69 
  }
Línea 42... Línea -...
42 
 
 - 
 
43 
  const onHover = debounce(() => setShowReactions(true), 500)
 - 
 
44 
 
 - 
 
45 
  const onUnhover = debounce((e) => setShowReactions(false), 500)
 - 
 
46 
 
 - 
 
47 
  const handleClick = (reaction) => {
 70 
 
48 
    setSettedReaction(reaction)
 71 
  const onHover = debounce(() => setShowReactions(true), 500)
49 
    setShowReactions(false)
 72 
 
50 
  }
 73 
  const onUnhover = debounce((e) => setShowReactions(false), 500)
51 
 
 74 
 
Línea 70... Línea 93...
70 
      )}
 93 
      )}
71 
      <div className={`reactions ${showReactions ? 'active' : ''}`}>
 94 
      <div className={`reactions ${showReactions ? 'active' : ''}`}>
72 
        {reactions.map((reaction) => (
 95 
        {reactions.map((reaction) => (
73 
          <button
 96 
          <button
74 
            key={reaction.type}
 97 
            key={reaction.type}
75 
            onClick={() => handleClick(reaction.type)}
 98 
            onClick={() => reactionHandler(reaction.url, reaction.type)}
76 
          >
 99 
          >
77 
            {reaction.icon}
 100 
            {reaction.icon}
78 
          </button>
 101 
          </button>
79 
        ))}
 102 
        ))}
80 
      </div>
 103 
      </div>