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