Proyectos de Subversion LeadersLinked - SPA

Rev

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

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