Proyectos de Subversion LeadersLinked - SPA

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

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

import { Avatar } from '@mui/material'

import { useHistory } from 'react-router-dom'

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

import { useDispatch, useSelector } from 'react-redux'

import styled from 'styled-components'

import { device } from '../../styles/MediaQueries'

import Spinner from '../UI/Spinner'

import StyledContainer from '../widgets/WidgetLayout'

import ConfirmModal from '../modals/ConfirmModal'

import ButtonPrimary from 'components/UI/buttons/ButtonPrimary'

import ButtonSecondary from 'components/UI/buttons/ButtonSecondary'

import ButtonTertiary from 'components/UI/buttons/ButtonTertiary'

const StyledSpinnerContainer = styled.div`

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

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

  place-items: center;

  z-index: 50;

`

const StyledItemContainer = styled(StyledContainer)`

  display: flex;

  flex-direction: column;

  justify-content: center;

  height: 100%;

  border-radius: 5px;

`

const StyledHeader = styled.div`

  align-items: center;

  display: flex;

  gap: 0.5rem;

  justify-content: flex-start;

  position: relative;

  padding: 15px 5px;

`

const StyledContent = styled.div`

  display: flex;

  flex-direction: column;

  text-align: center;

  ul {

    align-items: center;

    display: flex;

    justify-content: center;

    gap: 0.5rem;

    button {

      align-items: center;

      border-radius: var(--border-radius);

      cursor: pointer;

      display: inline-flex;

      flex-direction: column;

      font-size: 0.9rem;

      padding: 5px;

      position: relative;

      &:hover {

        background-color: whitesmoke;

      }

      @media ${device.tablet} {

        flex-direction: row;

        gap: 0.5rem;

        font-size: 1rem;

      }

    }

  }

`

const Actions = styled.div`

  display: flex;

  justify-content: space-around;

  border-top: 1px solid rgb(211, 211, 211);

  padding: 5px;

  gap: 0.5rem;

`

const StyledAvatar = styled(Avatar)`

  height: 60px !important;

  width: 60px !important;

`

const ProfileItem = ({

  image,

  name,

  email,

  network,

  status,

  fetchCallback,

  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,

  btnAcceptTitle = 'Ver',

  btnCancelTitle = 'Borrar',

  btnEditTitle = 'Editar',

  btnLeaveTitle = 'Dejar',

  isTopData

}) => {

  const [isShowConfirmation, setIsShowConfirmation] = useState(false)

  const [loading, setLoading] = useState(false)

  const confirmUrl = useRef('')

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

  const dispatch = useDispatch()

  const history = useHistory()

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

    setIsShowConfirmation(true)

    confirmUrl.current = url

  }

  const closeConfirm = () => {

    setIsShowConfirmation(false)

    confirmUrl.current = ''

  }

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

        const { success, data } = response.data

        if (!success) {

          const errorMessage =

            typeof data === 'string'

              ? data

              : 'Error interno. Por favor, inténtelo de nuevo más tarde.'

          dispatch(addNotification({ style: 'danger', msg: errorMessage }))

          return

        }

        if (fetchCallback) fetchCallback()

        dispatch(addNotification({ style: 'success', msg: data }))

      })

      .catch(() => {

        dispatch(

          addNotification({

            style: 'error',

            msg: 'Error interno. Por favor, inténtelo de nuevo más tarde.'

          })

        )

      })

      .finally(() => {

        confirmUrl.current = ''

        setLoading(false)

      })

  }

  const handleUnfollow = (link_unfollow) => {

    setLoading(true)

    axios

      .post(link_unfollow)

      .then((response) => {

        const { data, success } = response.data

        if (!success) {

          const errorMessage =

            typeof data === 'string'

              ? data

              : 'Error interno. Por favor, inténtelo de nuevo más tarde.'

          dispatch(addNotification({ style: 'danger', msg: errorMessage }))

          return

        }

        if (fetchCallback) fetchCallback()

        dispatch(addNotification({ style: 'success', msg: data }))

      })

      .finally(() => 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 navigateTo = (url) => {

    history.push(url)

  }

  return (

    <>

      <StyledItemContainer>

        <StyledHeader>

          {image && <StyledAvatar src={image} alt={`${name} image`} />}

          <StyledContent>

            <h2>{name}</h2>

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

            {network && <span>{network}</span>}

            {status && <span>{status}</span>}

            {isTopData && (

              <ul>

                {link_view && (

                  <li>

                    <ButtonPrimary

                      label={btnAcceptTitle || labels.view_profile}

                      onClick={() => navigateTo(link_view)}

                    />

                  </li>

                )}

                {link_inmail && (

                  <li>

                    <ButtonSecondary

                      label={labels.message}

                      onClick={() => navigateTo(link_inmail)}

                    />

                  </li>

                )}

              </ul>

            )}

          </StyledContent>

        </StyledHeader>

        <Actions>

          {link_view ? (

            <ButtonPrimary

              onClick={() => navigateTo(link_view)}

              label={btnAcceptTitle || labels.view_profile}

            />

          ) : null}

          {link_edit ? (

            <ButtonSecondary

              onClick={() => navigateTo(link_edit)}

              label={btnEditTitle || labels.edit}

            />

          ) : null}

          {link_accept ? (

            <ButtonSecondary

              onClick={() => onConfirm(link_accept)}

              label={labels.accept}

            />

          ) : null}

          {link_inmail ? (

            <ButtonSecondary

              onClick={() => navigateTo(link_inmail)}

              label={labels.message}

            />

          ) : null}

          {link_admin ? (

            <ButtonSecondary

              onClick={() => getManageUrl(link_admin)}

              label={labels.administrate}

            />

          ) : null}

          {link_approve ? (

            <ButtonSecondary

              onClick={() => confirmUrl(link_approve)}

              label={labels.approve}

            />

          ) : null}

          {link_unblock ? (

            <ButtonSecondary

              onClick={() => confirmUrl(link_unblock)}

              label={labels.unblock}

            />

          ) : null}

          {link_request ? (

            <ButtonSecondary

              onClick={() => confirmUrl(link_request)}

              label={labels.connect}

            />

          ) : null}

          {link_impersonate ? (

            <ButtonSecondary

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

              label='Personificar'

            />

          ) : null}

          {link_remove ? (

            <ButtonTertiary

              onClick={() => showConfirm(link_remove)}

              label={labels.remove_application}

            />

          ) : null}

          {link_reject ? (

            <ButtonTertiary

              onClick={() => showConfirm(link_reject)}

              label={labels.reject}

            />

          ) : null}

          {link_delete ? (

            <ButtonTertiary

              onClick={() => showConfirm(link_delete)}

              label={btnCancelTitle || labels.cancel}

            />

          ) : null}

          {link_unfollow ? (

            <ButtonTertiary

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

              label={labels.unfollow}

            />

          ) : null}

          {link_block ? (

            <ButtonTertiary

              onClick={() => showConfirm(link_block)}

              label={labels.block}

            />

          ) : null}

          {link_cancel ? (

            <ButtonTertiary

              onClick={() => showConfirm(link_cancel)}

              label={labels.cancel}

            />

          ) : null}

          {link_leave ? (

            <ButtonTertiary

              onClick={() => showConfirm(link_leave)}

              label={btnLeaveTitle}

            />

          ) : null}

        </Actions>

        {loading && (

          <StyledSpinnerContainer>

            <Spinner />

          </StyledSpinnerContainer>

        )}

      </StyledItemContainer>

      <ConfirmModal

        show={isShowConfirmation}

        onClose={() => closeConfirm()}

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

      />

    </>

  )

}

export default ProfileItem