Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev Autor Línea Nro. Línea
3595 stevensc 1 
import React, { useCallback, useMemo, useState } from 'react'
2 
import { useDispatch } from 'react-redux'
3 
import { styled, Typography } from '@mui/material'
4 
 
5 
import { axios } from '@app/utils'
6 
import { REACTIONS } from '@app/constants/feed'
7 
import { addNotification } from '@app/redux/notification/notification.actions'
8 
import colors from '@styles/colors'
9 
 
10 
const ReactionsBox = styled('div')(({ theme }) => ({
11 
  position: 'absolute',
12 
  bottom: '100%',
13 
  backgroundColor: colors.main,
14 
  border: `1px solid ${colors.border.primary}`,
15 
  gap: theme.spacing(0.5),
16 
  left: 0,
17 
  display: 'flex',
18 
  padding: theme.spacing(0.5),
19 
  width: 'fit-content',
20 
  borderRadius: theme.shape.borderRadius,
21 
  transform: 'scale(0)',
22 
  transformOrigin: 'center',
23 
  transition: theme.transitions.create('transform', {
24 
    duration: theme.transitions.duration.short,
25 
    easing: theme.transitions.easing.easeInOut,
26 
    delay: theme.transitions.duration.short
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 
 
42 
export function withReactions(Component) {
43 
  const ReactionsButton = ({
44 
    saveUrl = '',
45 
    deleteUrl = '',
46 
    currentReactionType = null,
47 
    onReaction = () => null
48 
  }) => {
49 
    const [isHover, setIsHover] = useState(false)
50 
    const dispatch = useDispatch()
51 
 
52 
    const currentReaction = useMemo(
53 
      () => REACTIONS.find((r) => r.type === currentReactionType),
54 
      [currentReactionType]
55 
    )
56 
    const Icon = currentReaction ? currentReaction.icon : REACTIONS[0].icon
57 
 
58 
    const handleHover = () => setIsHover(!isHover)
59 
 
60 
    const saveReaction = useCallback(
61 
      (type = 'r') => {
62 
        const formData = new FormData()
63 
        formData.append('reaction', type)
64 
 
65 
        axios.post(saveUrl, formData).then((res) => {
66 
          const { success, data } = res.data
67 
 
68 
          if (!success) {
69 
            dispatch(addNotification({ style: 'danger', msg: data }))
70 
          }
71 
 
72 
          onReaction(data, type)
73 
        })
74 
      },
75 
      [saveUrl, dispatch]
76 
    )
77 
 
78 
    const deleteReaction = useCallback(() => {
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
85 
        }
86 
 
87 
        onReaction({
88 
          reactions: data.reactions,
89 
          currentReactionType: ''
90 
        })
91 
      })
92 
    }, [])
93 
 
94 
    return (
95 
      <Component onClick={currentReaction ? deleteReaction : handleHover}>
96 
        {currentReaction ? (
97 
          <Icon style={{ color: currentReaction.color }} />
98 
        ) : (
99 
          <Icon />
100 
        )}
101 
 
102 
        <Typography
103 
          sx={{ display: { xs: 'none', md: 'inline-flex' } }}
104 
          variant='overline'
105 
        >
106 
          {currentReaction ? currentReaction.label : 'Reaccionar'}
107 
        </Typography>
108 
 
109 
        <ReactionsBox
110 
          sx={{
111 
            transform: isHover ? 'scale(1)' : 'scale(0)',
112 
            transformOrigin: 'center'
113 
          }}
114 
        >
115 
          {REACTIONS.map(({ type, label, icon: Icon, color }) => (
116 
            <button
117 
              key={type}
118 
              title={label}
119 
              onClickCapture={(e) => {
120 
                e.stopPropagation()
121 
                saveReaction(type)
122 
              }}
123 
            >
124 
              <Icon style={{ color }} />
125 
            </button>
126 
          ))}
127 
        </ReactionsBox>
128 
      </Component>
129 
    )
130 
  }
131 
 
132 
  return ReactionsButton
133 
}