Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 752 Rev 753
Línea 1... Línea 1...
1 
import React, { useEffect, useRef, useState } from 'react'
 1 
import React, { useCallback, useEffect, useState } from 'react'
2 
import { useDispatch } from 'react-redux'
 2 
import { useDispatch } from 'react-redux'
3 
import { axios, debounce } from '../utils'
 3 
import { axios } from '../utils'
4 
import { addNotification } from 'store/notification/notification.actions'
 4 
import { addNotification } from 'store/notification/notification.actions'
5 
import useOutsideClick from 'hooks/useOutsideClick'
 - 
 
Línea 6... Línea -...
6 
 
 - 
 
7 
import ReactionIcon from '@mui/icons-material/Recommend'
 5 
 
8 
import FunIcon from '../components/UI/icons/Fun'
 6 
import FunIcon from '../components/UI/icons/Fun'
9 
import LoveItIcon from '../components/UI/icons/LoveIt'
 7 
import LoveItIcon from '../components/UI/icons/LoveIt'
10 
import SupportIcon from '../components/UI/icons/Support'
 8 
import SupportIcon from '../components/UI/icons/Support'
11 
import InterestIcon from '../components/UI/icons/Interest'
 9 
import InterestIcon from '../components/UI/icons/Interest'
Línea 12... Línea 10...
12 
import RecommendIcon from '../components/UI/icons/Recommned'
 10 
import RecommendIcon from '../components/UI/icons/Recommned'
- 
 
 11 
 
- 
 
 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 
  {
13 
 
 24 
    type: 'l',
- 
 
 25 
    icon: LoveItIcon,
- 
 
 26 
    label: 'Me encanta'
- 
 
 27 
  },
14 
const initialReaction = {
 28 
  {
- 
 
 29 
    type: 'i',
- 
 
 30 
    icon: InterestIcon,
- 
 
 31 
    label: 'Me interesa'
15 
  label: 'Reaccionar',
 32 
  },
- 
 
 33 
  {
- 
 
 34 
    type: 'f',
- 
 
 35 
    icon: FunIcon,
16 
  icon: ReactionIcon,
 36 
    label: 'Me divierte'
Línea 17... Línea 37...
17 
  type: 'default'
 37 
  }
18 
}
 38 
]
19 
 
 39 
 
