Proyectos de Subversion LeadersLinked - SPA

Rev

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