Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 752 | Rev 754 | 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 
 
40 
export default function withReactions(
753 stevensc 41 
  Component,
639 stevensc 42 
  {
751 stevensc 43 
    saveUrl = '',
44 
    deleteUrl = '',
45 
    currentReaction = 'default',
46 
    onSelect = () => null
639 stevensc 47 
  } = {}
633 stevensc 48 
) {
49 
  return function (props) {
753 stevensc 50 
    const [reaction, setReaction] = useState(null)
751 stevensc 51 
    const dispatch = useDispatch()
633 stevensc 52 
 
753 stevensc 53 
    const saveReaction = useCallback(
54 
      (type) => {
55 
        const formData = new FormData()
56 
        formData.append('reaction', type)
633 stevensc 57 
 
753 stevensc 58 
        axios.post(saveUrl, formData).then((res) => {
59 
          const { success, data } = res.data
633 stevensc 60 
 
753 stevensc 61 
          if (!success) {
62 
            dispatch(addNotification({ style: 'danger', msg: data }))
63 
            return
64 
          }
633 stevensc 65 
 
753 stevensc 66 
          const newReaction = reactions.find((r) => r.type === type)
633 stevensc 67 
 
753 stevensc 68 
          setReaction((prevReaction) => {
69 
            return {
70 
              ...prevReaction,
71 
              ...newReaction
72 
            }
73 
          })
74 
          onSelect(data.reactions)
75 
        })
76 
      },
77 
      [saveUrl, dispatch, reactions, setReaction, onSelect]
78 
    )
646 stevensc 79 
 
633 stevensc 80 
    const deleteReaction = () => {
81 
      axios.post(deleteUrl).then((res) => {
751 stevensc 82 
        const { success, data } = res.data
633 stevensc 83 
 
84 
        if (!success) {
751 stevensc 85 
          dispatch(addNotification({ style: 'danger', msg: data }))
86 
          return
633 stevensc 87 
        }
88 
 
753 stevensc 89 
        setReaction(null)
751 stevensc 90 
        onSelect(data.reactions)
91 
      })
92 
    }
633 stevensc 93 
 
94 
    useEffect(() => {
751 stevensc 95 
      if (currentReaction) {
96 
        const reaction = reactions.find(({ type }) => type === currentReaction)
97 
        setReaction(reaction)
633 stevensc 98 
      }
751 stevensc 99 
    }, [currentReaction])
633 stevensc 100 
 
101 
    return (
102 
      <Component
753 stevensc 103 
        icon={reaction ? reaction.icon : RecommendIcon}
633 stevensc 104 
        onClick={() =>
753 stevensc 105 
          reaction ? deleteReaction() : saveReaction(reactions[0].type)
633 stevensc 106 
        }
753 stevensc 107 
        label={reaction ? reaction.label : 'Reaccionar'}
633 stevensc 108 
        {...props}
109 
      >
753 stevensc 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>
122 
          ))}
123 
        </div>
633 stevensc 124 
      </Component>
751 stevensc 125 
    )
126 
  }
633 stevensc 127 
}