Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 763 | Rev 766 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 763 Rev 764
Línea 1... Línea 1...
1 
import React, { useCallback, useEffect, useState } from 'react'
 1 
import React, { useCallback } from 'react'
2 
import { useDispatch } from 'react-redux'
 2 
import { useDispatch } from 'react-redux'
3 
import { axios } from '../utils'
 3 
import { axios } from '../utils'
4 
import { addNotification } from 'store/notification/notification.actions'
 4 
import { addNotification } from 'store/notification/notification.actions'
Línea 5... Línea 5...
5 
 
 5 
 
6 
import FunIcon from '../components/UI/icons/Fun'
 6 
import FunIcon from '../components/UI/icons/Fun'
7 
import LoveItIcon from '../components/UI/icons/LoveIt'
 7 
import LoveItIcon from '../components/UI/icons/LoveIt'
8 
import SupportIcon from '../components/UI/icons/Support'
 8 
import SupportIcon from '../components/UI/icons/Support'
9 
import InterestIcon from '../components/UI/icons/Interest'
 9 
import InterestIcon from '../components/UI/icons/Interest'
Línea 10... Línea 10...
10 
import RecommendIcon from '../components/UI/icons/Recommned'
 10 
import RecommendIcon from '../components/UI/icons/Recommned'
11 
 
 11 
 
12 
const reactions = [
 - 
 
13 
  {
 12 
const reactions = {
14 
    type: 'r',
 13 
  r: {
- 
 
 14 
    icon: RecommendIcon,
15 
    icon: RecommendIcon,
 15 
    label: 'Me gusta',
16 
    label: 'Me gusta'
 16 
    type: 'r'
17 
  },
 - 
 
18 
  {
 17 
  },
19 
    type: 's',
 18 
  s: {
- 
 
 19 
    icon: SupportIcon,
20 
    icon: SupportIcon,
 20 
    label: 'Dar apoyo',
21 
    label: 'Dar apoyo'
 21 
    type: 's'
22 
  },
 - 
 
23 
  {
 22 
  },
24 
    type: 'l',
 23 
  l: {
- 
 
 24 
    icon: LoveItIcon,
25 
    icon: LoveItIcon,
 25 
    label: 'Me encanta',
26 
    label: 'Me encanta'
 26 
    type: 'l'
27 
  },
 - 
 
28 
  {
 27 
  },
29 
    type: 'i',
 28 
  i: {
- 
 
 29 
    icon: InterestIcon,
30 
    icon: InterestIcon,
 30 
    label: 'Me interesa',
31 
    label: 'Me interesa'
 31 
    type: 'i'
32 
  },
 - 
 
33 
  {
 32 
  },
34 
    type: 'f',
 33 
  f: {
- 
 
 34 
    icon: FunIcon,
35 
    icon: FunIcon,
 35 
    label: 'Me divierte',
36 
    label: 'Me divierte'
 36 
    type: 'f'
Línea 37... Línea 37...
37 
  }
 37 
  }
38 
]
 38 
}
39 
 
 39 
 
40 
export default function withReactions(Component) {
 40 
export default function withReactions(Component) {
41 
  const HOC = ({
 41 
  const HOC = ({
42 
    saveUrl = '',
 42 
    saveUrl = '',
43 
    deleteUrl = '',
 43 
    deleteUrl = '',
44 
    currentReaction = null,
 - 
 
45 
    onSelect = () => null
 44 
    currentReaction = null,
Línea 46... Línea 45...
46 
  }) => {
 45 
    onReaction = () => null
47 
    const [reaction, setReaction] = useState(null)
 46 
  }) => {
48 
    const dispatch = useDispatch()
 47 
    const dispatch = useDispatch()
Línea 55... Línea 54...
55 
        axios.post(saveUrl, formData).then((res) => {
 54 
        axios.post(saveUrl, formData).then((res) => {
56 
          const { success, data } = res.data
 55 
          const { success, data } = res.data
Línea 57... Línea 56...
57 
 
 56 
 
58 
          if (!success) {
 57 
          if (!success) {
59 
            dispatch(addNotification({ style: 'danger', msg: data }))
 - 
 
60 
            return
 58 
            dispatch(addNotification({ style: 'danger', msg: data }))
Línea 61... Línea -...
61 
          }
 - 
 
62 
 
 - 
 
63 
          const newReaction = reactions.find((r) => r.type === type)
 - 
 
64 
 
 59 
          }
65 
          setReaction((prevReaction) => {
 60 
 
66 
            return {
 61 
          onReaction({
67 
              ...prevReaction,
 - 
 
68 
              ...newReaction
 62 
            reactions: data.reactions,
69 
            }
 - 
 
70 
          })
 63 
            currentReaction: type
71 
          onSelect(data.reactions)
 64 
          })
72 
        })
 65 
        })
73 
      },
 66 
      },
Línea 74... Línea 67...
74 
      [saveUrl, dispatch, reactions, setReaction, onSelect]
 67 
      [saveUrl, dispatch, reactions]
75 
    )
 68 
    )
