Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { Avatar, styled, Typography } from '@mui/material'
import { ArrowDropDown } from '@mui/icons-material'

import { useOutsideClick } from '@hooks'

import { axios } from '@app/utils'
import { asyncLogout } from '@app/redux/auth/auth.actions'
import { addNotification } from '@app/redux/notification/notification.actions'

const NavItem = styled(Link)(({ theme }) => ({
  position: 'relative',
  display: 'flex',
  alignItems: 'center',
  padding: theme.spacing(1, 0),
  height: '100%'
}))

const UserOptions = ({
  image = '',
  name = '',
  adminUrl = '',
  impersonateUrl = '',
  defaultNetwork = 'y',
  knowledgeAuth,
  routeAdmin = '',
  routeImpersonate = ''
}) => {
  const [userImage, setUserImage] = useState(
    '/storage/type/user/code/f3df3718-37d9-4e4d-bd84-71f7924a858d/'
  )
  const [displayOptions, setDisplayOptions] = useState(false)
  const dispatch = useDispatch()

  const [userDropdownContainer] = useOutsideClick(() =>
    setDisplayOptions(false)
  )

  const checkUserImage = () => {
    const session_image = sessionStorage.getItem('user_session_image')
    if (!session_image) return
    setUserImage(session_image)
    sessionStorage.removeItem('user_session_image')
  }

  const handleDisplay = async (e) => {
    e.preventDefault()
    setDisplayOptions(!displayOptions)
  }

  const getAdminUrl = async (e) => {
    e.preventDefault()
    try {
      const { data } = await axios.get(routeAdmin)
      if (data.success) return window.open(data.data)
    } catch (error) {
      console.log('>>: error > ', error)
    }
  }

  const handleLogout = async (e) => {
    e.preventDefault()
    try {
      const response = await dispatch(asyncLogout())
      dispatch(addNotification({ style: 'success', msg: response.message }))
    } catch (error) {
      dispatch(addNotification({ style: 'danger', msg: error.message }))
    }
  }

  useEffect(() => {
    const timer = setInterval(checkUserImage, 2000)

    return () => {
      clearInterval(timer)
    }
  }, [])

  useEffect(() => {
    setUserImage(image)
  }, [image])

  return (
    <li ref={userDropdownContainer}>
      <NavItem to='/' onClick={handleDisplay}>
        <Avatar src={userImage} alt={`${name} profile image`} />

        <ArrowDropDown sx={{ fontSize: '1rem' }} />
      </NavItem>

      <div
        className={`user__options-dropdown ${
          displayOptions ? 'fadeIn' : 'fadeOut'
        }`}
      >
        <div className='user__options-description'>
          <div className='user__options-info'>
            <Avatar src={userImage} alt={`${name} profile image`} />
            <Typography variant='h3'>{name}</Typography>
          </div>
        </div>
        {(adminUrl || impersonateUrl || knowledgeAuth) && (
          <div className='user__options-item'>
            <Typography variant='h3'>Admin</Typography>
            <ul>
              {adminUrl && (
                <li>
                  <Link to='/admin' onClick={getAdminUrl}>
                    Administración
                  </Link>
                </li>
              )}
              {impersonateUrl && (
                <li>
                  <Link to={routeImpersonate}>Personificar otro usuario</Link>
                </li>
              )}
            </ul>
          </div>
        )}
        <div className='user__options-item'>
          <Typography variant='h3'>Cuenta</Typography>
          <ul>
            <li>
              <Link to='/account-settings'>Configuración de la cuenta</Link>
            </li>
            <li>
              <Link to='/abuse-report'>Reportes</Link>
            </li>
            {defaultNetwork === 'y' && (
              <>
                <li>
                  <Link to='/privacy-policy'>Política de privacidad</Link>
                </li>
                <li>
                  <Link to='/cookies'>Política de cookies</Link>
                </li>
              </>
            )}
          </ul>
        </div>
        <div className='user__options-item'>
          <ul>
            <li className='logOutContainer'>
              <Link
                className='logOutContainer__a'
                to='/signout'
                onClick={handleLogout}
              >
                Cerrar sesión
              </Link>
            </li>
          </ul>
        </div>
      </div>
    </li>
  )
}

export default UserOptions