Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useEffect, useRef, useState } from 'react'
import UserDropdown from './UserDropdown';

const UserImageDropdown = ({ fullName, image, linkAdmin, linkImpersonate, sessionImage }) => {

    const [showUserDropdown, setShowUserDropdown] = useState(false);
    const userDropdownContainer = useRef(null);
    const userImg = useRef(null);

    const handleShowUserDropdown = () => setShowUserDropdown(!showUserDropdown)

    useEffect(() => {
        const handleClickOutside = (event) => {
            if (userDropdownContainer.current && !userDropdownContainer.current.contains(event.target)) {
                setShowUserDropdown(false)
            }
        }
        document.addEventListener("mousedown", handleClickOutside);

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

    return (
        <div
            className='userImgContainer'
            onClick={handleShowUserDropdown}
            ref={userDropdownContainer}
        >
            <div className="d-flex align-items-center">
                <img
                    src={sessionImage ? sessionImage : image}
                    alt="user-img"
                    className='userImg'
                    ref={userImg}
                />
                <div className="d-none d-sm-none d-md-inline-flex d-lg-inline-flex flex-column">
                    <h3>{fullName}</h3>
                    <span>Mi perfil</span>
                </div>
            </div>
            <div className="d-none d-sm-none d-md-block d-lg-block flex-column">
                <img src='/images/icons/options.png' className='img-icon options-lg' />
            </div>

            <UserDropdown
                linkAdmin={linkAdmin}
                linkImpersonate={linkImpersonate}
                show={showUserDropdown}
                onClose={handleShowUserDropdown}
                userDropdownContainer={userDropdownContainer}
            />
        </div>
    )
}

export default UserImageDropdown