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'
}) => {
    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) &&
                    <div className='user__options-item'>
                        <h3>Admin</h3>
                        <ul>
                            {adminUrl &&
                                <li>
                                    <a href="#" onClick={getAdminUrl} >Administración</a>
                                </li>
                            }
                            {impersonateUrl &&
                                <li>
                                    <a href="/impersonate">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