Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 496 | Rev 583 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
5 stevensc 1 
import React, { useRef, useState } from 'react'
2 
import { axios } from '../../utils'
496 stevensc 3 
import { Link } from 'react-router-dom'
4 
import { addNotification } from 'store/notification/notification.actions'
5 stevensc 5 
import { useDispatch, useSelector } from 'react-redux'
6 
import styled from 'styled-components'
7 
 
8 
import Spinner from '../UI/Spinner'
9 
import ConfirmationBox from '../UI/ConfirmBox'
10 
 
11 
import styles from './ProfileItem.module.scss'
12 
 
13 
const StyledSpinnerContainer = styled.div`
14 
  position: absolute;
15 
  left: 0;
16 
  top: 0;
17 
  width: 100%;
18 
  height: 100%;
19 
  background: rgba(255, 255, 255, 0.4);
20 
  place-items: center;
496 stevensc 21 
  z-index: 50;
22 
  .titulo {
23 
    color: #1b273e !important;
461 andreina 24 
  }
5 stevensc 25 
`
26 
const ProfileItem = ({
27 
  image,
28 
  name,
29 
  email,
30 
  network,
31 
  status,
32 
  fetchCallback,
489 andreina 33 
  btnAcceptTitle = ' Ver',
444 andreina 34 
  btnCancelTitle = 'Borrar',
35 
  btnEditTitle = 'Editar',
5 stevensc 36 
  btnLeaveTitle = 'Dejar',
37 
  link_remove,
38 
  link_view,
39 
  link_edit,
40 
  link_delete,
41 
  link_cancel,
42 
  link_block,
43 
  link_reject,
44 
  link_accept,
45 
  link_inmail,
46 
  link_request,
47 
  link_unblock,
48 
  link_unfollow,
49 
  link_approve,
50 
  link_leave,
51 
  link_admin,
52 
  link_impersonate,
53 
  isTopData,
54 
}) => {
55 
  const [isShowConfirmation, setIsShowConfirmation] = useState(false)
56 
  const [loading, setLoading] = useState(false)
57 
  const confirmUrl = useRef('')
58 
  const labels = useSelector(({ intl }) => intl.labels)
59 
  const dispatch = useDispatch()
60 
 
61 
  const showConfirm = (url = '') => {
62 
    setIsShowConfirmation(true)
63 
    confirmUrl.current = url
64 
  }
65 
 
496 stevensc 66 
  const closeConfirm = () => {
5 stevensc 67 
    setIsShowConfirmation(false)
68 
    confirmUrl.current = ''
69 
  }
70 
 
71 
  const getImpersonateUrl = async (url = '') => {
72 
    try {
73 
      const { data } = await axios.get(url)
74 
      if (data.success) window.location.href = data.data
75 
    } catch (error) {
76 
      console.log('>>: error > ', error)
77 
    }
78 
  }
79 
 
80 
  const onConfirm = (url) => {
81 
    setLoading(true)
82 
 
83 
    axios
84 
      .post(url)
85 
      .then((response) => {
86 
        const { success, data } = response.data
87 
 
88 
        if (!success) {
89 
          const errorMessage =
90 
            typeof data === 'string'
91 
              ? data
92 
              : 'Error interno. Por favor, inténtelo de nuevo más tarde.'
93 
 
94 
          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
95 
          return
96 
        }
97 
 
98 
        if (fetchCallback) fetchCallback()
99 
        dispatch(addNotification({ style: 'success', msg: data }))
100 
      })
526 stevensc 101 
      .catch(() => {
5 stevensc 102 
        dispatch(
103 
          addNotification({
104 
            style: 'error',
105 
            msg: 'Error interno. Por favor, inténtelo de nuevo más tarde.',
106 
          })
107 
        )
108 
      })
109 
      .finally(() => {
110 
        confirmUrl.current = ''
111 
        setLoading(false)
112 
      })
113 
  }
114 
 
115 
  const handleUnfollow = (link_unfollow) => {
116 
    setLoading(true)
117 
    axios
118 
      .post(link_unfollow)
119 
      .then((response) => {
120 
        const { data, success } = response.data
121 
 
122 
        if (!success) {
123 
          const errorMessage =
124 
            typeof data === 'string'
125 
              ? data
126 
              : 'Error interno. Por favor, inténtelo de nuevo más tarde.'
127 
 
128 
          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
129 
          return
130 
        }
131 
 
132 
        if (fetchCallback) fetchCallback()
133 
        dispatch(addNotification({ style: 'success', msg: data }))
134 
      })
135 
      .finally(() => setLoading(false))
136 
  }
137 
 
138 
  const getManageUrl = async () => {
139 
    try {
140 
      const { data } = await axios.get(link_admin)
141 
      if (data.success) window.open(data.data, '_backend')
142 
    } catch (error) {
143 
      console.log('>>: error > ', error)
144 
    }
145 
  }
146 
 
147 
  const linksOptions = [
148 
    {
149 
      label: btnAcceptTitle || labels.accept,
150 
      url: link_view,
151 
      color: 'primary',
152 
    },
153 
    { label: btnEditTitle || labels.edit, url: link_edit, color: 'secondary' },
154 
    { label: labels.approve, url: link_approve, color: 'tertiary' },
155 
    { label: btnLeaveTitle, url: link_remove, color: 'tertiary' },
156 
    { label: labels.accept, url: link_accept, color: 'secondary' },
157 
    { label: labels.reject, url: link_reject, color: 'tertiary' },
158 
    {
159 
      label: btnCancelTitle || labels.cancel,
160 
      url: link_delete,
161 
      color: 'tertiary',
162 
    },
163 
    {
164 
      label: labels.message || 'Mensaje',
165 
      url: link_inmail,
166 
      color: 'secondary',
167 
    },
168 
    { label: labels.administrate, url: link_admin, color: 'secondary' },
169 
    { label: labels.unfollow, url: link_unfollow, color: 'tertiary' },
170 
    { label: labels.block, url: link_block, color: 'tertiary' },
171 
    { label: labels.unblock, url: link_unblock, color: 'tertiary' },
172 
    { label: labels.connect, url: link_request, color: 'tertiary' },
173 
    { label: labels.cancel, url: link_cancel, color: 'tertiary' },
174 
    { label: btnLeaveTitle, url: link_leave, color: 'tertiary' },
175 
    { label: 'Personificar', url: link_impersonate, color: 'tertiary' },
176 
  ]
177 
 
178 
  return (
179 
    <div className={styles.profile_item}>
180 
      <div className={styles.profile_item_header}>
181 
        {image && <img src={image} alt="group image" />}
182 
        <div className={styles.profile_item_header_info}>
496 stevensc 183 
          <h3 className="titulo">{name}</h3>
184 
 
5 stevensc 185 
          {isTopData && email && <h4>{email}</h4>}
186 
          {network && <h4>{network}</h4>}
187 
          {status && <h4>{status}</h4>}
188 
          {isTopData && (
526 stevensc 189 
            <ul>
5 stevensc 190 
              {link_view && (
191 
                <li>
192 
                  <Link
193 
                    to={link_view}
194 
                    data-link={link_view}
195 
                    className="btn btn-secondary ellipsis"
196 
                  >
197 
                    {btnAcceptTitle}
198 
                  </Link>
199 
                </li>
200 
              )}
201 
              {link_inmail && (
202 
                <li>
203 
                  <Link
204 
                    to={link_inmail}
205 
                    data-link={link_inmail}
492 andreina 206 
                    className="btn "
5 stevensc 207 
                  >
208 
                    {labels.message}
209 
                  </Link>
210 
                </li>
211 
              )}
212 
            </ul>
213 
          )}
214 
        </div>
215 
      </div>
496 stevensc 216 
 
526 stevensc 217 
      <ul className="position-relative">
5 stevensc 218 
        {linksOptions.map((option) => {
219 
          const breakOptions = [link_view, link_edit, link_inmail]
220 
 
221 
          if (!option.url) {
222 
            return null
223 
          }
224 
 
225 
          if (option.url === link_view && isTopData) {
226 
            return null
227 
          }
228 
 
229 
          if (option.url === link_inmail && isTopData) {
230 
            return null
231 
          }
232 
 
233 
          return (
234 
            <li key={option.label}>
235 
              <Link
236 
                to={option.url}
237 
                title={option.label}
238 
                className="position-relative"
239 
                onClick={(e) => {
240 
                  if (option.url === link_unfollow) {
241 
                    e.preventDefault()
242 
                    handleUnfollow(option.url)
243 
                    return
244 
                  }
245 
 
246 
                  if (option.url === link_admin) {
247 
                    e.preventDefault()
248 
                    getManageUrl()
249 
                    return
250 
                  }
251 
 
252 
                  if (option.url === link_impersonate) {
253 
                    e.preventDefault()
254 
                    getImpersonateUrl(option.url)
255 
                    return
256 
                  }
257 
 
258 
                  if (!breakOptions.includes(option.url)) {
259 
                    e.preventDefault()
260 
                    showConfirm(option.url)
261 
                  }
262 
                }}
263 
              >
496 stevensc 264 
                <button className={`btn `}>{option.label}</button>
5 stevensc 265 
              </Link>
496 stevensc 266 
            </li>
5 stevensc 267 
          )
268 
        })}
269 
        <ConfirmationBox
270 
          show={isShowConfirmation}
271 
          onClose={() => closeConfirm()}
272 
          onAccept={() => onConfirm(confirmUrl.current)}
273 
        />
274 
      </ul>
496 stevensc 275 
 
5 stevensc 276 
      {loading && (
277 
        <StyledSpinnerContainer>
278 
          <Spinner />
279 
        </StyledSpinnerContainer>
280 
      )}
281 
    </div>
282 
  )
283 
}
284 
 
285 
export default ProfileItem