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