Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 5996 Rev 5997
Línea 1... Línea 1...
1 
/* eslint-disable camelcase */
 1 
/* eslint-disable camelcase */
2 
/* eslint-disable react/prop-types */
 2 
/* eslint-disable react/prop-types */
3 
import React, { useState } from 'react'
 3 
import React, { useRef, useState } from 'react'
4 
import { addNotification } from '../redux/notification/notification.actions'
 4 
import { addNotification } from '../redux/notification/notification.actions'
5 
import ConfirmationBox from '../shared/confirmation-box/ConfirmationBox'
 5 
import ConfirmationBox from '../shared/confirmation-box/ConfirmationBox'
6 
import Spinner from '../shared/loading-spinner/Spinner'
 6 
import Spinner from '../shared/loading-spinner/Spinner'
7 
import { axios } from '../utils'
 7 
import { axios } from '../utils'
8 
import styled from 'styled-components'
 8 
import styled from 'styled-components'
Línea 24... Línea 24...
24 
  image,
 24 
  image,
25 
  name,
 25 
  name,
26 
  email,
 26 
  email,
27 
  network,
 27 
  network,
28 
  status,
 28 
  status,
- 
 
 29 
  fetchCallback,
- 
 
 30 
  isTopData = false,
- 
 
 31 
  btnAcceptTitle = 'Ver perfil',
- 
 
 32 
  btnCancelTitle = 'Borrar perfil',
- 
 
 33 
  btnEditTitle = 'Editar perfil',
29 
  link_view,
 34 
  link_view,
30 
  link_edit,
 35 
  link_edit,
31 
  link_delete,
 36 
  link_delete,
32 
  link_cancel,
 37 
  link_cancel,
33 
  link_block,
 38 
  link_block,
Línea 39... Línea 44...
39 
  link_unfollow,
 44 
  link_unfollow,
40 
  link_approve,
 45 
  link_approve,
41 
  link_leave,
 46 
  link_leave,
42 
  link_admin,
 47 
  link_admin,
43 
  link_impersonate,
 48 
  link_impersonate,
44 
  fetchCallback,
 - 
 
45 
  isTopData = false,
 - 
 
46 
  btnAcceptTitle = 'Ver perfil',
 - 
 
47 
  btnCancelTitle = 'Borrar perfil',
 - 
 
48 
  btnEditTitle = 'Editar perfil',
 - 
 
