Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect, useRef, useState } from 'react'

import MoreVertIcon from '@mui/icons-material/MoreVert'

import useOutsideClick from '../../../../hooks/useOutsideClick'

import UserDropdown from './UserDropdown'

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

  const [sessionImage, setSessionImage] = useState(image)

  const [showUserDropdown, setShowUserDropdown] = useState(false)

  const userDropdownContainer = useRef(null)

  useOutsideClick(userDropdownContainer, () => setShowUserDropdown(false))

  const toggleDropdown = () => {

    setShowUserDropdown(!showUserDropdown)

  }

  const checkSessionImage = () => {

    const session_image = sessionStorage.getItem('user_session_image')

    if (!session_image) return

    setSessionImage(session_image)

    sessionStorage.removeItem('user_session_image')

  }

  useEffect(() => {

    const imageInterval = setInterval(() => checkSessionImage(), 1000)

    return () => {

      clearInterval(imageInterval)

    }

  }, [])

  useEffect(() => {

    setSessionImage(image)

  }, [image])

  return (

    <div

      className="userImgContainer"

      onClick={toggleDropdown}

      ref={userDropdownContainer}

    >

      <img src={sessionImage} alt="user-img" />

      <div className="d-inline-flex flex-column">

        <h3>{fullName}</h3>

        <span>Mi perfil</span>

      </div>

      <MoreVertIcon />

      <UserDropdown

        show={showUserDropdown}

        linkAdmin={linkAdmin}

        linkImpersonate={linkImpersonate}

      />

    </div>

  )

}

export default UserImageDropdown