diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx index dbdc177..7ffa8dd 100644 --- a/src/components/navbar.tsx +++ b/src/components/navbar.tsx @@ -1,15 +1,17 @@ import { Menubar } from 'primereact/menubar'; import React, { useContext, useEffect, useState } from 'react'; import { useNavigate } from 'react-router-dom'; -import { AuthContext } from '../contexts'; +import { AuthContext, TimeContext } from '../contexts'; import { Configuration } from '../services'; import { Airport } from '../services'; import { AirportOverview } from '../types'; export const NavBar: React.FC = () => { + const [timestamp, setTimestamp] = useState(''); const [fullName, setFullName] = useState(''); const [menuTree, setMenuTree] = useState(); - const context = useContext(AuthContext); + const authContext = useContext(AuthContext); + const timeContext = useContext(TimeContext); const navigate = useNavigate(); const firBasedSubMenu = (airports: AirportOverview[], endpoint: string): any[] => { @@ -71,7 +73,7 @@ export const NavBar: React.FC = () => { // collect all configuration airports const configurationAirports: AirportOverview[] = []; airports.forEach((airport) => { - const idx = context.auth.user.airportConfigurationAccess.findIndex((value) => airport.icao === value); + const idx = authContext.auth.user.airportConfigurationAccess.findIndex((value) => airport.icao === value); if (idx !== -1) configurationAirports.push(airport); }); @@ -81,7 +83,7 @@ export const NavBar: React.FC = () => { newMenuTree[1].items = configurationSubtree; } - if (context.auth.user.administrator) { + if (authContext.auth.user.administrator) { newMenuTree.push({ label: 'Administration', items: [ @@ -112,18 +114,27 @@ export const NavBar: React.FC = () => { updateMenuItems(); } + const timeInterval = setInterval(() => { + const serverUtcTime = new Date(new Date().getTime() + timeContext.offset); + 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}`); + }, 1000); + return () => { + clearInterval(timeInterval); event.close(); } // eslint-disable-next-line react-hooks/exhaustive-deps }, []); useEffect(() => { - if (context.auth.valid) { - if (context.auth.user.fullName !== '') { - setFullName(context.auth.user.fullName); + if (authContext.auth.valid) { + if (authContext.auth.user.fullName !== '') { + setFullName(authContext.auth.user.fullName); } else { - setFullName(context.auth.user.vatsimId); + setFullName(authContext.auth.user.vatsimId); } updateMenuItems(); } else { @@ -131,11 +142,11 @@ export const NavBar: React.FC = () => { setMenuTree([]); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [context]); + }, [authContext]); - const username = ( - fullName !== '' ?
{fullName}
: <> + const rightSideInfo = ( +
{fullName} | {timestamp}
); - return (fullName !== '' && menuTree.length !== 0 ? : <>); + return (fullName !== '' && menuTree.length !== 0 ? : <>); };