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