Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3276 | Rev 3593 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3276 Rev 3588
Línea 1... Línea 1...
1 
import React, { useCallback, useMemo, useState } from 'react'
 1 
import React, { useCallback, useMemo, useState } from 'react';
2 
import { useDispatch } from 'react-redux'
 2 
import { useDispatch } from 'react-redux';
3 
import { styled, Typography } from '@mui/material'
 3 
import { styled, Typography } from '@mui/material';
4 
 
 4 
 
5 
import { axios } from '@app/utils'
 5 
import { axios } from '@app/utils';
6 
import { REACTIONS } from '@app/constants/feed'
 6 
import { REACTIONS } from '@app/constants/feed';
7 
import { addNotification } from '@app/redux/notification/notification.actions'
 7 
import { addNotification } from '@app/redux/notification/notification.actions';
8 
import colors from '@styles/colors'
 8 
import colors from '@styles/colors';
Línea 9... Línea 9...
9 
 
 9 
 
10 
const ReactionsBox = styled('div')(({ theme }) => ({
 10 
const ReactionsBox = styled('div')(({ theme }) => ({
11 
  position: 'absolute',
 11 
  position: 'absolute',
12 
  bottom: '100%',
 12 
  bottom: '100%',
13 
  backgroundColor: colors.main,
 13 
  backgroundColor: colors.background.primary,
14 
  border: `1px solid ${colors.border.primary}`,
 14 
  border: `1px solid ${colors.border.primary}`,
15 
  gap: theme.spacing(0.5),
 15 
  gap: theme.spacing(0.5),
16 
  left: 0,
 16 
  left: 0,
17 
  display: 'flex',
 17 
  display: 'flex',
Línea 35... Línea 35...
35 
    },
 35 
    },
36 
    svg: {
 36 
    svg: {
37 
      fontSize: '32px'
 37 
      fontSize: '32px'
38 
    }
 38 
    }
39 
  }
 39 
  }
40 
}))
 40 
}));
Línea 41... Línea 41...
41 
 
 41 
 
42 
export function withReactions(Component) {
 42 
export function withReactions(Component) {
43 
  const ReactionsButton = ({
 43 
  const ReactionsButton = ({
44 
    saveUrl = '',
 44 
    saveUrl = '',
45 
    deleteUrl = '',
 45 
    deleteUrl = '',
46 
    currentReactionType = null,
 46 
    currentReactionType = null,
47 
    onReaction = () => null
 47 
    onReaction = () => null
48 
  }) => {
 48 
  }) => {
49 
    const [isHover, setIsHover] = useState(false)
 49 
    const [isHover, setIsHover] = useState(false);
Línea 50... Línea 50...
50 
    const dispatch = useDispatch()
 50 
    const dispatch = useDispatch();
51 
 
 51 
 
52 
    const currentReaction = useMemo(
 52 
    const currentReaction = useMemo(
53 
      () => REACTIONS.find((r) => r.type === currentReactionType),
 53 
      () => REACTIONS.find((r) => r.type === currentReactionType),
54 
      [currentReactionType]
 54 
      [currentReactionType]
Línea 55... Línea 55...
55 
    )
 55 
    );
Línea 56... Línea 56...
56 
    const Icon = currentReaction ? currentReaction.icon : REACTIONS[0].icon
 56 
    const Icon = currentReaction ? currentReaction.icon : REACTIONS[0].icon;
57 
 
 57 
 
58 
    const handleHover = () => setIsHover(!isHover)
 58 
    const handleHover = () => setIsHover(!isHover);
59 
 
 59 
 
Línea 60... Línea 60...
60 
    const saveReaction = useCallback(
 60 
    const saveReaction = useCallback(
61 
      (type = 'r') => {
 61 
      (type = 'r') => {
Línea 62... Línea 62...
62 
        const formData = new FormData()
 62 
        const formData = new FormData();
63 
        formData.append('reaction', type)
 63 
        formData.append('reaction', type);
64 
 
 64 
 
Línea 65... Línea 65...
65 
        axios.post(saveUrl, formData).then((res) => {
 65 
        axios.post(saveUrl, formData).then((res) => {
66 
          const { success, data } = res.data
 66 
          const { success, data } = res.data;
67 
 
 67 
 
68 
          if (!success) {
 68 
          if (!success) {
69 
            dispatch(addNotification({ style: 'danger', msg: data }))
 69 
            dispatch(addNotification({ style: 'danger', msg: data }));
Línea 70... Línea 70...
70 
          }
 70 
          }
71 
 
 71 
 
72 
          onReaction(data, type)
 72 
          onReaction(data, type);
Línea 73... Línea 73...
73 
        })
 73 
        });
74 
      },
 74 
      },
75 
      [saveUrl, dispatch]
 75 
      [saveUrl, dispatch]
76 
    )
 76 
    );
Línea 77... Línea 77...
77 
 
 77 
 
78 
    const deleteReaction = useCallback(() => {
 78 
    const deleteReaction = useCallback(() => {
79 
      axios.post(deleteUrl).then((res) => {
 79 
      axios.post(deleteUrl).then((res) => {
80 
        const { success, data } = res.data
 80 
        const { success, data } = res.data;
81 
 
 81 
 
82 
        if (!success) {
 82 
        if (!success) {
Línea 83... Línea 83...
83 
          dispatch(addNotification({ style: 'danger', msg: data }))
 83 
          dispatch(addNotification({ style: 'danger', msg: data }));
84 
          return
 84 
          return;
85 
        }
 - 
 
86 
 
 85 
        }
87 
        onReaction({
 - 
 
88 
          reactions: data.reactions,
 - 
 
89 
          currentReactionType: ''
 - 
 
90 
        })
 86 
 
91 
      })
 - 
 
92 
    }, [])
 87 
        onReaction({
93 
 
 - 
 
94 
    return (
 - 
 
95 
      <Component onClick={currentReaction ? deleteReaction : handleHover}>
 88 
          reactions: data.reactions,
96 
        {currentReaction ? (
 89 
          currentReactionType: ''
Línea 97... Línea 90...
97 
          <Icon style={{ color: currentReaction.color }} />
 90 
        });
98 
        ) : (
 91 
      });
Línea 115... Línea 108...
115 
          {REACTIONS.map(({ type, label, icon: Icon, color }) => (
 108 
          {REACTIONS.map(({ type, label, icon: Icon, color }) => (
116 
            <button
 109 
            <button
117 
              key={type}
 110 
              key={type}
118 
              title={label}
 111 
              title={label}
119 
              onClickCapture={(e) => {
 112 
              onClickCapture={(e) => {
120 
                e.stopPropagation()
 113 
                e.stopPropagation();
121 
                saveReaction(type)
 114 
                saveReaction(type);
122 
              }}
 115 
              }}
123 
            >
 116 
            >
124 
              <Icon style={{ color }} />
 117 
              <Icon style={{ color }} />
125 
            </button>
 118 
            </button>
126 
          ))}
 119 
          ))}
127 
        </ReactionsBox>
 120 
        </ReactionsBox>
128 
      </Component>
 121 
      </Component>
129 
    )
 122 
    );
130 
  }
 123 
  };
Línea 131... Línea 124...
131 
 
 124 
 
132 
  return ReactionsButton
 125 
  return ReactionsButton;