Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 4678 | Rev 4740 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
4250 stevensc 1 
/* eslint-disable react/prop-types */
4678 stevensc 2 
import React, { useEffect, useRef, useState } from 'react'
4250 stevensc 3 
import Avatar from '../../../shared/Avatar/Avatar'
4251 stevensc 4 
import axios from '../../../utils/axios'
5 
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
4250 stevensc 6 
 
7 
const UserOptions = ({
8 
    image = '',
9 
    name = '',
10 
    adminUrl = '',
11 
    impersonateUrl = '',
12 
}) => {
4251 stevensc 13 
    const [displayOptions, setDisplayOptions] = useState(false)
4678 stevensc 14 
    const userDropdownContainer = useRef(null);
4251 stevensc 15 
 
4678 stevensc 16 
    useEffect(() => {
17 
        const handleClickOutside = (event) => {
18 
            if (userDropdownContainer.current && !userDropdownContainer.current.contains(event.target)) {
19 
                setDisplayOptions(false)
20 
            }
21 
        }
22 
        document.addEventListener("mousedown", handleClickOutside);
23 
 
24 
        return () => {
25 
            document.removeEventListener("mousedown", handleClickOutside);
26 
        };
27 
    }, [userDropdownContainer]);
28 
 
4251 stevensc 29 
    const handleDisplay = async (e) => {
30 
        e.preventDefault()
31 
        setDisplayOptions(!displayOptions)
32 
    }
33 
 
34 
    const getAdminUrl = async (e) => {
35 
        e.preventDefault()
36 
        try {
37 
            const { data } = await axios.get('/backend/signin-admin')
38 
            if (data.success) return window.open(data.data);
39 
        } catch (error) {
40 
            console.log('>>: error > ', error)
41 
        }
42 
    }
43 
 
4250 stevensc 44 
    return (
45 
        <li>
4251 stevensc 46 
            <a
47 
                href="#"
48 
                className="header__option"
49 
                onClick={handleDisplay}
50 
            >
51 
                <Avatar
52 
                    imageUrl={image}
53 
                    name={name}
54 
                    size='md'
55 
                />
4257 stevensc 56 
                <span>Me <ArrowDropDownIcon className='user__option-icon' /></span>
4251 stevensc 57 
            </a>
4678 stevensc 58 
            <div className={`user__options-dropdown ${displayOptions ? 'fadeIn' : 'fadeOut'}`} ref={userDropdownContainer}>
4257 stevensc 59 
                <div className='user__options-description'>
60 
                    <div className='user__options-info'>
61 
                        <Avatar
62 
                            imageUrl={image}
63 
                            name={name}
4260 stevensc 64 
                            size='xl'
4257 stevensc 65 
                        />
66 
                        <h3>{name}</h3>
67 
                    </div>
4710 stevensc 68 
                    {/* <a href='#' className='btn__profile'>
4257 stevensc 69 
                        View profile
4710 stevensc 70 
                    </a> */}
4257 stevensc 71 
                </div>
4261 stevensc 72 
                {(adminUrl || impersonateUrl) &&
73 
                    <div className='user__options-item'>
74 
                        <h3>Admin</h3>
75 
                        <ul>
76 
                            {adminUrl &&
77 
                                <li>
78 
                                    <a href="#" onClick={getAdminUrl} >Administración</a>
79 
                                </li>
80 
                            }
81 
                            {impersonateUrl &&
82 
                                <li>
83 
                                    <a href="/impersonate">Personificar otro usuario</a>
84 
                                </li>
85 
                            }
86 
                        </ul>
87 
                    </div>
88 
                }
4262 stevensc 89 
                <div className='user__options-item'>
90 
                    <h3>Cuenta</h3>
91 
                    <ul>
92 
                        <li>
93 
                            <a href="/account-settings">Configuración de la cuenta</a>
94 
                        </li>
95 
                        <li>
96 
                            <a href="/privacy-policy">Política de privacidad</a>
97 
                        </li>
98 
                        <li>
99 
                            <a href="/cookies">Política de cookies</a>
100 
                        </li>
101 
                    </ul>
102 
                </div>
103 
                <div className='user__options-item'>
104 
                    <ul>
105 
                        <li className='logOutContainer'>
106 
                            <a className='logOutContainer__a' href="/signout">
107 
                                Cerrar sesión
108 
                            </a>
109 
                        </li>
110 
                    </ul>
111 
                </div>
4251 stevensc 112 
            </div >
4262 stevensc 113 
        </li >
4250 stevensc 114 
    )
115 
}
116 
 
117 
export default UserOptions