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