Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable camelcase */
/* eslint-disable react/prop-types */
import React, { useEffect, useRef, useState } from 'react'
import UserDropdown from './UserDropdown'
import MoreVertIcon from '@mui/icons-material/MoreVert'
import useOutsideClick from '../../../../hooks/useOutsideClick'

const UserImageDropdown = ({ fullName, image, linkAdmin, linkImpersonate }) => {
  const [sessionImage, setSessionImage] = useState(image)
  const [showUserDropdown, setShowUserDropdown] = useState(false)
  const userDropdownContainer = useRef(null)
  const outsideClick = useOutsideClick(userDropdownContainer)

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

  const checkSessionImage = () => {
    const session_image = sessionStorage.getItem('user_session_image')
    if (session_image) {
      setSessionImage(session_image)
      sessionStorage.removeItem('user_session_image')
    }
  }

  useEffect(() => {
    const imageInterval = setInterval(() => checkSessionImage(), 1000)
    return () => {
      clearInterval(imageInterval)
    }
  }, [])

  useEffect(() => {
    if (outsideClick) setShowUserDropdown(false)
  }, [outsideClick])

  return (
    <div
      className="userImgContainer"
      onClick={handleShowUserDropdown}
      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
        linkAdmin={linkAdmin}
        linkImpersonate={linkImpersonate}
        show={showUserDropdown}
        onClose={handleShowUserDropdown}
        userDropdownContainer={userDropdownContainer}
      />
    </div>
  )
}

export default UserImageDropdown