fix navbar issues during logout

This commit is contained in:
Sven Czarnian
2022-11-04 21:21:23 +01:00
parent fc05ae4546
commit 6accc3ef06

View File

@@ -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} /> : <></>);
};