49 
}) => {
 49 
}) => {
50 
  const [showConfirmationBox, setShowConfirmationBox] = useState(false)
 50 
  const [isShowConfirmation, setIsShowConfirmation] = useState(false)
51 
  const [showCancelConfirmationBox, setShowCancelConfirmationBox] =
 - 
 
52 
    useState(false)
 - 
 
53 
  const [showBlockConfirmationBox, setShowBlockConfirmationBox] =
 - 
 
54 
    useState(false)
 - 
 
55 
  const [showRejectConfirmationBox, setShowRejectConfirmationBox] =
 - 
 
56 
    useState(false)
 - 
 
57 
  const [showApproveConfirmationBox, setShowApproveConfirmationBox] =
 - 
 
58 
    useState(false)
 - 
 
59 
  const [showRequestConfirmationBox, setShowRequestConfirmationBox] =
 - 
 
60 
    useState(false)
 - 
 
61 
  const [showUnblockConfirmationBox, setShowUnblockConfirmationBox] =
 - 
 
62 
    useState(false)
 - 
 
63 
  const [showLeaveConfirmationBox, setShowLeaveConfirmationBox] =
 - 
 
64 
    useState(false)
 - 
 
65 
  const [loading, setLoading] = useState(false)
 51 
  const [loading, setLoading] = useState(false)
- 
 
 52 
  const confirmUrl = useRef('')
66 
  const labels = useSelector((state) => state.labels)
 53 
  const labels = useSelector((state) => state.labels)
Línea 67... Línea 54...
67 
 
 54 
 
68 
  const handleShowConfirmationBox = (show = !showConfirmationBox) => {
 55 
  const handleConfirm = (url = '') => {
69 
    setShowConfirmationBox(show)
 - 
 
70 
  }
 - 
 
71 
  const handleCancelConfirmationBox = (show = !showConfirmationBox) => {
 - 
 
72 
    setShowCancelConfirmationBox(show)
 - 
 
73 
  }
 - 
 
74 
  const handleBlockConfirmationBox = (show = !showConfirmationBox) => {
 56 
    setIsShowConfirmation(!isShowConfirmation)
75 
    setShowBlockConfirmationBox(show)
 - 
 
76 
  }
 - 
 
77 
  const handleRejectConfirmationBox = (show = !showConfirmationBox) => {
 - 
 
78 
    setShowRejectConfirmationBox(show)
 - 
 
79 
  }
 - 
 
80 
  const handleApproveConfirmationBox = (show = !showConfirmationBox) => {
 - 
 
81 
    setShowApproveConfirmationBox(show)
 - 
 
82 
  }
 - 
 
83 
  const handleRequestConfirmationBox = (show = !showConfirmationBox) => {
 - 
 
84 
    setShowRequestConfirmationBox(show)
 - 
 
85 
  }
 - 
 
86 
  const handleUnblockConfirmationBox = (show = !showConfirmationBox) => {
 - 
 
87 
    setShowUnblockConfirmationBox(show)
 - 
 
88 
  }
 - 
 
89 
  const handleLeaveConfirmationBox = (show = !showConfirmationBox) => {
 - 
 
90 
    setShowLeaveConfirmationBox(show)
 57 
    confirmUrl.current = url
Línea 91... Línea 58...
91 
  }
 58 
  }
92 
 
 59 
 
93 
  const getImpersonateUrl = async (url = '') => {
 60 
  const getImpersonateUrl = async (url = '') => {
Línea 97... Línea 64...
97 
    } catch (error) {
 64 
    } catch (error) {
98 
      console.log('>>: error > ', error)
 65 
      console.log('>>: error > ', error)
99 
    }
 66 
    }
100 
  }
 67 
  }
Línea 101... Línea 68...
101 
 
 68 
 
102 
  const handleCancelApply = (url = link_delete) => {
 69 
  const onConfirm = (url) => {
103 
    setLoading(true)
 70 
    setLoading(true)
104 
    axios
 71 
    axios
105 
      .post(url)
 72 
      .post(url)
106 
      .then(({ data }) => {
 73 
      .then(({ data }) => {
Línea 113... Línea 80...
113 
            style: 'danger',
 80 
            style: 'danger',
114 
            msg: errorMsg,
 81 
            msg: errorMsg,
115 
          })
 82 
          })
116 
        }
 83 
        }
117 
        const msg = data.data
 84 
        const msg = data.data
118 
        addNotification({
 - 
 
119 
          style: 'success',
 85 
        addNotification({ style: 'success', msg })
120 
          msg,
 - 
 
121 
        })
 - 
 
122 
        if (fetchCallback) fetchCallback()
 86 
        if (fetchCallback) fetchCallback()
123 
      })
 87 
      })
124 
      .catch((error) => console.log('>>: error > ', error))
 88 
      .catch((error) => console.log('>>: error > ', error))
- 
 
 89 
      .finally(() => {
- 
 
 90 
        confirmUrl.current = ''
125 
      .finally(() => setLoading(false))
 91 
        setLoading(false)
- 
 
 92 
      })
126 
  }
 93 
  }
Línea 127... Línea 94...
127 
 
 94 
 
128 
  const handleUnfollow = async (link_unfollow) => {
 95 
  const handleUnfollow = async (link_unfollow) => {
129 
    setLoading(true)
 96 
    setLoading(true)
Línea 146... Línea 113...
146 
    } catch (error) {
 113 
    } catch (error) {
147 
      console.log('>>: error > ', error)
 114 
      console.log('>>: error > ', error)
148 
    }
 115 
    }
149 
  }
 116 
  }
Línea -... Línea 117...
- 
 
 117 
 
