Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 756 | Rev 763 | 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 
 
755 stevensc 52 
    const saveReaction = useCallback(
53 
      (type) => {
54 
        const formData = new FormData()
55 
        formData.append('reaction', type)
633 stevensc 56 
 
755 stevensc 57 
        axios.post(saveUrl, formData).then((res) => {
753 stevensc 58 
          const { success, data } = res.data
633 stevensc 59 
 
753 stevensc 60 
          if (!success) {
61 
            dispatch(addNotification({ style: 'danger', msg: data }))
62 
            return
63 
          }
633 stevensc 64 
 
755 stevensc 65 
          const newReaction = reactions.find((r) => r.type === type)
66 
 
67 
          setReaction((prevReaction) => {
68 
            return {
69 
              ...prevReaction,
70 
              ...newReaction
71 
            }
72 
          })
753 stevensc 73 
          onSelect(data.reactions)
74 
        })
755 stevensc 75 
      },
76 
      [saveUrl, dispatch, reactions, setReaction, onSelect]
77 
    )
646 stevensc 78 
 
755 stevensc 79 
    const deleteReaction = () => {
80 
      axios.post(deleteUrl).then((res) => {
81 
        const { success, data } = res.data
82 
 
83 
        if (!success) {
84 
          dispatch(addNotification({ style: 'danger', msg: data }))
85 
          return
633 stevensc 86 
        }
87 
 
755 stevensc 88 
        setReaction(null)
89 
        onSelect(data.reactions)
90 
      })
751 stevensc 91 
    }
633 stevensc 92 
 
755 stevensc 93 
    useEffect(() => {
94 
      if (currentReaction) {
95 
        const reaction = reactions.find(({ type }) => type === currentReaction)
96 
        setReaction(reaction)
97 
      }
98 
    }, [currentReaction])
99 
 
100 
    return (
101 
      <Component
102 
        icon={reaction ? reaction.icon : RecommendIcon}
103 
        onClick={() =>
104 
          reaction ? deleteReaction() : saveReaction(reactions[0].type)
105 
        }
106 
        label={reaction ? reaction.label : 'Reaccionar'}
107 
      >
108 
        <div className='reactions'>
109 
          {reactions.map(({ icon: Icon, type, label }) => (
110 
            <button
111 
              key={type}
112 
              onClick={(e) => {
113 
                e.stopPropagation()
114 
                saveReaction(type)
115 
              }}
116 
              title={label}
117 
            >
118 
              <Icon />
119 
            </button>
120 
          ))}
121 
        </div>
122 
      </Component>
123 
    )
124 
  }
125 
 
762 stevensc 126 
  return React.memo(HOC, (prevProps, nextProps) => {
127 
    return prevProps.currentReaction === nextProps.currentReaction
128 
  })
633 stevensc 129 
}