Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable camelcase */

/* eslint-disable react/prop-types */

import React, { useState } from 'react'

import { addNotification } from '../redux/notification/notification.actions'

import ConfirmationBox from '../shared/confirmation-box/ConfirmationBox'

import Spinner from '../shared/loading-spinner/Spinner'

import { axios } from '../utils'

import styled from 'styled-components'

import { useSelector } from 'react-redux'

const StyledSpinnerContainer = styled.div`

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  background: rgba(255, 255, 255, 0.4);

  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 300;

`

const Profile = ({

  image,

  name,

  email,

  network,

  status,

  link_view,

  link_edit,

  link_delete,

  link_cancel,

  link_block,

  link_reject,

  link_accept,

  link_inmail,

  link_request,

  link_unblock,

  link_unfollow,

  link_approve,

  link_leave,

  link_admin,

  link_impersonate,

  fetchCallback,

  isTopData = false,

  btnAcceptTitle = 'Ver perfil',

  btnCancelTitle = 'Borrar perfil',

  btnEditTitle = 'Editar perfil',

}) => {

  const [showConfirmationBox, setShowConfirmationBox] = useState(false)

  const [showCancelConfirmationBox, setShowCancelConfirmationBox] =

    useState(false)

  const [showBlockConfirmationBox, setShowBlockConfirmationBox] =

    useState(false)

  const [showRejectConfirmationBox, setShowRejectConfirmationBox] =

    useState(false)

  const [showApproveConfirmationBox, setShowApproveConfirmationBox] =

    useState(false)

  const [showRequestConfirmationBox, setShowRequestConfirmationBox] =

    useState(false)

  const [showUnblockConfirmationBox, setShowUnblockConfirmationBox] =

    useState(false)

  const [showLeaveConfirmationBox, setShowLeaveConfirmationBox] =

    useState(false)

  const [loading, setLoading] = useState(false)

  const labels = useSelector((state) => state.labels)

  const handleShowConfirmationBox = (show = !showConfirmationBox) => {

    setShowConfirmationBox(show)

  }

  const handleCancelConfirmationBox = (show = !showConfirmationBox) => {

    setShowCancelConfirmationBox(show)

  }

  const handleBlockConfirmationBox = (show = !showConfirmationBox) => {

    setShowBlockConfirmationBox(show)

  }

  const handleRejectConfirmationBox = (show = !showConfirmationBox) => {

    setShowRejectConfirmationBox(show)

  }

  const handleApproveConfirmationBox = (show = !showConfirmationBox) => {

    setShowApproveConfirmationBox(show)

  }

  const handleRequestConfirmationBox = (show = !showConfirmationBox) => {

    setShowRequestConfirmationBox(show)

  }

  const handleUnblockConfirmationBox = (show = !showConfirmationBox) => {

    setShowUnblockConfirmationBox(show)

  }

  const handleLeaveConfirmationBox = (show = !showConfirmationBox) => {

    setShowLeaveConfirmationBox(show)

  }

  const getImpersonateUrl = async (url = '') => {

    try {

      const { data } = await axios.get(url)

      if (data.success) window.location.href = data.data

    } catch (error) {

      console.log('>>: error > ', error)

    }

  }

  const handleCancelApply = (url = link_delete) => {

    setLoading(true)

    axios

      .post(url)

      .then(({ data }) => {

        if (!data.success) {

          const errorMsg =

            typeof data.data === 'string'

              ? data.data

              : 'Ha ocurrido un error, Por favor intente más tarde'

          addNotification({

            style: 'danger',

            msg: errorMsg,

          })

        }

        const msg = data.data

        addNotification({

          style: 'success',

          msg,

        })

        if (fetchCallback) fetchCallback()

      })

      .catch((error) => console.log('>>: error > ', error))

      .finally(() => setLoading(false))

  }

  const handleUnfollow = async (link_unfollow) => {

    setLoading(true)

    await axios.post(link_unfollow).then(({ data }) => {

      if (data.success) fetchCallback()

      typeof data.data === 'string' &&

        addNotification({

          style: 'danger',

          msg: data.data,

        })

    })

    setLoading(false)

  }

  const getManageUrl = async () => {

    try {

      const { data } = await axios.get(link_admin)

      if (data.success) window.open(data.data, '_backend')

    } catch (error) {

      console.log('>>: error > ', error)

    }

  }

  return (

    <div className="profile_info">

      <div className={`${image ? 'd-flex' : 'd-block'} position-relative`}>

        {image && (

          <div className="profile_info_header_imgContainer">

            <img

              src={image}

              className="object-fit-contain"

              style={{ maxHeight: '100px' }}

              alt="group image"

            />

          </div>

        )}

        <div

          className={`${

            image ? 'col-8 d-flex flex-column align-items-start' : 'col-12'

          } ${isTopData ? 'justify-content-end' : 'justify-content-center'}`}

        >

          <h3

            className={`${status ? '' : 'w-100 text-left'} ${

              isTopData ? 'mb-2' : ''

            } w-100`}

          >

            {name}

          </h3>

          {isTopData && email && (

            <h4

              className={`${status ? '' : 'w-100 text-left'} ${

                isTopData ? 'mb-2' : ''

              } w-100`}

            >

              {email}

            </h4>

          )}

          {network && (

            <h4

              className={`${status ? '' : 'w-100 text-left'} ${

                isTopData ? 'mb-2' : ''

              } w-100`}

            >

              {network}

            </h4>

          )}

          {isTopData && (

            <ul>

              {link_view && (

                <li>

                  <a

                    href={link_view}

                    data-link={link_view}

                    className="btn btn-secondary ellipsis"

                  >

                    {btnAcceptTitle}

                  </a>

                </li>

              )}

              {link_inmail && (

                <li>

                  <a

                    href={link_inmail}

                    data-link={link_inmail}

                    className="btn btn-primary"

                  >

                    {labels.MESSAGE}

                  </a>

                </li>

              )}

            </ul>

          )}

        </div>

        {status && (

          <h4

            className={`col-sm-12 d-flex justify-content-center align-items-center ${

              !image ? 'position-relative' : ''

            }`}

          >

            {status}

          </h4>

        )}

      </div>

      <hr />

      <ul>

        {link_view && !isTopData && (

          <li>

            <a

              href={link_view}

              data-link={link_view}

              title=""

              className="btn btn-primary"

            >

              {btnAcceptTitle}

            </a>

          </li>

        )}

        {link_edit && (

          <li>

            <a

              href={link_edit}

              data-link={link_edit}

              title=""

              className="btn btn-secondary"

            >

              {btnEditTitle}

            </a>

          </li>

        )}

        {link_approve && (

          <li>

            <a

              href="#"

              className="btn btn-tertiary"

              onClick={(e) => {

                e.preventDefault()

                handleApproveConfirmationBox()

              }}

            >

              {labels.APPROVE}

            </a>

          </li>

        )}

        {link_accept && (

          <li>

            <a

              href="#"

              className="btn btn-tertiary"

              onClick={(e) => {

                e.preventDefault()

                handleApproveConfirmationBox()

              }}

            >

              {labels.ACCEPT}

            </a>

          </li>

        )}

        {link_reject && (

          <li>

            <a

              href="#"

              className="btn btn-tertiary"

              onClick={(e) => {

                e.preventDefault()

                handleRejectConfirmationBox()

              }}

            >

              {labels.REJECT}

            </a>

          </li>

        )}

        {link_delete && (

          <li>

            <a

              href="#"

              className="btn btn-tertiary"

              onClick={(e) => {

                e.preventDefault()

                handleShowConfirmationBox()

              }}

            >

              {btnCancelTitle}

            </a>

          </li>

        )}

        {link_inmail && !isTopData && (

          <li>

            <a

              href={link_inmail}

              data-link={link_inmail}

              title=""

              className="btn btn-secondary"

            >

              {labels.MESSAGE}

            </a>

          </li>

        )}

        {link_admin && (

          <li>

            <a

              onClick={() => getManageUrl()}

              data-link={link_admin}

              title="Administrar empresa"

              className="btn btn-secondary"

            >

              {labels.ADMINISTRATE}

            </a>

          </li>

        )}

        {link_unfollow && (

          <li>

            <a

              onClick={() => handleUnfollow(link_unfollow)}

              data-link={link_unfollow}

              title="Administrar empresa"

              className="btn btn-tertiary"

            >

              {labels.UNFOLLOW}

            </a>

          </li>

        )}

        {link_block && (

          <li>

            <a

              href="#"

              className="btn btn-tertiary"

              onClick={(e) => {

                e.preventDefault()

                handleBlockConfirmationBox()

              }}

            >

              {labels.BLOCK}

            </a>

          </li>

        )}

        {link_unblock && (

          <li>

            <a

              href="#"

              className="btn btn-tertiary"

              onClick={(e) => {

                e.preventDefault()

                handleUnblockConfirmationBox()

              }}

            >

              {labels.UNBLOCK}

            </a>

          </li>

        )}

        {link_request && (

          <li>

            <a

              href="#"

              className="btn btn-tertiary"

              onClick={(e) => {

                e.preventDefault()

                handleRequestConfirmationBox()

              }}

            >

              {labels.CONNECT}

            </a>

          </li>

        )}

        {link_cancel && (

          <li>

            <a

              href="#"

              className="btn btn-tertiary"

              onClick={(e) => {

                e.preventDefault()

                handleCancelConfirmationBox()

              }}

            >

              {labels.CANCEL}

            </a>

          </li>

        )}

        {link_leave && (

          <li>

            <a

              href="#"

              className="btn btn-tertiary"

              onClick={(e) => {

                e.preventDefault()

                handleLeaveConfirmationBox()

              }}

            >

              {labels.LEAVE}

            </a>

          </li>

        )}

        {link_impersonate && (

          <li>

            <a

              href="#"

              className="btn btn-tertiary"

              onClick={() => getImpersonateUrl(link_impersonate)}

            >

              {' '}

              Personificar{' '}

            </a>

          </li>

        )}

      </ul>

      {link_delete && (

        <div style={{ position: 'relative' }}>

          <ConfirmationBox

            show={showConfirmationBox}

            onClose={() => handleShowConfirmationBox(false)}

            onAccept={() => handleCancelApply(link_delete)}

          />

        </div>

      )}

      {link_cancel && (

        <div style={{ position: 'relative' }}>

          <ConfirmationBox

            show={showCancelConfirmationBox}

            onClose={() => handleCancelConfirmationBox(false)}

            onAccept={() => handleCancelApply(link_cancel)}

          />

        </div>

      )}

      {link_block && (

        <div style={{ position: 'relative' }}>

          <ConfirmationBox

            show={showBlockConfirmationBox}

            onClose={() => handleBlockConfirmationBox(false)}

            onAccept={() => handleCancelApply(link_block)}

          />

        </div>

      )}

      {link_accept && (

        <div style={{ position: 'relative' }}>

          <ConfirmationBox

            show={showApproveConfirmationBox}

            onClose={() => handleApproveConfirmationBox(false)}

            onAccept={() => handleCancelApply(link_accept)}

          />

        </div>

      )}

      {link_approve && (

        <div style={{ position: 'relative' }}>

          <ConfirmationBox

            show={showApproveConfirmationBox}

            onClose={() => handleApproveConfirmationBox(false)}

            onAccept={() => handleCancelApply(link_approve)}

          />

        </div>

      )}

      {link_reject && (

        <div style={{ position: 'relative' }}>

          <ConfirmationBox

            show={showRejectConfirmationBox}

            onClose={() => handleRejectConfirmationBox(false)}

            onAccept={() => handleCancelApply(link_reject)}

          />

        </div>

      )}

      {link_request && (

        <div style={{ position: 'relative' }}>

          <ConfirmationBox

            show={showRequestConfirmationBox}

            onClose={() => handleRequestConfirmationBox(false)}

            onAccept={() => handleCancelApply(link_request)}

          />

        </div>

      )}

      {link_unblock && (

        <div style={{ position: 'relative' }}>

          <ConfirmationBox

            show={showUnblockConfirmationBox}

            onClose={() => handleUnblockConfirmationBox(false)}

            onAccept={() => handleCancelApply(link_unblock)}

          />

        </div>

      )}

      {link_leave && (

        <div style={{ position: 'relative' }}>

          <ConfirmationBox

            show={showLeaveConfirmationBox}

            onClose={() => handleLeaveConfirmationBox(false)}

            onAccept={() => handleCancelApply(link_leave)}

          />

        </div>

      )}

      {loading && (

        <StyledSpinnerContainer>

          <Spinner />

        </StyledSpinnerContainer>

      )}

    </div>

  )

}

export default Profile