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 Spinner from '../UI/Spinner'

import StyledContainer from '../widgets/WidgetLayout'

import ConfirmModal from '../modals/ConfirmModal'

import {

  AccountCircleOutlined,

  CancelOutlined,

  ChatOutlined,

  DeleteOutline,

  Done,

  Edit,

  LockOpenOutlined,

  LockOutlined,

  LogoutOutlined,

  OpenInNew,

  PersonAddOutlined,

  PersonRemoveOutlined,

  Remove,

  SupervisorAccountOutlined

} from '@mui/icons-material'

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

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 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)

  }

  const linksOptions = [

    {

      label: btnAcceptTitle || labels.accept,

      url: link_view,

      color: 'primary',

      icon: OpenInNew

    },

    {

      label: btnEditTitle || labels.edit,

      url: link_edit,

      color: 'secondary',

      icon: Edit

    },

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

    { label: btnLeaveTitle, url: link_remove, color: 'tertiary', icon: Remove },

    { label: labels.accept, url: link_accept, color: 'secondary', icon: Done },

    {

      label: labels.reject,

      url: link_reject,

      color: 'tertiary',

      icon: CancelOutlined

    },

    {

      label: btnCancelTitle || labels.cancel,

      url: link_delete,

      color: 'tertiary',

      icon: DeleteOutline

    },

    {

      label: labels.message || 'Mensaje',

      url: link_inmail,

      color: 'secondary',

      icon: ChatOutlined

    },

    {

      label: labels.administrate,

      url: link_admin,

      color: 'secondary',

      icon: SupervisorAccountOutlined

    },

    {

      label: labels.unfollow,

      url: link_unfollow,

      color: 'tertiary',

      icon: PersonRemoveOutlined

    },

    {

      label: labels.block,

      url: link_block,

      color: 'tertiary',

      icon: LockOutlined

    },

    {

      label: labels.unblock,

      url: link_unblock,

      color: 'tertiary',

      icon: LockOpenOutlined

    },

    {

      label: labels.connect,

      url: link_request,

      color: 'tertiary',

      icon: PersonAddOutlined

    },

    {

      label: labels.cancel,

      url: link_cancel,

      color: 'tertiary',

      icon: CancelOutlined

    },

    {

      label: btnLeaveTitle,

      url: link_leave,

      color: 'tertiary',

      icon: LogoutOutlined

    },

    {

      label: 'Personificar',

      url: link_impersonate,

      color: 'tertiary',

      icon: AccountCircleOutlined

    }

  ]

  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>

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

                      <OpenInNew />

                      {btnAcceptTitle}

                    </button>

                  </li>

                )}

                {link_inmail && (

                  <li>

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

                      <ChatOutlined />

                      {labels.message}

                    </button>

                  </li>

                )}

              </ul>

            )}

          </StyledContent>

        </StyledHeader>

        <StyledItemContainer.Actions>

          {linksOptions.map(({ label, url, icon: Icon, color }) => {

            const breakOptions = [link_view, link_edit, link_inmail]

            if (!url) {

              return null

            }

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

              return null

            }

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

              return null

            }

            return (

              <button

                key={url}

                className={`btn btn-${color}`}

                onClick={() => {

                  if (url === link_unfollow) {

                    return handleUnfollow(url)

                  }

                  if (url === link_admin) {

                    return getManageUrl()

                  }

                  if (url === link_impersonate) {

                    return getImpersonateUrl(url)

                  }

                  if (!breakOptions.includes(url)) {

                    return showConfirm(url)

                  } else {

                    history.push(url)

                  }

                }}

              >

                <Icon />

                {label}

              </button>

            )

          })}

        </StyledItemContainer.Actions>

        {loading && (

          <StyledSpinnerContainer>

            <Spinner />

          </StyledSpinnerContainer>

        )}

      </StyledItemContainer>

      <ConfirmModal

        show={isShowConfirmation}

        onClose={() => closeConfirm()}

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

      />

    </>

  )

}

export default ProfileItem