Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 754 | Rev 756 | 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) {
755 stevensc 41 
  const HOC = ({
42 
    saveUrl = '',
43 
    deleteUrl = '',
44 
    currentReaction = null,
45 
    onSelect = () => null
46 
  }) => {
47 
    const [reaction, setReaction] = useState(null)
48 
    const dispatch = useDispatch()
633 stevensc 49 
 
755 stevensc 50 
    const saveReaction = useCallback(
51 
      (type) => {
52 
        const formData = new FormData()
53 
        formData.append('reaction', type)
633 stevensc 54 
 
755 stevensc 55 
        axios.post(saveUrl, formData).then((res) => {
753 stevensc 56 
          const { success, data } = res.data
633 stevensc 57 
 
753 stevensc 58 
          if (!success) {
59 
            dispatch(addNotification({ style: 'danger', msg: data }))
60 
            return
61 
          }
633 stevensc 62 
 
755 stevensc 63 
          const newReaction = reactions.find((r) => r.type === type)
64 
 
65 
          setReaction((prevReaction) => {
66 
            return {
67 
              ...prevReaction,
68 
              ...newReaction
69 
            }
70 
          })
753 stevensc 71 
          onSelect(data.reactions)
72 
        })
755 stevensc 73 
      },
74 
      [saveUrl, dispatch, reactions, setReaction, onSelect]
75 
    )
646 stevensc 76 
 
755 stevensc 77 
    const deleteReaction = () => {
78 
      axios.post(deleteUrl).then((res) => {
79 
        const { success, data } = res.data
80 
 
81 
        if (!success) {
82 
          dispatch(addNotification({ style: 'danger', msg: data }))
83 
          return
633 stevensc 84 
        }
85 
 
755 stevensc 86 
        setReaction(null)
87 
        onSelect(data.reactions)
88 
      })
751 stevensc 89 
    }
633 stevensc 90 
 
755 stevensc 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 />
117 
            </button>
118 
          ))}
119 
        </div>
120 
      </Component>
121 
    )
122 
  }
123 
 
754 stevensc 124 
  return HOC
633 stevensc 125 
}