Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useRef, useState } from 'react'

import { axios } from '../../utils'

import { useSelector } from 'react-redux'

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

import styled from 'styled-components'

import Spinner from '../UI/Spinner'

import ConfirmationBox from '../UI/ConfirmBox'

import styles from './ProfileItem.module.scss'

const StyledSpinnerContainer = styled.div`

  position: absolute;

  left: 0;

  top: 0;

  padding: 100px;

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

  border-radius: 50%;

  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 300;

`

const ProfileItem = ({

  image,

  name,

  email,

  network,

  status,

  fetchCallback,

  btnAcceptTitle = 'Ver perfil',

  btnCancelTitle = 'Borrar perfil',

  btnEditTitle = 'Editar perfil',

  link_remove,

  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,

  isTopData,

}) => {

  const [isShowConfirmation, setIsShowConfirmation] = useState(false)

  const [loading, setLoading] = useState(false)

  const confirmUrl = useRef('')

  const labels = useSelector(({ intl }) => intl.labels)

  const handleConfirm = (url = '') => {

    setIsShowConfirmation(!isShowConfirmation)

    confirmUrl.current = url

  }

  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 onConfirm = (url) => {

    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(() => {

        confirmUrl.current = ''

        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)

    }

  }

  const linksOptions = [

    {

      label: btnAcceptTitle || labels.accept,

      url: link_view,

      color: 'primary',

    },

    { label: btnEditTitle || labels.edit, url: link_edit, color: 'secondary' },

    { label: labels.approve, url: link_approve, color: 'tertiary' },

    { label: labels.accept, url: link_remove, color: 'tertiary' },

    { label: labels.remove, url: link_accept, color: 'secondary' },

    { label: labels.reject, url: link_reject, color: 'tertiary' },

    {

      label: btnCancelTitle || labels.cancel,

      url: link_delete,

      color: 'tertiary',

    },

    {

      label: labels.message || 'Mensaje',

      url: link_inmail,

      color: 'secondary',

    },

    { label: labels.administrate, url: link_admin, color: 'secondary' },

    { label: labels.unfollow, url: link_unfollow, color: 'tertiary' },

    { label: labels.block, url: link_block, color: 'tertiary' },

    { label: labels.unblock, url: link_unblock, color: 'tertiary' },

    { label: labels.connect, url: link_request, color: 'tertiary' },

    { label: labels.cancel, url: link_cancel, color: 'tertiary' },

    { label: labels.leave, url: link_leave, color: 'tertiary' },

    { label: 'Personificar', url: link_impersonate, color: 'tertiary' },

  ]

  return (

    <div className={styles.profile_item}>

      <div className={styles.profile_item_header}>

        {image && <img src={image} alt="group image" />}

        <div className={styles.profile_item_header_info}>

          <h3>{name}</h3>

          {isTopData && email && <h4>{email}</h4>}

          {network && <h4>{network}</h4>}

          {status && <h4>{status}</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>

      </div>

      <hr />

      <ul className="position-relative">

        {linksOptions.map((option) => {

          const breakOptions = [link_view, link_edit, link_inmail]

          if (!option.url) {

            return null

          }

          if (option.url === link_view && isTopData) {

            return null

          }

          if (option.url === link_inmail && isTopData) {

            return null

          }

          return (

            <li key={option.label}>

              <a

                href={option.url}

                title={option.label}

                className="position-relative"

                onClick={(e) => {

                  if (!breakOptions.includes(option.url)) {

                    e.preventDefault()

                    handleConfirm(option.url)

                  }

                  if (option.url === link_unfollow) {

                    e.preventDefault()

                    handleUnfollow(option.url)

                  }

                  if (option.url === link_admin) {

                    e.preventDefault()

                    getManageUrl()

                  }

                  if (option.url === link_impersonate) {

                    e.preventDefault()

                    getImpersonateUrl(option.url)

                  }

                }}

              >

                <button className={`btn btn-${option.color}`}>

                  {option.label}

                </button>

              </a>

            </li>

          )

        })}

        <ConfirmationBox

          show={isShowConfirmation}

          onClose={() => handleConfirm()}

          onAccept={() => onConfirm(confirmUrl.current)}

        />

      </ul>

      {loading && (

        <StyledSpinnerContainer>

          <Spinner />

        </StyledSpinnerContainer>

      )}

    </div>

  )

}

export default ProfileItem