- 
 
 118 
  const linksOptions = [
- 
 
 119 
    { label: btnAcceptTitle, url: link_view, color: 'primary' },
- 
 
 120 
    { label: btnEditTitle, url: link_edit, color: 'secondary' },
- 
 
 121 
    { label: labels.APPROVE, url: link_approve, color: 'tertiary' },
- 
 
 122 
    { label: labels.ACCEPT, url: link_accept, color: 'tertiary' },
- 
 
 123 
    { label: labels.REJECT, url: link_reject, color: 'tertiary' },
- 
 
 124 
    { label: btnCancelTitle, url: link_delete, color: 'tertiary' },
- 
 
 125 
    { label: labels.MESSAGE, url: link_inmail, color: 'secondary' },
- 
 
 126 
    { label: labels.ADMINISTRATE, url: link_admin, color: 'secondary' },
- 
 
 127 
    { label: labels.UNFOLLOW, url: link_unfollow, color: 'tertiary' },
- 
 
 128 
    { label: labels.BLOCK, url: link_block, color: 'tertiary' },
- 
 
 129 
    { label: labels.UNBLOCK, url: link_unblock, color: 'tertiary' },
- 
 
 130 
    { label: labels.CONNECT, url: link_request, color: 'tertiary' },
- 
 
 131 
    { label: labels.CANCEL, url: link_cancel, color: 'tertiary' },
- 
 
 132 
    { label: labels.LEAVE, url: link_leave, color: 'tertiary' },
- 
 
 133 
    { label: 'Personificar', url: link_impersonate, color: 'tertiary' },
- 
 
 134 
  ]
150 
 
 135 
 
