Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev Autor Línea Nro. Línea
2152 stevensc 1 
import React, { useCallback, useMemo } from 'react'
751 stevensc 2 
import { useDispatch } from 'react-redux'
633 stevensc 3 
 
2152 stevensc 4 
import { axios } from '@app/utils'
5 
import { REACTIONS } from '@app/constants/feed'
6 
import { addNotification } from '@app/redux/notification/notification.actions'
633 stevensc 7 
 
754 stevensc 8 
export default function withReactions(Component) {
755 stevensc 9 
  const HOC = ({
10 
    saveUrl = '',
11 
    deleteUrl = '',
2152 stevensc 12 
    currentReactionType = null,
764 stevensc 13 
    onReaction = () => null
755 stevensc 14 
  }) => {
15 
    const dispatch = useDispatch()
633 stevensc 16 
 
2152 stevensc 17 
    const currentReaction = useMemo(
18 
      () => REACTIONS.find((r) => r.type === currentReactionType),
19 
      [currentReactionType]
20 
    )
21 
    const Icon = currentReaction ? currentReaction.icon : REACTIONS[0].icon
22 
 
755 stevensc 23 
    const saveReaction = useCallback(
24 
      (type) => {
1979 stevensc 25 
        const formData = new FormData()
26 
        formData.append('reaction', type)
27 
 
28 
        axios.post(saveUrl, formData).then((res) => {
753 stevensc 29 
          const { success, data } = res.data
633 stevensc 30 
 
753 stevensc 31 
          if (!success) {
32 
            dispatch(addNotification({ style: 'danger', msg: data }))
33 
          }
633 stevensc 34 
 
764 stevensc 35 
          onReaction({
36 
            reactions: data.reactions,
2152 stevensc 37 
            currentReactionType: type
755 stevensc 38 
          })
753 stevensc 39 
        })
755 stevensc 40 
      },
2152 stevensc 41 
      [saveUrl, dispatch]
755 stevensc 42 
    )
646 stevensc 43 
 
764 stevensc 44 
    const deleteReaction = useCallback(() => {
755 stevensc 45 
      axios.post(deleteUrl).then((res) => {
46 
        const { success, data } = res.data
47 
 
48 
        if (!success) {
49 
          dispatch(addNotification({ style: 'danger', msg: data }))
50 
          return
633 stevensc 51 
        }
52 
 
764 stevensc 53 
        onReaction({
54 
          reactions: data.reactions,
2152 stevensc 55 
          currentReactionType: ''
764 stevensc 56 
        })
755 stevensc 57 
      })
764 stevensc 58 
    }, [])
633 stevensc 59 
 
755 stevensc 60 
    return (
61 
      <Component
62 
        onClick={() =>
2152 stevensc 63 
          currentReaction ? deleteReaction() : saveReaction(REACTIONS[0].type)
755 stevensc 64 
        }
65 
      >
2154 stevensc 66 
        {currentReaction ? (
67 
          <Icon style={{ color: currentReaction.color }} />
68 
        ) : (
69 
          <Icon />
70 
        )}
71 
 
72 
        {currentReaction ? currentReaction.label : 'Reaccionar'}
73 
 
767 stevensc 74 
        <div className='reactions'>
2152 stevensc 75 
          {REACTIONS.map(({ type, label, icon: Icon, color }) => (
755 stevensc 76 
            <button
77 
              key={type}
764 stevensc 78 
              title={label}
755 stevensc 79 
              onClick={(e) => {
80 
                e.stopPropagation()
768 stevensc 81 
                e.currentTarget.blur()
755 stevensc 82 
                saveReaction(type)
83 
              }}
84 
            >
2152 stevensc 85 
              <Icon style={{ color }} />
755 stevensc 86 
            </button>
87 
          ))}
767 stevensc 88 
        </div>
755 stevensc 89 
      </Component>
90 
    )
91 
  }
92 
 
764 stevensc 93 
  return HOC
633 stevensc 94 
}