Proyectos de Subversion LeadersLinked - SPA

Rev

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

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