Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev Autor Línea Nro. Línea
5070 stevensc 1 
/* eslint-disable camelcase */
3517 stevensc 2 
/* eslint-disable react/prop-types */
5070 stevensc 3 
import React, { useState } from 'react'
4 
import { addNotification } from '../redux/notification/notification.actions'
5 
import ConfirmationBox from '../shared/confirmation-box/ConfirmationBox'
6 
import Spinner from '../shared/loading-spinner/Spinner'
7 
import { axios } from '../utils'
1587 steven 8 
import styled from 'styled-components'
9 
 
10 
const StyledSpinnerContainer = styled.div`
11 
  position: absolute;
12 
  left: 0;
13 
  top: 0;
14 
  width: 100%;
15 
  height: 100%;
16 
  background: rgba(255, 255, 255, 0.4);
17 
  display: flex;
18 
  justify-content: center;
19 
  align-items: center;
20 
  z-index: 300;
5070 stevensc 21 
`
22 
const Profile = ({
23 
  image,
24 
  name,
25 
  email,
26 
  network,
27 
  status,
28 
  link_view,
29 
  link_edit,
30 
  link_delete,
31 
  link_cancel,
32 
  link_block,
33 
  link_reject,
34 
  link_accept,
35 
  link_inmail,
36 
  link_request,
37 
  link_unblock,
38 
  link_unfollow,
39 
  link_approve,
40 
  link_leave,
41 
  link_admin,
42 
  link_impersonate,
43 
  fetchCallback,
44 
  isTopData = false,
45 
  btnAcceptTitle = 'Ver perfil',
46 
  btnCancelTitle = 'Borrar perfil',
47 
  btnEditTitle = 'Editar perfil'
48 
}) => {
49 
  const [showConfirmationBox, setShowConfirmationBox] = useState(false)
50 
  const [showCancelConfirmationBox, setShowCancelConfirmationBox] = useState(false)
51 
  const [showBlockConfirmationBox, setShowBlockConfirmationBox] = useState(false)
52 
  const [showRejectConfirmationBox, setShowRejectConfirmationBox] = useState(false)
53 
  const [showApproveConfirmationBox, setShowApproveConfirmationBox] = useState(false)
54 
  const [showRequestConfirmationBox, setShowRequestConfirmationBox] = useState(false)
55 
  const [showUnblockConfirmationBox, setShowUnblockConfirmationBox] = useState(false)
56 
  const [showLeaveConfirmationBox, setShowLeaveConfirmationBox] = useState(false)
57 
  const [loading, setLoading] = useState(false)
1587 steven 58 
 
5070 stevensc 59 
  const handleShowConfirmationBox = (show = !showConfirmationBox) => {
60 
    setShowConfirmationBox(show)
3639 efrain 61 
  }
3816 stevensc 62 
  const handleCancelConfirmationBox = (show = !showConfirmationBox) => {
5070 stevensc 63 
    setShowCancelConfirmationBox(show)
64 
  }
3816 stevensc 65 
  const handleBlockConfirmationBox = (show = !showConfirmationBox) => {
5070 stevensc 66 
    setShowBlockConfirmationBox(show)
67 
  }
3816 stevensc 68 
  const handleRejectConfirmationBox = (show = !showConfirmationBox) => {
5070 stevensc 69 
    setShowRejectConfirmationBox(show)
70 
  }
3816 stevensc 71 
  const handleApproveConfirmationBox = (show = !showConfirmationBox) => {
5070 stevensc 72 
    setShowApproveConfirmationBox(show)
73 
  }
3816 stevensc 74 
  const handleRequestConfirmationBox = (show = !showConfirmationBox) => {
5070 stevensc 75 
    setShowRequestConfirmationBox(show)
76 
  }
3816 stevensc 77 
  const handleUnblockConfirmationBox = (show = !showConfirmationBox) => {
5070 stevensc 78 
    setShowUnblockConfirmationBox(show)
79 
  }
3816 stevensc 80 
  const handleLeaveConfirmationBox = (show = !showConfirmationBox) => {
5070 stevensc 81 
    setShowLeaveConfirmationBox(show)
82 
  }
1587 steven 83 
 
5070 stevensc 84 
  const getImpersonateUrl = async (url = '') => {
85 
    try {
86 
      const { data } = await axios.get(url)
87 
      if (data.success) window.location.href = data.data
88 
    } catch (error) {
89 
      console.log('>>: error > ', error)
90 
    }
91 
  }
92 
 
1587 steven 93 
  const handleCancelApply = (url = link_delete) => {
5070 stevensc 94 
    setLoading(true)
3522 stevensc 95 
    axios.post(url)
96 
      .then(({ data }) => {
97 
        if (!data.success) {
1587 steven 98 
          const errorMsg =
5070 stevensc 99 
            typeof data.data === 'string'
3522 stevensc 100 
              ? data.data
5070 stevensc 101 
              : 'Ha ocurrido un error, Por favor intente más tarde'
1587 steven 102 
          addNotification({
5070 stevensc 103 
            style: 'danger',
104 
            msg: errorMsg
105 
          })
1587 steven 106 
        }
5070 stevensc 107 
        const msg = data.data
3522 stevensc 108 
        addNotification({
5070 stevensc 109 
          style: 'success',
110 
          msg
111 
        })
112 
        if (fetchCallback) fetchCallback()
1587 steven 113 
      })
3522 stevensc 114 
      .catch((error) => console.log('>>: error > ', error))
115 
      .finally(() => setLoading(false))
5070 stevensc 116 
  }
1587 steven 117 
 
1588 steven 118 
  const handleUnfollow = async (link_unfollow) => {
5070 stevensc 119 
    setLoading(true)
3517 stevensc 120 
    await axios.post(link_unfollow)
121 
      .then(({ data }) => {
122 
        if (data.success) fetchCallback()
123 
 
124 
        typeof data.data === 'string' &&
1588 steven 125 
          addNotification({
5070 stevensc 126 
            style: 'danger',
3517 stevensc 127 
            msg: data.data
128 
          })
129 
      })
5070 stevensc 130 
    setLoading(false)
131 
  }
1588 steven 132 
 
1587 steven 133 
  const getManageUrl = async () => {
134 
    try {
3517 stevensc 135 
      const { data } = await axios.get(link_admin)
136 
      if (data.success) window.open(data.data, '_backend')
1587 steven 137 
    } catch (error) {
138 
      console.log('>>: error > ', error)
139 
    }
140 
  }
141 
 
142 
  return (
3517 stevensc 143 
    <div className='profile_info'>
3522 stevensc 144 
      <div className={`${image ? 'd-flex' : 'd-block'} position-relative`}>
5070 stevensc 145 
        {image &&
3520 stevensc 146 
          <div className='profile_info_header_imgContainer'>
147 
            <img src={image} className="object-fit-contain" style={{ maxHeight: '100px' }} alt="group image" />
148 
          </div>
2296 stevensc 149 
        }
5070 stevensc 150 
        <div className={`${image ? 'col-8 d-flex flex-column align-items-start' : 'col-12'} ${isTopData ? 'justify-content-end' : 'justify-content-center'}`}>
151 
          <h3 className={`${status ? '' : 'w-100 text-left'} ${isTopData ? 'mb-2' : ''} w-100`}>
2296 stevensc 152 
            {name}
153 
          </h3>
3814 stevensc 154 
          {(isTopData && email) &&
5070 stevensc 155 
            <h4 className={`${status ? '' : 'w-100 text-left'} ${isTopData ? 'mb-2' : ''} w-100`}>
3814 stevensc 156 
              {email}
157 
            </h4>
158 
          }
159 
          {network &&
5070 stevensc 160 
            <h4 className={`${status ? '' : 'w-100 text-left'} ${isTopData ? 'mb-2' : ''} w-100`}>
3814 stevensc 161 
              {network}
162 
            </h4>
163 
          }
5070 stevensc 164 
          {isTopData &&
2386 stevensc 165 
            <ul>
3635 stevensc 166 
              {link_view &&
2386 stevensc 167 
                <li>
168 
                  <a
169 
                    href={link_view}
3816 stevensc 170 
                    data-link={link_view}
171 
                    className="btn btn-secondary ellipsis"
2386 stevensc 172 
                  >
173 
                    {btnAcceptTitle}
174 
                  </a>
175 
                </li>
176 
              }
3635 stevensc 177 
              {link_inmail &&
2386 stevensc 178 
                <li>
179 
                  <a
180 
                    href={link_inmail}
3816 stevensc 181 
                    data-link={link_inmail}
182 
                    className="btn btn-primary"
2386 stevensc 183 
                  >
5070 stevensc 184 
                    {LABELS.MESSAGE}
2386 stevensc 185 
                  </a>
186 
                </li>
187 
              }
188 
            </ul>
189 
          }
3064 stevensc 190 
        </div>
3520 stevensc 191 
        {status &&
3521 stevensc 192 
          <h4 className={`col-sm-12 d-flex justify-content-center align-items-center ${!image ? 'position-relative' : ''}`}>
3068 stevensc 193 
            {status}
194 
          </h4>
195 
        }
2385 stevensc 196 
      </div>
197 
      <hr />
198 
      <ul>
3816 stevensc 199 
        {
200 
          link_view && !isTopData && (
201 
            <li>
202 
              <a
203 
                href={link_view}
204 
                data-link={link_view}
205 
                title=""
5090 stevensc 206 
                className="btn btn-primary"
3816 stevensc 207 
              >
208 
                {btnAcceptTitle}
209 
              </a>
210 
            </li>
211 
          )
212 
        }
213 
        {
214 
          link_edit && (
215 
            <li>
216 
              <a
217 
                href={link_edit}
218 
                data-link={link_edit}
219 
                title=""
5090 stevensc 220 
                className="btn btn-secondary"
3816 stevensc 221 
              >
222 
                {btnEditTitle}
223 
              </a>
224 
            </li>
225 
          )
226 
        }
227 
        {
5070 stevensc 228 
          link_approve &&
2316 stevensc 229 
          <li>
230 
            <a
3816 stevensc 231 
              href="#"
2317 stevensc 232 
              className="btn btn-tertiary"
3816 stevensc 233 
              onClick={(e) => {
5070 stevensc 234 
                e.preventDefault()
235 
                handleApproveConfirmationBox()
3816 stevensc 236 
              }}
2316 stevensc 237 
            >
5070 stevensc 238 
            {LABELS.APPROVE}
2316 stevensc 239 
            </a>
240 
          </li>
2296 stevensc 241 
        }
3816 stevensc 242 
        {
5070 stevensc 243 
          link_accept &&
3046 stevensc 244 
          <li>
245 
            <a
3816 stevensc 246 
              href="#"
3046 stevensc 247 
              className="btn btn-tertiary"
3816 stevensc 248 
              onClick={(e) => {
5070 stevensc 249 
                e.preventDefault()
250 
                handleApproveConfirmationBox()
3816 stevensc 251 
              }}
3046 stevensc 252 
            >
5070 stevensc 253 
              {LABEL.ACCEPT}
3046 stevensc 254 
            </a>
255 
          </li>
256 
        }
3816 stevensc 257 
        {
258 
          link_reject &&
2320 stevensc 259 
          <li>
3816 stevensc 260 
            <a
261 
              href="#"
5090 stevensc 262 
              className="btn btn-tertiary"
3816 stevensc 263 
              onClick={(e) => {
5070 stevensc 264 
                e.preventDefault()
265 
                handleRejectConfirmationBox()
3816 stevensc 266 
              }}
2320 stevensc 267 
            >
5070 stevensc 268 
              {LABELS.REJECT}
3816 stevensc 269 
            </a>
2320 stevensc 270 
          </li>
2296 stevensc 271 
        }
3816 stevensc 272 
        {
273 
          link_delete &&
2320 stevensc 274 
          <li>
3816 stevensc 275 
            <a
276 
              href="#"
5090 stevensc 277 
              className="btn btn-tertiary"
3816 stevensc 278 
              onClick={(e) => {
5070 stevensc 279 
                e.preventDefault()
280 
                handleShowConfirmationBox()
3816 stevensc 281 
              }}
2320 stevensc 282 
            >
3816 stevensc 283 
              {btnCancelTitle}
284 
            </a>
2320 stevensc 285 
          </li>
2296 stevensc 286 
        }
3816 stevensc 287 
        {
5070 stevensc 288 
          link_inmail && !isTopData &&
2518 stevensc 289 
          <li>
290 
            <a
291 
              href={link_inmail}
3816 stevensc 292 
              data-link={link_inmail}
293 
              title=""
5090 stevensc 294 
              className="btn btn-secondary"
2518 stevensc 295 
            >
5070 stevensc 296 
              {LABELS.MESSAGE}
2518 stevensc 297 
            </a>
298 
          </li>
299 
        }
3816 stevensc 300 
        {
301 
          link_admin &&
2320 stevensc 302 
          <li>
303 
            <a
304 
              onClick={() => getManageUrl()}
305 
              data-link={link_admin}
306 
              title="Administrar empresa"
5090 stevensc 307 
              className="btn btn-secondary"
2320 stevensc 308 
            >
5070 stevensc 309 
              {LABELS.ADMINISTRATE}
2320 stevensc 310 
            </a>
311 
          </li>
2296 stevensc 312 
        }
3816 stevensc 313 
        {
5070 stevensc 314 
          link_unfollow &&
2320 stevensc 315 
          <li>
316 
            <a
317 
              onClick={() => handleUnfollow(link_unfollow)}
318 
              data-link={link_unfollow}
319 
              title="Administrar empresa"
5090 stevensc 320 
              className="btn btn-tertiary"
2320 stevensc 321 
            >
5070 stevensc 322 
              {LABELS.UNFOLLOW}
2320 stevensc 323 
            </a>
324 
          </li>
2296 stevensc 325 
        }
2519 stevensc 326 
 
3816 stevensc 327 
        {
328 
          link_block &&
2519 stevensc 329 
          <li>
3816 stevensc 330 
            <a
331 
              href="#"
5090 stevensc 332 
              className="btn btn-tertiary"
3816 stevensc 333 
              onClick={(e) => {
5070 stevensc 334 
                e.preventDefault()
335 
                handleBlockConfirmationBox()
3816 stevensc 336 
              }}
2519 stevensc 337 
            >
5070 stevensc 338 
              {LABELS.BLOCK}
3816 stevensc 339 
            </a>
2519 stevensc 340 
          </li>
341 
        }
3816 stevensc 342 
        {
343 
          link_unblock && (
344 
            <li>
345 
              <a
346 
                href="#"
347 
                className="btn btn-tertiary"
348 
                onClick={(e) => {
5070 stevensc 349 
                  e.preventDefault()
350 
                  handleUnblockConfirmationBox()
3816 stevensc 351 
                }}
352 
              >
5070 stevensc 353 
                {LABELS.UNBLOCK}
3816 stevensc 354 
              </a>
355 
            </li>
356 
          )
357 
        }
358 
        {
5070 stevensc 359 
          link_request &&
2320 stevensc 360 
          <li>
3816 stevensc 361 
            <a
362 
              href="#"
2410 stevensc 363 
              className="btn btn-tertiary"
3816 stevensc 364 
              onClick={(e) => {
5070 stevensc 365 
                e.preventDefault()
366 
                handleRequestConfirmationBox()
3816 stevensc 367 
              }}
2320 stevensc 368 
            >
5134 stevensc 369 
              {LABELS.CONNECT}
3816 stevensc 370 
            </a>
371 
          </li>
2296 stevensc 372 
        }
3816 stevensc 373 
        {
5070 stevensc 374 
          link_cancel &&
2320 stevensc 375 
          <li>
3816 stevensc 376 
            <a
377 
              href="#"
5090 stevensc 378 
              className="btn btn-tertiary"
3816 stevensc 379 
              onClick={(e) => {
5070 stevensc 380 
                e.preventDefault()
381 
                handleCancelConfirmationBox()
3816 stevensc 382 
              }}
2320 stevensc 383 
            >
5070 stevensc 384 
              {LABELS.CANCEL}
3816 stevensc 385 
            </a>
386 
          </li>
2296 stevensc 387 
        }
5070 stevensc 388 
        {link_leave &&
2320 stevensc 389 
          <li>
3816 stevensc 390 
            <a
391 
              href="#"
2320 stevensc 392 
              className="btn btn-tertiary"
3816 stevensc 393 
              onClick={(e) => {
5070 stevensc 394 
                e.preventDefault()
395 
                handleLeaveConfirmationBox()
3816 stevensc 396 
              }}
2320 stevensc 397 
            >
5070 stevensc 398 
              {LABELS.LEAVE}
3816 stevensc 399 
            </a>
400 
          </li>
2296 stevensc 401 
        }
5070 stevensc 402 
        {link_impersonate &&
403 
        <li>
404 
          <a href="#" className="btn btn-tertiary" onClick={() => getImpersonateUrl(link_impersonate)} > Personificar </a>
405 
        </li>
406 
      }
3816 stevensc 407 
      </ul>
408 
      {
409 
        link_delete &&
5070 stevensc 410 
        <div style={{ position: 'relative' }}>
2320 stevensc 411 
          <ConfirmationBox
412 
            show={showConfirmationBox}
3816 stevensc 413 
            onClose={() => handleShowConfirmationBox(false)}
414 
            onAccept={() => handleCancelApply(link_delete)}
2320 stevensc 415 
          />
416 
        </div>
2285 stevensc 417 
      }
3816 stevensc 418 
      {
419 
        link_cancel && (
5070 stevensc 420 
          <div style={{ position: 'relative' }}>
3816 stevensc 421 
            <ConfirmationBox
422 
              show={showCancelConfirmationBox}
423 
              onClose={() => handleCancelConfirmationBox(false)}
424 
              onAccept={() => handleCancelApply(link_cancel)}
425 
            />
426 
          </div>
427 
        )
428 
      }
429 
      {
430 
        link_block && (
5070 stevensc 431 
          <div style={{ position: 'relative' }}>
3816 stevensc 432 
            <ConfirmationBox
433 
              show={showBlockConfirmationBox}
434 
              onClose={() => handleBlockConfirmationBox(false)}
435 
              onAccept={() => handleCancelApply(link_block)}
436 
            />
437 
          </div>
438 
        )
439 
      }
440 
      {
441 
        link_accept && (
5070 stevensc 442 
          <div style={{ position: 'relative' }}>
3816 stevensc 443 
            <ConfirmationBox
444 
              show={showApproveConfirmationBox}
445 
              onClose={() => handleApproveConfirmationBox(false)}
446 
              onAccept={() => handleCancelApply(link_accept)}
447 
            />
448 
          </div>
449 
        )
450 
      }
451 
      {
452 
        link_approve && (
5070 stevensc 453 
          <div style={{ position: 'relative' }}>
3816 stevensc 454 
            <ConfirmationBox
455 
              show={showApproveConfirmationBox}
456 
              onClose={() => handleApproveConfirmationBox(false)}
457 
              onAccept={() => handleCancelApply(link_approve)}
458 
            />
459 
          </div>
460 
        )
461 
      }
462 
      {
463 
        link_reject && (
5070 stevensc 464 
          <div style={{ position: 'relative' }}>
3816 stevensc 465 
            <ConfirmationBox
466 
              show={showRejectConfirmationBox}
467 
              onClose={() => handleRejectConfirmationBox(false)}
468 
              onAccept={() => handleCancelApply(link_reject)}
469 
            />
470 
          </div>
471 
        )
472 
      }
473 
      {
474 
        link_request && (
5070 stevensc 475 
          <div style={{ position: 'relative' }}>
3816 stevensc 476 
            <ConfirmationBox
477 
              show={showRequestConfirmationBox}
478 
              onClose={() => handleRequestConfirmationBox(false)}
479 
              onAccept={() => handleCancelApply(link_request)}
480 
            />
481 
          </div>
482 
        )
483 
      }
484 
      {
485 
        link_unblock && (
5070 stevensc 486 
          <div style={{ position: 'relative' }}>
3816 stevensc 487 
            <ConfirmationBox
488 
              show={showUnblockConfirmationBox}
489 
              onClose={() => handleUnblockConfirmationBox(false)}
490 
              onAccept={() => handleCancelApply(link_unblock)}
491 
            />
492 
          </div>
493 
        )
494 
      }
495 
      {
496 
        link_leave && (
5070 stevensc 497 
          <div style={{ position: 'relative' }}>
3816 stevensc 498 
            <ConfirmationBox
499 
              show={showLeaveConfirmationBox}
500 
              onClose={() => handleLeaveConfirmationBox(false)}
501 
              onAccept={() => handleCancelApply(link_leave)}
502 
            />
503 
          </div>
504 
        )
505 
      }
5070 stevensc 506 
      {loading &&
3522 stevensc 507 
        <StyledSpinnerContainer>
508 
          <Spinner />
509 
        </StyledSpinnerContainer>
2285 stevensc 510 
      }
5070 stevensc 511 
    </div>
512 
  )
513 
}
1587 steven 514 
 
5070 stevensc 515 
export default Profile