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'

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

  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('/backend/signin-admin')
      if (data.success) return window.open(data.data)
    } catch (error) {
      console.log('>>: error > ', 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`}
          sx={{ height: '30px', width: '30px' }}
        />
        <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 />
            <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>
                  <a href="#" onClick={getAdminUrl}>
                    Administración
                  </a>
                </li>
              )}
              {impersonateUrl && (
                <li>
                  <a href="/impersonate" target="secondary">
                    Personificar otro usuario
                  </a>
                </li>
              )}
            </ul>
          </div>
        )}
        <div className="user__options-item">
          <h3>Cuenta</h3>
          <ul>
            <li>
              <a href="/account-settings" target="secondary">
                Configuración de la cuenta
              </a>
            </li>
            {defaultNetwork === 'y' && (
              <>
                <li>
                  <a href="/privacy-policy" target="secondary">
                    Política de privacidad
                  </a>
                </li>
                <li>
                  <a href="/cookies" target="secondary">
                    Política de cookies
                  </a>
                </li>
              </>
            )}
          </ul>
        </div>
        <div className="user__options-item">
          <ul>
            <li className="logOutContainer">
              <a className="logOutContainer__a" href="/signout">
                Cerrar sesión
              </a>
            </li>
          </ul>
        </div>
      </div>
    </li>
  )
}

export default UserOptions