Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 1650 | Rev 1979 | 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 
 
1650 stevensc 7 
import FunIcon from '@app/components/UI/icons/Fun'
8 
import LoveItIcon from '@app/components/UI/icons/LoveIt'
9 
import SupportIcon from '@app/components/UI/icons/Support'
10 
import InterestIcon from '@app/components/UI/icons/Interest'
11 
import RecommendIcon from '@app/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) => {
1978 stevensc 52 
        axios.post(saveUrl, { type }).then((res) => {
753 stevensc 53 
          const { success, data } = res.data
633 stevensc 54 
 
753 stevensc 55 
          if (!success) {
56 
            dispatch(addNotification({ style: 'danger', msg: data }))
57 
          }
633 stevensc 58 
 
764 stevensc 59 
          onReaction({
60 
            reactions: data.reactions,
61 
            currentReaction: type
755 stevensc 62 
          })
753 stevensc 63 
        })
755 stevensc 64 
      },
764 stevensc 65 
      [saveUrl, dispatch, reactions]
755 stevensc 66 
    )
646 stevensc 67 
 
764 stevensc 68 
    const deleteReaction = useCallback(() => {
755 stevensc 69 
      axios.post(deleteUrl).then((res) => {
70 
        const { success, data } = res.data
71 
 
72 
        if (!success) {
73 
          dispatch(addNotification({ style: 'danger', msg: data }))
74 
          return
633 stevensc 75 
        }
76 
 
764 stevensc 77 
        onReaction({
78 
          reactions: data.reactions,
79 
          currentReaction: ''
80 
        })
755 stevensc 81 
      })
764 stevensc 82 
    }, [])
633 stevensc 83 
 
755 stevensc 84 
    return (
85 
      <Component
768 stevensc 86 
        icon={currentReaction ? reactions[currentReaction].icon : Recommend}
755 stevensc 87 
        onClick={() =>
764 stevensc 88 
          currentReaction ? deleteReaction() : saveReaction(reactions.r.type)
755 stevensc 89 
        }
764 stevensc 90 
        label={
91 
          currentReaction ? reactions[currentReaction].label : 'Reaccionar'
92 
        }
755 stevensc 93 
      >
767 stevensc 94 
        <div className='reactions'>
764 stevensc 95 
          {Object.values(reactions).map(({ type, label, icon: Icon }) => (
755 stevensc 96 
            <button
97 
              key={type}
764 stevensc 98 
              title={label}
755 stevensc 99 
              onClick={(e) => {
100 
                e.stopPropagation()
768 stevensc 101 
                e.currentTarget.blur()
755 stevensc 102 
                saveReaction(type)
103 
              }}
104 
            >
105 
              <Icon />
106 
            </button>
107 
          ))}
767 stevensc 108 
        </div>
755 stevensc 109 
      </Component>
110 
    )
111 
  }
112 
 
764 stevensc 113 
  return HOC
633 stevensc 114 
}