Proyectos de Subversion LeadersLinked - Antes de SPA

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

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

import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'

import useOutsideClick from '../../../hooks/useOutsideClick'

import { Avatar } from '@mui/material'

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

import { logout } from '../../../redux/auth/auth.actions'

import { useDispatch } from 'react-redux'

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

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 userDropdownContainer = useRef(null)

  const dispatch = useDispatch()

  useOutsideClick(userDropdownContainer, () => 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 = (e) => {

    e.preventDefault()

    axios

      .get('/signout')

      .then((response) => {

        if (response.status === 200) {

          dispatch(logout())

        }

      })

      .catch(() => {

        dispatch(

          addNotification({

            style: 'danger',

            message: 'Error interno. Intente más tarde.',

          })

        )

        throw new Error()

      })

  }

  useEffect(() => {

    const timer = setInterval(() => {

      checkUserImage()

    }, 2000)

    return () => {

      clearInterval(timer)

    }

  }, [])

  useEffect(() => {

    setUserImage(image)

  }, [image])

  return (

    <li>

      <a href="#" className="header__option mobile" onClick={handleDisplay}>

        <Avatar src={userImage} alt={`${name} profile image`} />

        <span>

          Me <ArrowDropDownIcon className="user__option-icon" />

        </span>

      </a>

      <div

        className={`user__options-dropdown ${

          displayOptions ? 'fadeIn' : 'fadeOut'

        }`}

        ref={userDropdownContainer}

      >

        <div className="user__options-description">

          <div className="user__options-info">

            <Avatar src={userImage} alt={`${name} profile image`} />

            <h3>{name}</h3>

          </div>

          {/* <a href='#' className='btn__profile'>

                        View profile

                    </a> */}

        </div>

        {(adminUrl || impersonateUrl || knowledgeAuth) && (

          <div className="user__options-item">

            <h3>Admin</h3>

            <ul>

              {adminUrl && (

                <li>

                  <Link to="/admin" onClick={getAdminUrl}>

                    Administración

                  </Link>

                </li>

              )}

              {impersonateUrl && (

                <li>

                  <Link to={routeImpersonate} target="secondary">

                    Personificar otro usuario

                  </Link>

                </li>

              )}

            </ul>

          </div>

        )}

        <div className="user__options-item">

          <h3>Cuenta</h3>

          <ul>

            <li>

              <Link to="/account-settings" target="secondary">

                Configuración de la cuenta

              </Link>

            </li>

            {defaultNetwork === 'y' && (

              <>

                <li>

                  <Link to="/privacy-policy" target="secondary">

                    Política de privacidad

                  </Link>

                </li>

                <li>

                  <Link to="/cookies" target="secondary">

                    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