Proyectos de Subversion LeadersLinked - SPA

Rev

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

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