20 
export default function withReactions(
 40 
export default function withReactions(
21 
  Component = <></>,
 41 
  Component,
22 
  {
 42 
  {
23 
    saveUrl = '',
 43 
    saveUrl = '',
24 
    deleteUrl = '',
 44 
    deleteUrl = '',
25 
    currentReaction = 'default',
 45 
    currentReaction = 'default',
26 
    onSelect = () => null
 46 
    onSelect = () => null
27 
  } = {}
 47 
  } = {}
28 
) {
 - 
 
29 
  return function (props) {
 - 
 
30 
    const [reaction, setReaction] = useState(initialReaction)
 48 
) {
31 
    const [isHover, setIsHover] = useState(false)
 - 
 
Línea 32... Línea 49...
32 
    const rectionBtn = useRef(null)
 49 
  return function (props) {
- 
 
 50 
    const [reaction, setReaction] = useState(null)
- 
 
 51 
    const dispatch = useDispatch()
- 
 
 52 
 
- 
 
 53 
    const saveReaction = useCallback(
- 
 
 54 
      (type) => {
- 
 
 55 
        const formData = new FormData()
- 
 
 56 
        formData.append('reaction', type)
- 
 
 57 
 
- 
 
 58 
        axios.post(saveUrl, formData).then((res) => {
- 
 
 59 
          const { success, data } = res.data
33 
    const dispatch = useDispatch()
 60 
 
- 
 
 61 
          if (!success) {
- 
 
 62 
            dispatch(addNotification({ style: 'danger', msg: data }))
- 
 
 63 
            return
- 
 
 64 
          }
34 
    useOutsideClick(rectionBtn, () => setIsHover(false))
 65 
 
35 
 
 66 
          const newReaction = reactions.find((r) => r.type === type)
36 
    const reactions = [
 67 
 
- 
 
 68 
          setReaction((prevReaction) => {
- 
 
 69 
            return {
- 
 
 70 
              ...prevReaction,
- 
 
 71 
              ...newReaction
37 
      {
 72 
            }
38 
        type: 'r',
 - 
 
39 
        icon: RecommendIcon,
 - 
 
40 
        label: 'Me gusta'
 - 
 
41 
      },
 - 
 
42 
      {
 - 
 
43 
        type: 's',
 - 
 
44 
        icon: SupportIcon,
 - 
 
45 
        label: 'Dar apoyo'
 - 
 
46 
      },
 - 
 
47 
      {
 - 
 
48 
        type: 'l',
 - 
 
49 
        icon: LoveItIcon,
 - 
 
50 
        label: 'Me encanta'
 - 
 
51 
      },
 - 
 
52 
      {
 - 
 
53 
        type: 'i',
 - 
 
54 
        icon: InterestIcon,
 - 
 
55 
        label: 'Me interesa'
 - 
 
56 
      },
 - 
 
57 
      {
 - 
 
58 
        type: 'f',
 - 
 
59 
        icon: FunIcon,
 - 
 
60 
        label: 'Me divierte'
 - 
 
61 
      }
 - 
 
62 
    ]
 - 
 
63 
 
 - 
 
64 
    const saveReaction = (type) => {
 - 
 
65 
      const formData = new FormData()
 - 
 
66 
      formData.append('reaction', type)
 - 
 
67 
 
 - 
 
68 
      axios.post(saveUrl, formData).then((res) => {
 73 
          })
69 
        const { success, data } = res.data
 - 
 
70 
 
 - 
 
71 
        if (!success) {
 - 
 
72 
          dispatch(addNotification({ style: 'danger', msg: data }))
 - 
 
73 
          return
 - 
 
74 
        }
 - 
 
75 
 
 - 
 
76 
        const newReaction = reactions.find((r) => r.type === type)
 - 
 
77 
 
 - 
 
78 
        console.log(newReaction)
 - 
 
79 
 
 74 
          onSelect(data.reactions)
Línea 80... Línea 75...
80 
        setReaction(newReaction)
 75 
        })
81 
        onSelect(data.reactions)
 76 
      },
82 
      })
 77 
      [saveUrl, dispatch, reactions, setReaction, onSelect]
Línea 83... Línea 78...
83 
    }
 78 
    )
84 
 
 79 
 
85 
    const deleteReaction = () => {
 80 
    const deleteReaction = () => {
86 
      axios.post(deleteUrl).then((res) => {
 81 
      axios.post(deleteUrl).then((res) => {
Línea 87... Línea 82...
87 
        const { success, data } = res.data
 82 
        const { success, data } = res.data
88 
 
 83 
 
89 
        if (!success) {
 84 
        if (!success) {
90 
          dispatch(addNotification({ style: 'danger', msg: data }))
 85 
          dispatch(addNotification({ style: 'danger', msg: data }))
Línea 91... Línea -...
91 
          return
 - 
 
92 
        }
 - 
 
93 
 
 - 
 
94 
        setReaction(initialReaction)
 - 
 
95 
        onSelect(data.reactions)
 86 
          return
96 
      })
 87 
        }
97 
    }
 88 
 
98 
 
 89 
        setReaction(null)
99 
    const onHover = debounce(() => setIsHover(true), 500)
 90 
        onSelect(data.reactions)
100 
 
 91 
      })
Línea 101... Línea 92...
101 
    const onUnhover = debounce(() => setIsHover(false), 500)
 92 
    }
102 
 
 93 
 
103 
    useEffect(() => {
 - 
 
104 
      if (currentReaction) {
 - 
 
105 
        const reaction = reactions.find(({ type }) => type === currentReaction)
 - 
 
106 
        setReaction(reaction)
 94 
    useEffect(() => {
107 
      }
 95 
      if (currentReaction) {
108 
    }, [currentReaction])
 - 
 
109 
 
 - 
 
110 
    return (
 96 
        const reaction = reactions.find(({ type }) => type === currentReaction)
111 
      <Component
 97 
        setReaction(reaction)
112 
        onMouseOver={onHover}
 98 
      }
113 
        onMouseLeave={onUnhover}
 99 
    }, [currentReaction])
114 
        ref={rectionBtn}
 100 
 
115 
        icon={reaction.icon}
 - 
 
116 
        onClick={() =>
 101 
    return (
117 
          reaction.type !== 'default'
 102 
      <Component
118 
            ? deleteReaction()
 103 
        icon={reaction ? reaction.icon : RecommendIcon}
119 
            : saveReaction(reactions[0].type)
 104 
        onClick={() =>
120 
        }
 105 
          reaction ? deleteReaction() : saveReaction(reactions[0].type)
121 
        label={reaction.label}
 106 
        }
122 
        {...props}
 107 
        label={reaction ? reaction.label : 'Reaccionar'}
123 
      >
 - 
 
124 
        {isHover && (
 108 
        {...props}
125 
          <div className={`reactions ${isHover ? 'active' : ''}`}>
 109 
      >
126 
            {reactions.map(({ icon: Icon, type, label }) => (
 110 
        <div className='reactions'>
127 
              <button
 111 
          {reactions.map(({ icon: Icon, type, label }) => (
128 
                key={type}
 112 
            <button
129 
                onClick={(e) => {
 113 
              key={type}
130 
                  e.stopPropagation()
 114 
              onClick={(e) => {
131 
                  saveReaction(type)
 - 
 
132 
                  setIsHover(false)
 115 
                e.stopPropagation()
133 
                }}
 116 
                saveReaction(type)
134 
                title={label}
 117 
              }}
135 
              >
 118 
              title={label}