Proyectos de Subversion LeadersLinked - SPA

Rev

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