Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 6632 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 6632 Rev 6640
Línea 1... Línea -...
1 
/* eslint-disable camelcase */
 - 
 
2 
/* eslint-disable react/prop-types */
 - 
 
3 
import React, { useEffect, useRef, useState } from 'react'
 1 
import React, { useEffect, useRef, useState } from 'react'
4 
import UserDropdown from './UserDropdown'
 - 
 
5 
import MoreVertIcon from '@mui/icons-material/MoreVert'
 2 
import MoreVertIcon from '@mui/icons-material/MoreVert'
6 
import useOutsideClick from '../../../../hooks/useOutsideClick'
 3 
import useOutsideClick from '../../../../hooks/useOutsideClick'
Línea -... Línea 4...
- 
 
 4 
 
- 
 
 5 
import UserDropdown from './UserDropdown'
7 
 
 6 
 
8 
const UserImageDropdown = ({ fullName, image, linkAdmin, linkImpersonate }) => {
 7 
const UserImageDropdown = ({ fullName, image, linkAdmin, linkImpersonate }) => {
9 
  const [sessionImage, setSessionImage] = useState(image)
 8 
  const [sessionImage, setSessionImage] = useState(image)
10 
  const [showUserDropdown, setShowUserDropdown] = useState(false)
 9 
  const [showUserDropdown, setShowUserDropdown] = useState(false)
11 
  const userDropdownContainer = useRef(null)
 - 
 
Línea 12... Línea 10...
12 
  const outsideClick = useOutsideClick(userDropdownContainer)
 10 
  const userDropdownContainer = useRef(null)
- 
 
 11 
 
- 
 
 12 
  useOutsideClick(userDropdownContainer, () => setShowUserDropdown(false))
- 
 
 13 
 
- 
 
 14 
  const toggleDropdown = () => {
Línea 13... Línea 15...
13 
 
 15 
    setShowUserDropdown(!showUserDropdown)
14 
  const handleShowUserDropdown = () => setShowUserDropdown(!showUserDropdown)
 16 
  }
- 
 
 17 
 
15 
 
 18 
  const checkSessionImage = () => {
- 
 
 19 
    const session_image = sessionStorage.getItem('user_session_image')
16 
  const checkSessionImage = () => {
 20 
 
17 
    const session_image = sessionStorage.getItem('user_session_image')
 21 
    if (!session_image) return
18 
    if (session_image) {
 - 
 
19 
      setSessionImage(session_image)
 22 
 
Línea 20... Línea 23...
20 
      sessionStorage.removeItem('user_session_image')
 23 
    setSessionImage(session_image)
21 
    }
 24 
    sessionStorage.removeItem('user_session_image')
- 
 
 25 
  }
22 
  }
 26 
 
23 
 
 27 
  useEffect(() => {
24 
  useEffect(() => {
 28 
    const imageInterval = setInterval(() => checkSessionImage(), 1000)
25 
    const imageInterval = setInterval(() => checkSessionImage(), 1000)
 29 
 
Línea 26... Línea 30...
26 
    return () => {
 30 
    return () => {
27 
      clearInterval(imageInterval)
 31 
      clearInterval(imageInterval)
28 
    }
 32 
    }
Línea 29... Línea 33...
29 
  }, [])
 33 
  }, [])
30 
 
 34 
 
31 
  useEffect(() => {
 35 
  useEffect(() => {
32 
    if (outsideClick) setShowUserDropdown(false)
 36 
    setSessionImage(image)
33 
  }, [outsideClick])
 37 
  }, [image])
34 
 
 38 
 
35 
  return (
 39 
  return (
36 
    <div
 40 
    <div
37 
      className="userImgContainer"
 41 
      className="userImgContainer"
38 
      onClick={handleShowUserDropdown}
 42 
      onClick={toggleDropdown}
39 
      ref={userDropdownContainer}
 43 
      ref={userDropdownContainer}
40 
    >
 44 
    >
41 
      <img src={sessionImage} alt="user-img" />
 45 
      <img src={sessionImage} alt="user-img" />
- 
 
 46 
      <div className="d-inline-flex flex-column">
42 
      <div className="d-inline-flex flex-column">
 47 
        <h3>{fullName}</h3>
43 
        <h3>{fullName}</h3>
 48 
        <span>Mi perfil</span>
44 
        <span>Mi perfil</span>
 - 
 
45 
      </div>
 - 
 
46 
      <MoreVertIcon />
 - 
 
47 
      <UserDropdown
 49 
      </div>
48 
        linkAdmin={linkAdmin}
 50 
      <MoreVertIcon />
49 
        linkImpersonate={linkImpersonate}
 51 
      <UserDropdown
50 
        show={showUserDropdown}
 52 
        show={showUserDropdown}