fix navbar issues during logout

src/components/navbar.tsx

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