Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 753 Rev 754
Línea 35... Línea 35...
35 
    icon: FunIcon,
 35 
    icon: FunIcon,
36 
    label: 'Me divierte'
 36 
    label: 'Me divierte'
37 
  }
 37 
  }
38 
]
 38 
]
Línea 39... Línea 39...
39 
 
 39 
 
40 
export default function withReactions(
 40 
export default function withReactions(Component) {
41 
  Component,
 41 
  const HOC = React.memo(
42 
  {
 42 
    ({
43 
    saveUrl = '',
 43 
      saveUrl = '',
44 
    deleteUrl = '',
 44 
      deleteUrl = '',
45 
    currentReaction = 'default',
 45 
      currentReaction = null,
46 
    onSelect = () => null
 46 
      onSelect = () => null
47 
  } = {}
 - 
 
48 
) {
 - 
 
49 
  return function (props) {
 47 
    }) => {
50 
    const [reaction, setReaction] = useState(null)
 48 
      const [reaction, setReaction] = useState(null)
51 
    const dispatch = useDispatch()
 49 
      const dispatch = useDispatch()
52 
 
 50 
 
53 
    const saveReaction = useCallback(
 51 
      const saveReaction = useCallback(
54 
      (type) => {
 52 
        (type) => {
55 
        const formData = new FormData()
 53 
          const formData = new FormData()
- 
 
 54 
          formData.append('reaction', type)
- 
 
 55 
 
- 
 
 56 
          axios.post(saveUrl, formData).then((res) => {
- 
 
 57 
            const { success, data } = res.data
- 
 
 58 
 
- 
 
 59 
            if (!success) {
- 
 
 60 
              dispatch(addNotification({ style: 'danger', msg: data }))
- 
 
 61 
              return
- 
 
 62 
            }
- 
 
 63 
 
- 
 
 64 
            const newReaction = reactions.find((r) => r.type === type)
- 
 
 65 
 
- 
 
 66 
            setReaction((prevReaction) => {
- 
 
 67 
              return {
- 
 
 68 
                ...prevReaction,
- 
 
 69 
                ...newReaction
- 
 
 70 
              }
- 
 
 71 
            })
- 
 
 72 
            onSelect(data.reactions)
- 
 
 73 
          })
- 
 
 74 
        },
- 
 
 75 
        [saveUrl, dispatch, reactions, setReaction, onSelect]
Línea -... Línea 76...
- 
 
 76 
      )
56 
        formData.append('reaction', type)
 77 
 
57 
 
 78 
      const deleteReaction = () => {
Línea 58... Línea 79...
58 
        axios.post(saveUrl, formData).then((res) => {
 79 
        axios.post(deleteUrl).then((res) => {
59 
          const { success, data } = res.data
 80 
          const { success, data } = res.data
60 
 
 81 
 
61 
          if (!success) {
 82 
          if (!success) {
Línea 62... Línea -...
62 
            dispatch(addNotification({ style: 'danger', msg: data }))
 - 
 
63 
            return
 - 
 
64 
          }
 83 
            dispatch(addNotification({ style: 'danger', msg: data }))
65 
 
 - 
 
66 
          const newReaction = reactions.find((r) => r.type === type)
 - 
 
67 
 
 - 
 
68 
          setReaction((prevReaction) => {
 - 
 
69 
            return {
 - 
 
70 
              ...prevReaction,
 84 
            return
71 
              ...newReaction
 85 
          }
72 
            }
 86 
 
73 
          })
 - 
 
74 
          onSelect(data.reactions)
 - 
 
75 
        })
 87 
          setReaction(null)
76 
      },
 88 
          onSelect(data.reactions)
77 
      [saveUrl, dispatch, reactions, setReaction, onSelect]
 89 
        })
78 
    )
 90 
      }
79 
 
 - 
 
80 
    const deleteReaction = () => {
 - 
 
81 
      axios.post(deleteUrl).then((res) => {
 91 
 
82 
        const { success, data } = res.data
 92 
      useEffect(() => {
- 
 
 93 
        if (currentReaction) {
83 
 
 94 
          const reaction = reactions.find(
- 
 
 95 
            ({ type }) => type === currentReaction
Línea -... Línea 96...
- 
 
 96 
          )
84 
        if (!success) {
 97 
          setReaction(reaction)
- 
 
 98 
        }
- 
 
 99 
      }, [currentReaction])
- 
 
 100 
 
- 
 
 101 
      return (
- 
 
 102 
        <Component
- 
 
 103 
          icon={reaction ? reaction.icon : RecommendIcon}
85 
          dispatch(addNotification({ style: 'danger', msg: data }))
 104 
          onClick={() =>
- 
 
 105 
            reaction ? deleteReaction() : saveReaction(reactions[0].type)
- 
 
 106 
          }
- 
 
 107 
          label={reaction ? reaction.label : 'Reaccionar'}
- 
 
 108 
        >
- 
 
 109 
          <div className='reactions'>
- 
 
 110 
            {reactions.map(({ icon: Icon, type, label }) => (
- 
 
 111 
              <button
- 
 
 112 
                key={type}
- 
 
 113 
                onClick={(e) => {
- 
 
 114 
                  e.stopPropagation()
- 
 
 115 
                  saveReaction(type)
- 
 
 116 
                }}
- 
 
 117 
                title={label}
- 
 
 118 
              >
86 
          return
 119 
                <Icon />
87 
        }
 120 
              </button>
- 
 
 121 
            ))}
Línea 88... Línea -...
88 
 
 - 
 
89 
        setReaction(null)
 - 
 
90 
        onSelect(data.reactions)
 - 
 
91 
      })
 - 
 
92 
    }
 - 
 
93 
 
 - 
 
94 
    useEffect(() => {
 - 
 
95 
      if (currentReaction) {
 122 
          </div>
96 
        const reaction = reactions.find(({ type }) => type === currentReaction)
 - 
 
97 
        setReaction(reaction)
 - 
 
98 
      }
 - 
 
99 
    }, [currentReaction])
 - 
 
100 
 
 - 
 
101 
    return (
 - 
 
102 
      <Component
 - 
 
103 
        icon={reaction ? reaction.icon : RecommendIcon}
 - 
 
104 
        onClick={() =>
 - 
 
105 
          reaction ? deleteReaction() : saveReaction(reactions[0].type)
 - 
 
106 
        }
 - 
 
107 
        label={reaction ? reaction.label : 'Reaccionar'}
 - 
 
108 
        {...props}
 - 
 
109 
      >
 - 
 
110 
        <div className='reactions'>
 - 
 
111 
          {reactions.map(({ icon: Icon, type, label }) => (
 - 
 
112 
            <button
 - 
 
113 
              key={type}
 - 
 
114 
              onClick={(e) => {
 - 
 
115 
                e.stopPropagation()
 - 
 
116 
                saveReaction(type)
 - 
 
117 
              }}
 - 
 
118 
              title={label}
 - 
 
119 
            >
 - 
 
120 
              <Icon />
 - 
 
121 
            </button>
 123 
        </Component>