Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev Autor Línea Nro. Línea
3588 stevensc 1 
import React, { useCallback, useMemo, useState } from 'react';
2 
import { useDispatch } from 'react-redux';
3 
import { styled, Typography } from '@mui/material';
633 stevensc 4 
 
3588 stevensc 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';
633 stevensc 9 
 
2853 stevensc 10 
const ReactionsBox = styled('div')(({ theme }) => ({
2155 stevensc 11 
  position: 'absolute',
12 
  bottom: '100%',
3588 stevensc 13 
  backgroundColor: colors.background.primary,
2853 stevensc 14 
  border: `1px solid ${colors.border.primary}`,
15 
  gap: theme.spacing(0.5),
2155 stevensc 16 
  left: 0,
17 
  display: 'flex',
2853 stevensc 18 
  padding: theme.spacing(0.5),
2155 stevensc 19 
  width: 'fit-content',
20 
  borderRadius: theme.shape.borderRadius,
21 
  transform: 'scale(0)',
2161 stevensc 22 
  transformOrigin: 'center',
2155 stevensc 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 
  }
3588 stevensc 40 
}));
2155 stevensc 41 
 
2864 stevensc 42 
export function withReactions(Component) {
2161 stevensc 43 
  const ReactionsButton = ({
755 stevensc 44 
    saveUrl = '',
45 
    deleteUrl = '',
2152 stevensc 46 
    currentReactionType = null,
764 stevensc 47 
    onReaction = () => null
755 stevensc 48 
  }) => {
3588 stevensc 49 
    const [isHover, setIsHover] = useState(false);
50 
    const dispatch = useDispatch();
633 stevensc 51 
 
2161 stevensc 52 
    const currentReaction = useMemo(
53 
      () => REACTIONS.find((r) => r.type === currentReactionType),
54 
      [currentReactionType]
3588 stevensc 55 
    );
56 
    const Icon = currentReaction ? currentReaction.icon : REACTIONS[0].icon;
2152 stevensc 57 
 
3588 stevensc 58 
    const handleHover = () => setIsHover(!isHover);
2246 stevensc 59 
 
755 stevensc 60 
    const saveReaction = useCallback(
2158 stevensc 61 
      (type = 'r') => {
3588 stevensc 62 
        const formData = new FormData();
63 
        formData.append('reaction', type);
1979 stevensc 64 
 
65 
        axios.post(saveUrl, formData).then((res) => {
3588 stevensc 66 
          const { success, data } = res.data;
633 stevensc 67 
 
753 stevensc 68 
          if (!success) {
3588 stevensc 69 
            dispatch(addNotification({ style: 'danger', msg: data }));
753 stevensc 70 
          }
633 stevensc 71 
 
3588 stevensc 72 
          onReaction(data, type);
73 
        });
755 stevensc 74 
      },
2152 stevensc 75 
      [saveUrl, dispatch]
3588 stevensc 76 
    );
646 stevensc 77 
 
764 stevensc 78 
    const deleteReaction = useCallback(() => {
755 stevensc 79 
      axios.post(deleteUrl).then((res) => {
3588 stevensc 80 
        const { success, data } = res.data;
755 stevensc 81 
 
82 
        if (!success) {
3588 stevensc 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: ''
3588 stevensc 90 
        });
91 
      });
92 
    }, []);
633 stevensc 93 
 
755 stevensc 94 
    return (
2247 stevensc 95 
      <Component onClick={currentReaction ? deleteReaction : handleHover}>
3588 stevensc 96 
        {currentReaction ? <Icon style={{ color: currentReaction.color }} /> : <Icon />}
2154 stevensc 97 
 
3588 stevensc 98 
        <Typography sx={{ display: { xs: 'none', md: 'inline-flex' } }} variant='overline'>
3274 stevensc 99 
          {currentReaction ? currentReaction.label : 'Reaccionar'}
100 
        </Typography>
2154 stevensc 101 
 
2156 stevensc 102 
        <ReactionsBox
2241 stevensc 103 
          sx={{
2248 stevensc 104 
            transform: isHover ? 'scale(1)' : 'scale(0)',
2241 stevensc 105 
            transformOrigin: 'center'
106 
          }}
2156 stevensc 107 
        >
2152 stevensc 108 
          {REACTIONS.map(({ type, label, icon: Icon, color }) => (
755 stevensc 109 
            <button
110 
              key={type}
764 stevensc 111 
              title={label}
2157 stevensc 112 
              onClickCapture={(e) => {
3588 stevensc 113 
                e.stopPropagation();
114 
                saveReaction(type);
2157 stevensc 115 
              }}
755 stevensc 116 
            >
2152 stevensc 117 
              <Icon style={{ color }} />
755 stevensc 118 
            </button>
119 
          ))}
2155 stevensc 120 
        </ReactionsBox>
755 stevensc 121 
      </Component>
3588 stevensc 122 
    );
123 
  };
755 stevensc 124 
 
3588 stevensc 125 
  return ReactionsButton;
633 stevensc 126 
}