Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useEffect, useRef, useState } from 'react'
import Avatar from '../../../shared/Avatar/Avatar'
import axios from '../../../utils/axios'
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'

const UserOptions = ({
  image = '',
  name = '',
  adminUrl = '',
  impersonateUrl = '',
  defaultNetwork = 'y',
  routeKnowledge,
  knowledgeAuth,
}) => {
  const [displayOptions, setDisplayOptions] = useState(false)
  const userDropdownContainer = useRef(null)

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (
        userDropdownContainer?.current &&
        !userDropdownContainer?.current?.contains(event.target)
      ) {
        setDisplayOptions(false)
      }
    }
    document.addEventListener('mousedown', handleClickOutside)

    return () => {
      document.removeEventListener('mousedown', handleClickOutside)
    }
  }, [userDropdownContainer])

  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)
    }
  }

  return (
    <li>
      <a href="#" className="header__option mobile" onClick={handleDisplay}>
        <Avatar imageUrl={image} name={name} size="md" />
        <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 imageUrl={image} name={name} size="xl" />
            <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