Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev Autor Línea Nro. Línea
764 stevensc 1 
import React, { useCallback } from 'react'
751 stevensc 2 
import { useDispatch } from 'react-redux'
753 stevensc 3 
import { axios } from '../utils'
751 stevensc 4 
import { addNotification } from 'store/notification/notification.actions'
768 stevensc 5 
import { Recommend } from '@mui/icons-material'
633 stevensc 6 
 
751 stevensc 7 
import FunIcon from '../components/UI/icons/Fun'
8 
import LoveItIcon from '../components/UI/icons/LoveIt'
9 
import SupportIcon from '../components/UI/icons/Support'
10 
import InterestIcon from '../components/UI/icons/Interest'
11 
import RecommendIcon from '../components/UI/icons/Recommned'
633 stevensc 12 
 
764 stevensc 13 
const reactions = {
14 
  r: {
753 stevensc 15 
    icon: RecommendIcon,
764 stevensc 16 
    label: 'Me gusta',
17 
    type: 'r'
753 stevensc 18 
  },
764 stevensc 19 
  s: {
753 stevensc 20 
    icon: SupportIcon,
764 stevensc 21 
    label: 'Dar apoyo',
22 
    type: 's'
753 stevensc 23 
  },
764 stevensc 24 
  l: {
753 stevensc 25 
    icon: LoveItIcon,
764 stevensc 26 
    label: 'Me encanta',
27 
    type: 'l'
753 stevensc 28 
  },
764 stevensc 29 
  i: {
753 stevensc 30 
    icon: InterestIcon,
764 stevensc 31 
    label: 'Me interesa',
32 
    type: 'i'
753 stevensc 33 
  },
764 stevensc 34 
  f: {
753 stevensc 35 
    icon: FunIcon,
764 stevensc 36 
    label: 'Me divierte',
37 
    type: 'f'
753 stevensc 38 
  }
764 stevensc 39 
}
633 stevensc 40 
 
754 stevensc 41 
export default function withReactions(Component) {
755 stevensc 42 
  const HOC = ({
43 
    saveUrl = '',
44 
    deleteUrl = '',
45 
    currentReaction = null,
764 stevensc 46 
    onReaction = () => null
755 stevensc 47 
  }) => {
48 
    const dispatch = useDispatch()
633 stevensc 49 
 
755 stevensc 50 
    const saveReaction = useCallback(
51 
      (type) => {
52 
        const formData = new FormData()
53 
        formData.append('reaction', type)
633 stevensc 54 
 
755 stevensc 55 
        axios.post(saveUrl, formData).then((res) => {
753 stevensc 56 
          const { success, data } = res.data
633 stevensc 57 
 
753 stevensc 58 
          if (!success) {
59 
            dispatch(addNotification({ style: 'danger', msg: data }))
60 
          }
633 stevensc 61 
 
764 stevensc 62 
          onReaction({
63 
            reactions: data.reactions,
64 
            currentReaction: type
755 stevensc 65 
          })
753 stevensc 66 
        })
755 stevensc 67 
      },
764 stevensc 68 
      [saveUrl, dispatch, reactions]
755 stevensc 69 
    )
646 stevensc 70 
 
764 stevensc 71 
    const deleteReaction = useCallback(() => {
755 stevensc 72 
      axios.post(deleteUrl).then((res) => {
73 
        const { success, data } = res.data
74 
 
75 
        if (!success) {
76 
          dispatch(addNotification({ style: 'danger', msg: data }))
77 
          return
633 stevensc 78 
        }
79 
 
764 stevensc 80 
        onReaction({
81 
          reactions: data.reactions,
82 
          currentReaction: ''
83 
        })
755 stevensc 84 
      })
764 stevensc 85 
    }, [])
633 stevensc 86 
 
755 stevensc 87 
    return (
88 
      <Component
768 stevensc 89 
        icon={currentReaction ? reactions[currentReaction].icon : Recommend}
755 stevensc 90 
        onClick={() =>
764 stevensc 91 
          currentReaction ? deleteReaction() : saveReaction(reactions.r.type)
755 stevensc 92 
        }
764 stevensc 93 
        label={
94 
          currentReaction ? reactions[currentReaction].label : 'Reaccionar'
95 
        }
755 stevensc 96 
      >
767 stevensc 97 
        <div className='reactions'>
764 stevensc 98 
          {Object.values(reactions).map(({ type, label, icon: Icon }) => (
755 stevensc 99 
            <button
100 
              key={type}
764 stevensc 101 
              title={label}
755 stevensc 102 
              onClick={(e) => {
103 
                e.stopPropagation()
768 stevensc 104 
                e.currentTarget.blur()
755 stevensc 105 
                saveReaction(type)
106 
              }}
107 
            >
108 
              <Icon />
109 
            </button>
110 
          ))}
767 stevensc 111 
        </div>
755 stevensc 112 
      </Component>
113 
    )
114 
  }
115 
 
764 stevensc 116 
  return HOC
633 stevensc 117 
}