Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5748 | Rev 5772 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
5737 stevensc 1 
import React, { useEffect, useRef, useState } from 'react'
5577 stevensc 2 
import RecommendIcon from '@mui/icons-material/Recommend'
5747 stevensc 3 
import FavoriteIcon from '@mui/icons-material/FavoriteTwoTone'
5577 stevensc 4 
import VolunteerActivismIcon from '@mui/icons-material/VolunteerActivism'
5746 stevensc 5 
import EmojiEmotionsIcon from '@mui/icons-material/EmojiEmotions'
6 
import TungstenIcon from '@mui/icons-material/Tungsten'
5771 stevensc 7 
import { axios, debounce } from '../../../utils'
5737 stevensc 8 
import useOutsideClick from '../../../hooks/useOutsideClick'
5771 stevensc 9 
import { addNotification } from '../../../redux/notification/notification.actions'
10 
import { useDispatch } from 'react-redux'
5574 stevensc 11 
 
5771 stevensc 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,
18 
}) => {
5747 stevensc 19 
  const [settedReaction, setSettedReaction] = useState(null)
5734 stevensc 20 
  const [showReactions, setShowReactions] = useState(false)
5737 stevensc 21 
  const rectionBtn = useRef(null)
22 
  const outsideClick = useOutsideClick(rectionBtn)
5771 stevensc 23 
  const dispatch = useDispatch()
5667 stevensc 24 
 
25 
  const reactions = [
26 
    {
27 
      type: 'r',
5739 stevensc 28 
      icon: <RecommendIcon style={{ color: '#7405f9' }} />,
5771 stevensc 29 
      url: feed_save_reaction_recommended_url,
5667 stevensc 30 
    },
31 
    {
5746 stevensc 32 
      type: 's',
5747 stevensc 33 
      icon: <VolunteerActivismIcon style={{ color: '#6495ED' }} />,
5771 stevensc 34 
      url: feed_save_reaction_support_url,
5667 stevensc 35 
    },
36 
    {
5746 stevensc 37 
      type: 'l',
38 
      icon: <FavoriteIcon style={{ color: '#DF704D' }} />,
5771 stevensc 39 
      url: feed_save_reaction_love_url,
5667 stevensc 40 
    },
5746 stevensc 41 
    {
42 
      type: 'i',
43 
      icon: (
44 
        <TungstenIcon
45 
          style={{ color: '#F5BB5C', transform: 'rotate(180deg)' }}
46 
        />
47 
      ),
5771 stevensc 48 
      url: feed_save_reaction_interest_url,
5746 stevensc 49 
    },
50 
    {
51 
      type: 'f',
5747 stevensc 52 
      icon: <EmojiEmotionsIcon style={{ color: '#FF7F50' }} />,
5771 stevensc 53 
      url: feed_save_reaction_fun_url,
5746 stevensc 54 
    },
5667 stevensc 55 
  ]
56 
 
5771 stevensc 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)
68 
    })
69 
  }
70 
 
5741 stevensc 71 
  const onHover = debounce(() => setShowReactions(true), 500)
5734 stevensc 72 
 
5743 stevensc 73 
  const onUnhover = debounce((e) => setShowReactions(false), 500)
5741 stevensc 74 
 
5737 stevensc 75 
  useEffect(() => {
76 
    if (outsideClick) {
77 
      setShowReactions(false)
78 
    }
79 
  }, [outsideClick])
80 
 
5577 stevensc 81 
  return (
5738 stevensc 82 
    <button
83 
      type="button"
84 
      className="reaction-btn"
5743 stevensc 85 
      onMouseOver={onHover}
86 
      onMouseOut={onUnhover}
5738 stevensc 87 
      ref={rectionBtn}
88 
    >
5748 stevensc 89 
      {settedReaction ? (
90 
        reactions.find((reaction) => reaction.type === settedReaction).icon
91 
      ) : (
92 
        <RecommendIcon style={{ color: '#626d7a' }} />
5737 stevensc 93 
      )}
5734 stevensc 94 
      <div className={`reactions ${showReactions ? 'active' : ''}`}>
5669 stevensc 95 
        {reactions.map((reaction) => (
96 
          <button
97 
            key={reaction.type}
5771 stevensc 98 
            onClick={() => reactionHandler(reaction.url, reaction.type)}
5669 stevensc 99 
          >
100 
            {reaction.icon}
101 
          </button>
102 
        ))}
5577 stevensc 103 
      </div>
104 
    </button>
105 
  )
106 
}