76 
 
 69 
 
Línea 77... Línea 70...
77 
    const deleteReaction = () => {
 70 
    const deleteReaction = useCallback(() => {
78 
      axios.post(deleteUrl).then((res) => {
 71 
      axios.post(deleteUrl).then((res) => {
79 
        const { success, data } = res.data
 72 
        const { success, data } = res.data
80 
 
 73 
 
Línea 81... Línea 74...
81 
        if (!success) {
 74 
        if (!success) {
82 
          dispatch(addNotification({ style: 'danger', msg: data }))
 75 
          dispatch(addNotification({ style: 'danger', msg: data }))
- 
 
 76 
          return
- 
 
 77 
        }
83 
          return
 78 
 
84 
        }
 - 
 
85 
 
 - 
 
86 
        setReaction(null)
 - 
 
87 
        onSelect(data.reactions)
 - 
 
88 
      })
 - 
 
89 
    }
 - 
 
90 
 
 79 
        onReaction({
91 
    useEffect(() => {
 - 
 
Línea 92... Línea 80...
92 
      if (currentReaction) {
 80 
          reactions: data.reactions,
93 
        const reaction = reactions.find(({ type }) => type === currentReaction)
 81 
          currentReaction: ''
94 
        setReaction(reaction)
 82 
        })
95 
      }
 83 
      })
96 
    }, [currentReaction])
 84 
    }, [])
- 
 
 85 
 
- 
 
 86 
    return (
- 
 
 87 
      <Component
97 
 
 88 
        icon={currentReaction ? reactions[currentReaction].icon : RecommendIcon}
98 
    return (
 - 
 
99 
      <Component
 89 
        onClick={() =>
100 
        icon={reaction ? reaction.icon : RecommendIcon}
 90 
          currentReaction ? deleteReaction() : saveReaction(reactions.r.type)
101 
        onClick={() =>
 91 
        }
102 
          reaction ? deleteReaction() : saveReaction(reactions[0].type)
 92 
        label={
103 
        }
 93 
          currentReaction ? reactions[currentReaction].label : 'Reaccionar'
- 
 
 94 
        }
104 
        label={reaction ? reaction.label : 'Reaccionar'}
 95 
      >
105 
      >
 96 
        <div className='reactions'>
106 
        <div className='reactions'>
 97 
          {Object.values(reactions).map(({ type, label, icon: Icon }) => (
107 
          {reactions.map(({ icon: Icon, type, label }) => (
 98 
            <button
108 
            <button
 - 
 
109 
              key={type}
 99 
              key={type}
110 
              onClick={(e) => {
 100 
              title={label}
111 
                e.stopPropagation()
 101 
              onClick={(e) => {
112 
                saveReaction(type)
 102 
                e.stopPropagation()
113 
              }}
 103 
                saveReaction(type)
114 
              title={label}
 104 
              }}
115 
            >
 105 
            >
116 
              <Icon />
 106 
              <Icon />
Línea 117... Línea -...
117 
            </button>
 - 
 
118 
          ))}
 - 
 
119 
        </div>
 107 
            </button>
120 
      </Component>
 108 
          ))}