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