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) => {
        const { success, data } = response.data
        if (!success) {
          dispatch(
            addNotification({
              style: 'danger',
              msg: 'Error interno. Intente más tarde.',
            })
          )
        }

        if (data.url) {
          window.location.href = data.url
          dispatch(
            addNotification({
              style: 'success',
              msg: data.message,
            })
          )
          return
        }

        dispatch(logout())
      })
      .catch((err) => {
        dispatch(
          addNotification({
            style: 'danger',
            message: 'Error interno. Intente más tarde.',
          })
        )
        throw new Error(err)
      })
  }

  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}>Personificar otro usuario</Link>
                </li>
              )}
            </ul>
          </div>
        )}
        <div className="user__options-item">
          <h3>Cuenta</h3>
          <ul>
            <li>
              <Link to="/account-settings">Configuración de la cuenta</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