Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2154 | Rev 2156 | 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'
2155 stevensc 3 
import { Box, styled } from '@mui/material'
633 stevensc 4 
 
2152 stevensc 5 
import { axios } from '@app/utils'
6 
import { REACTIONS } from '@app/constants/feed'
7 
import { addNotification } from '@app/redux/notification/notification.actions'
633 stevensc 8 
 
2155 stevensc 9 
const ReactionsBox = styled(Box)(({ theme }) => ({
10 
  position: 'absolute',
11 
  bottom: '100%',
12 
  backgroundColor: 'var(--bg-color)',
13 
  boxShadow: theme.shadows[1],
14 
  gap: 1,
15 
  left: 0,
16 
  display: 'flex',
17 
  padding: 1,
18 
  width: 'fit-content',
19 
  borderRadius: theme.shape.borderRadius,
20 
  transform: 'scale(0)',
21 
  transformOrigin: 'left bottom',
22 
  transition: theme.transitions.create('transform', {
23 
    duration: theme.transitions.duration.short,
24 
    easing: theme.transitions.easing.easeInOut,
25 
    delay: theme.transitions.duration.short
26 
  }),
27 
 
28 
  '& > button': {
29 
    transition: theme.transitions.create('transform', {
30 
      duration: theme.transitions.duration.short,
31 
      easing: theme.transitions.easing.easeInOut
32 
    }),
33 
    '&:hover': {
34 
      transform: 'scale(1.1) translateY(-4px)'
35 
    },
36 
    svg: {
37 
      fontSize: '32px'
38 
    }
39 
  }
40 
}))
41 
 
754 stevensc 42 
export default function withReactions(Component) {
755 stevensc 43 
  const HOC = ({
44 
    saveUrl = '',
45 
    deleteUrl = '',
2152 stevensc 46 
    currentReactionType = null,
764 stevensc 47 
    onReaction = () => null
755 stevensc 48 
  }) => {
49 
    const dispatch = useDispatch()
633 stevensc 50 
 
2152 stevensc 51 
    const currentReaction = useMemo(
52 
      () => REACTIONS.find((r) => r.type === currentReactionType),
53 
      [currentReactionType]
54 
    )
55 
    const Icon = currentReaction ? currentReaction.icon : REACTIONS[0].icon
56 
 
755 stevensc 57 
    const saveReaction = useCallback(
58 
      (type) => {
1979 stevensc 59 
        const formData = new FormData()
60 
        formData.append('reaction', type)
61 
 
62 
        axios.post(saveUrl, formData).then((res) => {
753 stevensc 63 
          const { success, data } = res.data
633 stevensc 64 
 
753 stevensc 65 
          if (!success) {
66 
            dispatch(addNotification({ style: 'danger', msg: data }))
67 
          }
633 stevensc 68 
 
764 stevensc 69 
          onReaction({
70 
            reactions: data.reactions,
2152 stevensc 71 
            currentReactionType: type
755 stevensc 72 
          })
753 stevensc 73 
        })
755 stevensc 74 
      },
2152 stevensc 75 
      [saveUrl, dispatch]
755 stevensc 76 
    )
646 stevensc 77 
 
764 stevensc 78 
    const deleteReaction = useCallback(() => {
755 stevensc 79 
      axios.post(deleteUrl).then((res) => {
80 
        const { success, data } = res.data
81 
 
82 
        if (!success) {
83 
          dispatch(addNotification({ style: 'danger', msg: data }))
84 
          return
633 stevensc 85 
        }
86 
 
764 stevensc 87 
        onReaction({
88 
          reactions: data.reactions,
2152 stevensc 89 
          currentReactionType: ''
764 stevensc 90 
        })
755 stevensc 91 
      })
764 stevensc 92 
    }, [])
633 stevensc 93 
 
755 stevensc 94 
    return (
2155 stevensc 95 
      <Component onClick={currentReaction ? deleteReaction : saveReaction}>
2154 stevensc 96 
        {currentReaction ? (
97 
          <Icon style={{ color: currentReaction.color }} />
98 
        ) : (
99 
          <Icon />
100 
        )}
101 
 
102 
        {currentReaction ? currentReaction.label : 'Reaccionar'}
103 
 
2155 stevensc 104 
        <ReactionsBox>
2152 stevensc 105 
          {REACTIONS.map(({ type, label, icon: Icon, color }) => (
755 stevensc 106 
            <button
107 
              key={type}
764 stevensc 108 
              title={label}
2155 stevensc 109 
              onClickCapture={(e) => saveReaction(type)}
755 stevensc 110 
            >
2152 stevensc 111 
              <Icon style={{ color }} />
755 stevensc 112 
            </button>
113 
          ))}
2155 stevensc 114 
        </ReactionsBox>
755 stevensc 115 
      </Component>
116 
    )
117 
  }
118 
 
764 stevensc 119 
  return HOC
633 stevensc 120 
}