Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5771 | Rev 5778 | 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 = ({
5772 stevensc 13 
  saveReactionRecommendedUrl,
14 
  saveReactionSupportUrl,
15 
  saveReactionLoveUrl,
16 
  saveReactionInterestUrl,
17 
  saveReactionFunUrl,
18 
  myReaction,
5771 stevensc 19 
}) => {
5772 stevensc 20 
  const [settedReaction, setSettedReaction] = useState(myReaction)
5734 stevensc 21 
  const [showReactions, setShowReactions] = useState(false)
5737 stevensc 22 
  const rectionBtn = useRef(null)
23 
  const outsideClick = useOutsideClick(rectionBtn)
5771 stevensc 24 
  const dispatch = useDispatch()
5667 stevensc 25 
 
26 
  const reactions = [
27 
    {
28 
      type: 'r',
5739 stevensc 29 
      icon: <RecommendIcon style={{ color: '#7405f9' }} />,
5772 stevensc 30 
      url: saveReactionRecommendedUrl,
5667 stevensc 31 
    },
32 
    {
5746 stevensc 33 
      type: 's',
5747 stevensc 34 
      icon: <VolunteerActivismIcon style={{ color: '#6495ED' }} />,
5772 stevensc 35 
      url: saveReactionSupportUrl,
5667 stevensc 36 
    },
37 
    {
5746 stevensc 38 
      type: 'l',
39 
      icon: <FavoriteIcon style={{ color: '#DF704D' }} />,
5772 stevensc 40 
      url: saveReactionLoveUrl,
5667 stevensc 41 
    },
5746 stevensc 42 
    {
43 
      type: 'i',
44 
      icon: (
45 
        <TungstenIcon
46 
          style={{ color: '#F5BB5C', transform: 'rotate(180deg)' }}
47 
        />
48 
      ),
5772 stevensc 49 
      url: saveReactionInterestUrl,
5746 stevensc 50 
    },
51 
    {
52 
      type: 'f',
5747 stevensc 53 
      icon: <EmojiEmotionsIcon style={{ color: '#FF7F50' }} />,
5772 stevensc 54 
      url: saveReactionFunUrl,
5746 stevensc 55 
    },
5667 stevensc 56 
  ]
57 
 
5771 stevensc 58 
  const reactionHandler = (url, type) => {
59 
    axios.post(url).then((res) => {
60 
      const { success, data } = res.data
61 
 
62 
      if (!success) {
63 
        dispatch(addNotification({ style: 'danger', msg: data }))
64 
        return
65 
      }
66 
 
67 
      setSettedReaction(type)
68 
      setShowReactions(false)
69 
    })
70 
  }
71 
 
5741 stevensc 72 
  const onHover = debounce(() => setShowReactions(true), 500)
5734 stevensc 73 
 
5743 stevensc 74 
  const onUnhover = debounce((e) => setShowReactions(false), 500)
5741 stevensc 75 
 
5737 stevensc 76 
  useEffect(() => {
77 
    if (outsideClick) {
78 
      setShowReactions(false)
79 
    }
80 
  }, [outsideClick])
81 
 
5577 stevensc 82 
  return (
5738 stevensc 83 
    <button
84 
      type="button"
85 
      className="reaction-btn"
5743 stevensc 86 
      onMouseOver={onHover}
87 
      onMouseOut={onUnhover}
5738 stevensc 88 
      ref={rectionBtn}
89 
    >
5748 stevensc 90 
      {settedReaction ? (
91 
        reactions.find((reaction) => reaction.type === settedReaction).icon
92 
      ) : (
93 
        <RecommendIcon style={{ color: '#626d7a' }} />
5737 stevensc 94 
      )}
5734 stevensc 95 
      <div className={`reactions ${showReactions ? 'active' : ''}`}>
5669 stevensc 96 
        {reactions.map((reaction) => (
97 
          <button
98 
            key={reaction.type}
5771 stevensc 99 
            onClick={() => reactionHandler(reaction.url, reaction.type)}
5669 stevensc 100 
          >
101 
            {reaction.icon}
102 
          </button>
103 
        ))}
5577 stevensc 104 
      </div>
105 
    </button>
106 
  )
107 
}