Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev Autor Línea Nro. Línea
753 stevensc 1 
import React, { useCallback, useEffect, useState } from 'react'
751 stevensc 2 
import { useDispatch } from 'react-redux'
753 stevensc 3 
import { axios } from '../utils'
751 stevensc 4 
import { addNotification } from 'store/notification/notification.actions'
633 stevensc 5 
 
751 stevensc 6 
import FunIcon from '../components/UI/icons/Fun'
7 
import LoveItIcon from '../components/UI/icons/LoveIt'
8 
import SupportIcon from '../components/UI/icons/Support'
9 
import InterestIcon from '../components/UI/icons/Interest'
10 
import RecommendIcon from '../components/UI/icons/Recommned'
633 stevensc 11 
 
753 stevensc 12 
const reactions = [
13 
  {
14 
    type: 'r',
15 
    icon: RecommendIcon,
16 
    label: 'Me gusta'
17 
  },
18 
  {
19 
    type: 's',
20 
    icon: SupportIcon,
21 
    label: 'Dar apoyo'
22 
  },
23 
  {
24 
    type: 'l',
25 
    icon: LoveItIcon,
26 
    label: 'Me encanta'
27 
  },
28 
  {
29 
    type: 'i',
30 
    icon: InterestIcon,
31 
    label: 'Me interesa'
32 
  },
33 
  {
34 
    type: 'f',
35 
    icon: FunIcon,
36 
    label: 'Me divierte'
37 
  }
38 
]
633 stevensc 39 
 
754 stevensc 40 
export default function withReactions(Component) {
41 
  const HOC = React.memo(
42 
    ({
43 
      saveUrl = '',
44 
      deleteUrl = '',
45 
      currentReaction = null,
46 
      onSelect = () => null
47 
    }) => {
48 
      const [reaction, setReaction] = useState(null)
49 
      const dispatch = useDispatch()
633 stevensc 50 
 
754 stevensc 51 
      const saveReaction = useCallback(
52 
        (type) => {
53 
          const formData = new FormData()
54 
          formData.append('reaction', type)
633 stevensc 55 
 
754 stevensc 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]
76 
      )
77 
 
78 
      const deleteReaction = () => {
79 
        axios.post(deleteUrl).then((res) => {
753 stevensc 80 
          const { success, data } = res.data
633 stevensc 81 
 
753 stevensc 82 
          if (!success) {
83 
            dispatch(addNotification({ style: 'danger', msg: data }))
84 
            return
85 
          }
633 stevensc 86 
 
754 stevensc 87 
          setReaction(null)
753 stevensc 88 
          onSelect(data.reactions)
89 
        })
754 stevensc 90 
      }
646 stevensc 91 
 
754 stevensc 92 
      useEffect(() => {
93 
        if (currentReaction) {
94 
          const reaction = reactions.find(
95 
            ({ type }) => type === currentReaction
96 
          )
97 
          setReaction(reaction)
633 stevensc 98 
        }
754 stevensc 99 
      }, [currentReaction])
633 stevensc 100 
 
754 stevensc 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 
        >
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 />
120 
              </button>
121 
            ))}
122 
          </div>
123 
        </Component>
124 
      )
751 stevensc 125 
    }
754 stevensc 126 
  )
633 stevensc 127 
 
754 stevensc 128 
  return HOC
633 stevensc 129 
}