Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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