fix navbar issues during logout
This commit is contained in:
		| @@ -1,19 +1,22 @@ | ||||
| import { Menubar } from 'primereact/menubar'; | ||||
| import React, { useContext, useEffect, useState } from 'react'; | ||||
| import React, { useContext, useEffect, useRef, useState } from 'react'; | ||||
| import { useNavigate } from 'react-router-dom'; | ||||
| import { AuthContext, TimeContext } from '../contexts'; | ||||
| import { Configuration } from '../services'; | ||||
| import { Airport } from '../services'; | ||||
| import { AirportOverview } from '../types'; | ||||
| import { AirportOverview, IAuthState } from '../types'; | ||||
|  | ||||
| export const NavBar: React.FC = () => { | ||||
|   const [timestamp, setTimestamp] = useState<string>(''); | ||||
|   const [fullName, setFullName] = useState<string>(''); | ||||
|   const [menuTree, setMenuTree] = useState<any>(); | ||||
|   const [menuTree, setMenuTree] = useState<any>(undefined); | ||||
|   const authContext = useContext(AuthContext); | ||||
|   const timeContext = useContext(TimeContext); | ||||
|   const currentAuth = useRef<IAuthState>(); | ||||
|   const navigate = useNavigate(); | ||||
|  | ||||
|   currentAuth.current = authContext.auth; | ||||
|  | ||||
|   const firBasedSubMenu = (airports: AirportOverview[], endpoint: string): any[] => { | ||||
|     if (airports.length === 0) { | ||||
|       return [{ | ||||
| @@ -58,6 +61,8 @@ export const NavBar: React.FC = () => { | ||||
|   } | ||||
|  | ||||
|   const updateMenuItems = async () => { | ||||
|     if (currentAuth.current === undefined || !currentAuth.current.valid) return []; | ||||
|  | ||||
|     Airport.all().then((airports) => { | ||||
|       const newMenuTree: { label: string; items?: any[]; command?: () => void }[] = [ | ||||
|         { | ||||
| @@ -73,7 +78,7 @@ export const NavBar: React.FC = () => { | ||||
|       // collect all configuration airports | ||||
|       const configurationAirports: AirportOverview[] = []; | ||||
|       airports.forEach((airport) => { | ||||
|         const idx = authContext.auth.user.airportConfigurationAccess.findIndex((value) => airport.icao === value); | ||||
|         const idx = currentAuth.current?.user.airportConfigurationAccess.findIndex((value) => airport.icao === value); | ||||
|         if (idx !== -1) configurationAirports.push(airport); | ||||
|       }); | ||||
|  | ||||
| @@ -83,7 +88,7 @@ export const NavBar: React.FC = () => { | ||||
|         newMenuTree[1].items = configurationSubtree; | ||||
|       } | ||||
|  | ||||
|       if (authContext.auth.user.administrator) { | ||||
|       if (currentAuth.current?.user.administrator) { | ||||
|         newMenuTree.push({ | ||||
|           label: 'Administration', | ||||
|           items: [ | ||||
| @@ -119,7 +124,9 @@ export const NavBar: React.FC = () => { | ||||
|       const hours = String(serverUtcTime.getUTCHours()).padStart(2, '0'); | ||||
|       const minutes = String(serverUtcTime.getUTCMinutes()).padStart(2, '0'); | ||||
|       const seconds = String(serverUtcTime.getUTCSeconds()).padStart(2, '0'); | ||||
|       setTimestamp(`${hours}:${minutes}:${seconds}`); | ||||
|       if (currentAuth.current?.valid) { | ||||
|         setTimestamp(`${hours}:${minutes}:${seconds}`); | ||||
|       } | ||||
|     }, 1000); | ||||
|  | ||||
|     return () => { | ||||
| @@ -130,11 +137,11 @@ export const NavBar: React.FC = () => { | ||||
|   }, []); | ||||
|  | ||||
|   useEffect(() => { | ||||
|     if (authContext.auth.valid) { | ||||
|       if (authContext.auth.user.fullName !== '') { | ||||
|         setFullName(authContext.auth.user.fullName); | ||||
|     if (currentAuth.current?.valid) { | ||||
|       if (currentAuth.current.user.fullName !== '') { | ||||
|         setFullName(currentAuth.current.user.fullName); | ||||
|       } else { | ||||
|         setFullName(authContext.auth.user.vatsimId); | ||||
|         setFullName(currentAuth.current.user.vatsimId); | ||||
|       } | ||||
|       updateMenuItems(); | ||||
|     } else { | ||||
| @@ -144,9 +151,11 @@ export const NavBar: React.FC = () => { | ||||
|   // eslint-disable-next-line react-hooks/exhaustive-deps | ||||
|   }, [authContext]); | ||||
|  | ||||
|   if (menuTree === undefined || !currentAuth.current.valid) return <></>; | ||||
|  | ||||
|   const rightSideInfo = ( | ||||
|     <div>{fullName} | {timestamp}</div> | ||||
|   ); | ||||
|  | ||||
|   return (fullName !== '' && menuTree.length !== 0 ? <Menubar model={menuTree} end={rightSideInfo} /> : <></>); | ||||
|   return (menuTree.length !== 0 ? <Menubar model={menuTree} end={rightSideInfo} /> : <></>); | ||||
| }; | ||||
|   | ||||
		Reference in New Issue
	
	Block a user