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

      <img src="/images/icons/options.png" className="img-icon options-lg" />

      <UserDropdown

        linkAdmin={linkAdmin}

        linkImpersonate={linkImpersonate}

        show={showUserDropdown}

        onClose={handleShowUserDropdown}

        userDropdownContainer={userDropdownContainer}

      />

    </div>

  )

}

export default UserImageDropdown