use the timestamp in the navigation bar

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<string>('');
   const [fullName, setFullName] = useState<string>('');
   const [menuTree, setMenuTree] = useState<any>();
-  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 !== '' ? <div>{fullName}</div> : <></>
+  const rightSideInfo = (
+    <div>{fullName} | {timestamp}</div>
   );
 
-  return (fullName !== '' && menuTree.length !== 0 ? <Menubar model={menuTree} end={username} /> : <></>);
+  return (fullName !== '' && menuTree.length !== 0 ? <Menubar model={menuTree} end={rightSideInfo} /> : <></>);
 };