151 
  return (
 136 
  return (
152 
    <div className="profile_info">
 137 
    <div className="profile_info">
153 
      <div className={`${image ? 'd-flex' : 'd-block'} position-relative`}>
 138 
      <div className={`${image ? 'd-flex' : 'd-block'} position-relative`}>
154 
        {image && (
 139 
        {image && (
Línea 228... Línea 213...
228 
          </h4>
 213 
          </h4>
229 
        )}
 214 
        )}
230 
      </div>
 215 
      </div>
231 
      <hr />
 216 
      <hr />
232 
      <ul>
 217 
      <ul>
233 
        {link_view && !isTopData && (
 - 
 
234 
          <li>
 - 
 
235 
            <a
 - 
 
236 
              href={link_view}
 - 
 
237 
              data-link={link_view}
 - 
 
238 
              title=""
 - 
 
239 
              className="btn btn-primary"
 - 
 
240 
            >
 - 
 
241 
              {btnAcceptTitle}
 - 
 
242 
            </a>
 - 
 
243 
          </li>
 - 
 
244 
        )}
 - 
 
245 
        {link_edit && (
 - 
 
246 
          <li>
 - 
 
247 
            <a
 - 
 
248 
              href={link_edit}
 - 
 
249 
              data-link={link_edit}
 - 
 
250 
              title=""
 - 
 
251 
              className="btn btn-secondary"
 - 
 
252 
            >
 - 
 
253 
              {btnEditTitle}
 - 
 
254 
            </a>
 - 
 
255 
          </li>
 - 
 
256 
        )}
 - 
 
257 
        {link_approve && (
 - 
 
258 
          <li>
 - 
 
259 
            <a
 - 
 
260 
              href="#"
 - 
 
261 
              className="btn btn-tertiary"
 - 
 
262 
              onClick={(e) => {
 - 
 
263 
                e.preventDefault()
 - 
 
264 
                handleApproveConfirmationBox()
 - 
 
265 
              }}
 - 
 
266 
            >
 - 
 
267 
              {labels.APPROVE}
 - 
 
268 
            </a>
 - 
 
269 
          </li>
 - 
 
270 
        )}
 - 
 
271 
        {link_accept && (
 - 
 
272 
          <li>
 - 
 
273 
            <a
 - 
 
274 
              href="#"
 - 
 
275 
              className="btn btn-tertiary"
 - 
 
276 
              onClick={(e) => {
 - 
 
277 
                e.preventDefault()
 - 
 
278 
                handleApproveConfirmationBox()
 - 
 
279 
              }}
 - 
 
280 
            >
 - 
 
281 
              {labels.ACCEPT}
 - 
 
282 
            </a>
 - 
 
283 
          </li>
 - 
 
284 
        )}
 - 
 
285 
        {link_reject && (
 - 
 
286 
          <li>
 - 
 
287 
            <a
 - 
 
288 
              href="#"
 - 
 
289 
              className="btn btn-tertiary"
 - 
 
290 
              onClick={(e) => {
 - 
 
291 
                e.preventDefault()
 - 
 
292 
                handleRejectConfirmationBox()
 - 
 
293 
              }}
 - 
 
294 
            >
 - 
 
295 
              {labels.REJECT}
 - 
 
296 
            </a>
 - 
 
297 
          </li>
 - 
 
298 
        )}
 - 
 
299 
        {link_delete && (
 - 
 
300 
          <li>
 - 
 
301 
            <a
 - 
 
302 
              href="#"
 - 
 
303 
              className="btn btn-tertiary"
 - 
 
304 
              onClick={(e) => {
 - 
 
305 
                e.preventDefault()
 - 
 
306 
                handleShowConfirmationBox()
 - 
 
307 
              }}
 - 
 
308 
            >
 - 
 
309 
              {btnCancelTitle}
 - 
 
310 
            </a>
 - 
 
311 
          </li>
 - 
 
312 
        )}
 - 
 
313 
        {link_inmail && !isTopData && (
 218 
        {linksOptions.map((option) => {
314 
          <li>
 - 
 
315 
            <a
 - 
 
316 
              href={link_inmail}
 - 
 
317 
              data-link={link_inmail}
 219 
          const breakOptions = [link_view, link_edit, link_inmail]
318 
              title=""
 - 
 
319 
              className="btn btn-secondary"
 - 
 
320 
            >
 - 
 
321 
              {labels.MESSAGE}
 - 
 
322 
            </a>
 - 
 
323 
          </li>
 - 
 
324 
        )}
 - 
 
325 
        {link_admin && (
 - 
 
326 
          <li>
 - 
 
327 
            <a
 - 
 
328 
              onClick={() => getManageUrl()}
 - 
 
329 
              data-link={link_admin}
 - 
 
330 
              title="Administrar empresa"
 - 
 
331 
              className="btn btn-secondary"
 - 
 
332 
            >
 - 
 
333 
              {labels.ADMINISTRATE}
 - 
 
334 
            </a>
 - 
 
335 
          </li>
 - 
 
336 
        )}
 - 
 
337 
        {link_unfollow && (
 - 
 
338 
          <li>
 - 
 
339 
            <a
 - 
 
340 
              onClick={() => handleUnfollow(link_unfollow)}
 - 
 
341 
              data-link={link_unfollow}
 - 
 
342 
              title="Administrar empresa"
 - 
 
343 
              className="btn btn-tertiary"
 - 
 
344 
            >
 - 
 
345 
              {labels.UNFOLLOW}
 - 
 
346 
            </a>
 - 
 
347 
          </li>
 - 
 
348 
        )}
 - 
 
Línea 349... Línea -...
349 
 
 - 
 
350 
        {link_block && (
 - 
 
351 
          <li>
 - 
 
352 
            <a
 - 
 
353 
              href="#"
 - 
 
354 
              className="btn btn-tertiary"
 - 
 
355 
              onClick={(e) => {
 - 
 
356 
                e.preventDefault()
 220 
 
357 
                handleBlockConfirmationBox()
 221 
          if (option.url === link_view && isTopData) {
358 
              }}
 - 
 
359 
            >
 - 
 
360 
              {labels.BLOCK}
 - 
 
361 
            </a>
 - 
 
362 
          </li>
 222 
            return null
363 
        )}
 - 
 
364 
        {link_unblock && (
 - 
 
365 
          <li>
 - 
 
366 
            <a
 - 
 
367 
              href="#"
 - 
 
368 
              className="btn btn-tertiary"
 - 
 
369 
              onClick={(e) => {
 - 
 
370 
                e.preventDefault()
 223 
          }
371 
                handleUnblockConfirmationBox()
 - 
 
372 
              }}
 - 
 
373 
            >
 - 
 
374 
              {labels.UNBLOCK}
 - 
 
375 
            </a>
 - 
 
376 
          </li>
 - 
 
377 
        )}
 - 
 
378 
        {link_request && (
 - 
 
379 
          <li>
 - 
 
380 
            <a
 224 
          if (option.url === link_inmail && isTopData) {
381 
              href="#"
 - 
 
382 
              className="btn btn-tertiary"
 - 
 
383 
              onClick={(e) => {
 - 
 
384 
                e.preventDefault()
 - 
 
385 
                handleRequestConfirmationBox()
 - 
 
386 
              }}
 - 
 
387 
            >
 - 
 
388 
              {labels.CONNECT}
 - 
 
389 
            </a>
 - 
 
390 
          </li>
 225 
            return null
391 
        )}
 - 
 
392 
        {link_cancel && (
 - 
 
393 
          <li>
 - 
 
394 
            <a
 - 
 
395 
              href="#"
 - 
 
396 
              className="btn btn-tertiary"
 - 
 
397 
              onClick={(e) => {
 - 
 
398 
                e.preventDefault()
 - 
 
399 
                handleCancelConfirmationBox()
 - 
 
400 
              }}
 - 
 
401 
            >
 - 
 
402 
              {labels.CANCEL}
 - 
 
403 
            </a>
 - 
 
404 
          </li>
 226 
          }
405 
        )}
 - 
 
406 
        {link_leave && (
 227 
 
407 
          <li>
 228 
          return (
- 
 
 229 
            <a
408 
            <a
 230 
              key={option.label}
- 
 
 231 
              href={option.url}
409 
              href="#"
 232 
              title={option.label}
410 
              className="btn btn-tertiary"
 233 
              className={`btn btn-${option.color} position-relative`}
- 
 
 234 
              onClick={(e) => {
411 
              onClick={(e) => {
 235 
                if (!breakOptions.includes(option.url)) {
- 
 
 236 
                  e.preventDefault()
- 
 
 237 
                }
- 
 
 238 
 
- 
 
 239 
                if (option.url === link_unfollow) {
- 
 
 240 
                  handleUnfollow(option.url)
- 
 
 241 
                }
- 
 
 242 
                if (option.url === link_admin) {
- 
 
 243 
                  getManageUrl()
- 
 
 244 
                }
- 
 
 245 
 
- 
 
 246 
                if (option.url === link_impersonate) {
- 
 
 247 
                  getImpersonateUrl(option.url)
- 
 
 248 
                }
412 
                e.preventDefault()
 249 
 
413 
                handleLeaveConfirmationBox()
 250 
                handleConfirm(option.url)
414 
              }}
 251 
              }}
415 
            >
 252 
            >
- 
 
 253 
              {option.label}
- 
 
 254 
              <ConfirmationBox
- 
 
 255 
                show={isShowConfirmation}
- 
 
 256 
                onClose={() => handleConfirm()}
- 
 
 257 
                onAccept={() => onConfirm(confirmUrl.current)}
416 
              {labels.LEAVE}
 258 
              />
417 
            </a>
 - 
 
418 
          </li>
 - 
 
419 
        )}
 - 
 
420 
        {link_impersonate && (
 - 
 
421 
          <li>
 - 
 
422 
            <a
 - 
 
423 
              href="#"
 - 
 
424 
              className="btn btn-tertiary"
 - 
 
425 
              onClick={() => getImpersonateUrl(link_impersonate)}
 259 
            </a>
426 
            >
 - 
 
427 
              {' '}
 - 
 
428 
              Personificar{' '}
 - 
 
429 
            </a>
 - 
 
430 
          </li>
 260 
          )
431 
        )}
 261 
        })}
432 
      </ul>
 - 
 
433 
      {link_delete && (
 - 
 
434 
        <div style={{ position: 'relative' }}>
 - 
 
435 
          <ConfirmationBox
 - 
 
436 
            show={showConfirmationBox}
 - 
 
437 
            onClose={() => handleShowConfirmationBox(false)}
 - 
 
438 
            onAccept={() => handleCancelApply(link_delete)}
 - 
 
439 
          />
 - 
 
440 
        </div>
 - 
 
441 
      )}
 - 
 
442 
      {link_cancel && (
 - 
 
443 
        <div style={{ position: 'relative' }}>
 - 
 
444 
          <ConfirmationBox
 - 
 
445 
            show={showCancelConfirmationBox}
 - 
 
446 
            onClose={() => handleCancelConfirmationBox(false)}
 - 
 
447 
            onAccept={() => handleCancelApply(link_cancel)}
 - 
 
448 
          />
 - 
 
449 
        </div>
 - 
 
450 
      )}
 - 
 
451 
      {link_block && (
 - 
 
452 
        <div style={{ position: 'relative' }}>
 - 
 
453 
          <ConfirmationBox
 - 
 
454 
            show={showBlockConfirmationBox}
 - 
 
455 
            onClose={() => handleBlockConfirmationBox(false)}
 - 
 
456 
            onAccept={() => handleCancelApply(link_block)}
 - 
 
457 
          />
 - 
 
458 
        </div>
 - 
 
459 
      )}
 - 
 
460 
      {link_accept && (
 - 
 
461 
        <div style={{ position: 'relative' }}>
 - 
 
462 
          <ConfirmationBox
 - 
 
463 
            show={showApproveConfirmationBox}
 - 
 
464 
            onClose={() => handleApproveConfirmationBox(false)}
 - 
 
465 
            onAccept={() => handleCancelApply(link_accept)}
 - 
 
466 
          />
 - 
 
467 
        </div>
 - 
 
468 
      )}
 - 
 
469 
      {link_approve && (
 - 
 
470 
        <div style={{ position: 'relative' }}>
 - 
 
471 
          <ConfirmationBox
 - 
 
472 
            show={showApproveConfirmationBox}
 - 
 
473 
            onClose={() => handleApproveConfirmationBox(false)}
 - 
 
474 
            onAccept={() => handleCancelApply(link_approve)}
 - 
 
475 
          />
 - 
 
476 
        </div>
 - 
 
477 
      )}
 - 
 
478 
      {link_reject && (
 - 
 
479 
        <div style={{ position: 'relative' }}>
 - 
 
480 
          <ConfirmationBox
 - 
 
481 
            show={showRejectConfirmationBox}
 - 
 
482 
            onClose={() => handleRejectConfirmationBox(false)}
 - 
 
483 
            onAccept={() => handleCancelApply(link_reject)}
 - 
 
484 
          />
 - 
 
485 
        </div>
 - 
 
486 
      )}
 - 
 
487 
      {link_request && (
 - 
 
488 
        <div style={{ position: 'relative' }}>
 - 
 
489 
          <ConfirmationBox
 - 
 
490 
            show={showRequestConfirmationBox}
 - 
 
491 
            onClose={() => handleRequestConfirmationBox(false)}
 - 
 
492 
            onAccept={() => handleCancelApply(link_request)}
 - 
 
493 
          />
 - 
 
494 
        </div>
 - 
 
495 
      )}
 - 
 
496 
      {link_unblock && (
 - 
 
497 
        <div style={{ position: 'relative' }}>
 - 
 
498 
          <ConfirmationBox
 - 
 
499 
            show={showUnblockConfirmationBox}
 - 
 
500 
            onClose={() => handleUnblockConfirmationBox(false)}
 - 
 
501 
            onAccept={() => handleCancelApply(link_unblock)}
 - 
 
502 
          />
 - 
 
503 
        </div>
 - 
 
504 
      )}
 - 
 
505 
      {link_leave && (
 - 
 
506 
        <div style={{ position: 'relative' }}>
 - 
 
507 
          <ConfirmationBox
 - 
 
508 
            show={showLeaveConfirmationBox}
 - 
 
509 
            onClose={() => handleLeaveConfirmationBox(false)}
 - 
 
510 
            onAccept={() => handleCancelApply(link_leave)}
 - 
 
511 
          />
 - 
 
512 
        </div>
 - 
 
513 
      )}
 262 
      </ul>
514 
      {loading && (
 263 
      {loading && (
515 
        <StyledSpinnerContainer>
 264 
        <StyledSpinnerContainer>
516 
          <Spinner />
 265 
          <Spinner />
517 
        </StyledSpinnerContainer>
 266 
        </StyledSpinnerContainer>