Testing menu button

app/src/App.tsx

@@ -15,7 +15,7 @@ type EventPayloadExtended = EventPayload & { accessToken: string };
 const App: React.FC<unknown> = () => {
   const httpClient: AxiosInstance = useHttpClient();
   const appContext = useAppContext();
-  const { instance } = useMsal();
+  const { inProgress, instance } = useMsal();
   const handleSignIn = async () => {
     await instance.loginRedirect({
       scopes: [`api://${import.meta.env.VITE_CLIENT_ID}/user_impersonation`]
@@ -32,7 +32,6 @@ const App: React.FC<unknown> = () => {
         const response: AxiosResponse = await httpClient.get(
           `api/featureFlags?keys=${featureFlagKeys}&label=${import.meta.env.MODE}`
         );
-        console.log(response.data);
         const featureFlags: { key: string; enabled: boolean }[] = response.data;
 
         if (featureFlags.length > 0) {
@@ -87,7 +86,11 @@ const App: React.FC<unknown> = () => {
 
   return (
     <div className="container mx-auto">
-      <SiteNav handleSignIn={handleSignIn} handleSignOut={handleSignOut} />
+      <SiteNav
+        handleSignIn={handleSignIn}
+        handleSignOut={handleSignOut}
+        inProgress={inProgress}
+      />
       <Routes>
         {useFeatureFlag('flying-pilots')?.enabled && (
           <Route path="/" element={<Pilots />} />

app/src/components/pilotForm/PilotForm.tsx

@@ -25,7 +25,7 @@ import { IPilotFormProps } from './IPilotFormProps';
 import PilotFormCertificates from '../pilotFormCertificates/PilotFormCertificates';
 import PilotFormEndorsements from '../pilotFormEndorsements/PilotFormEndorsements';
 import { Person } from '@microsoft/microsoft-graph-types';
-import { AxiosInstance, AxiosResponse } from 'axios';
+import axios, { AxiosError, AxiosInstance, AxiosResponse } from 'axios';
 import { useHttpClient } from '../../hooks/httpClient/UseHttpClient';
 import { useAccessToken } from '../../hooks/accessToken/UseAcessToken';
 import { IPilotFormCertificates } from '../pilotFormCertificates/IPilotFormCertificates';
@@ -41,6 +41,7 @@ const PilotForm: React.FC<IPilotFormProps> = ({
   const [peoplePickerResults, setPeoplePickerResults] = useState<Person[]>([]);
   const [isPeoplePickerLoading, setIsPeoplePickerLoading] =
     useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
   const { getAccessToken } = useAccessToken();
   const methods = useForm();
 
@@ -82,14 +83,31 @@ const PilotForm: React.FC<IPilotFormProps> = ({
   };
 
   const onSubmit = async (data: unknown) => {
-    console.log(data);
+    try {
+      setIsLoading(true);
 
-    const accessToken: string = await getAccessToken();
-    const response: AxiosResponse = await httpClient.post(`api/pilots`, data, {
-      headers: {
-        Authorization: accessToken
+      const accessToken: string = await getAccessToken();
+      const response: AxiosResponse = await httpClient.post(
+        `api/pilots`,
+        data,
+        {
+          headers: {
+            Authorization: accessToken
+          }
+        }
+      );
+
+      if (response) console.log(response);
+    } catch (error) {
+      if (axios.isAxiosError(error)) {
+        const errResp = error.response;
+
+        console.log(errResp?.data.message);
+      } else {
       }
-    });
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   useEffect(() => {
@@ -428,6 +446,7 @@ const PilotForm: React.FC<IPilotFormProps> = ({
               <div>
                 <Button
                   className="flex items-center gap-3"
+                  loading={isLoading}
                   variant="filled"
                   type="submit"
                 >

app/src/components/pilots/Pilots.tsx

@@ -4,7 +4,11 @@ import {
   Button,
   Card,
   PlusIcon,
-  Typography
+  Typography,
+  Menu,
+  MenuItem,
+  MenuHandler,
+  MenuList
 } from '@noahspan/noahspan-components';
 
 const Pilots: React.FC<unknown> = () => {
@@ -14,26 +18,37 @@ const Pilots: React.FC<unknown> = () => {
   };
 
   return (
-    <Card className="mt-6 p-6">
-      <div className="grid grid-cols-1 gap-4">
+    // <Card className="mt-6 p-6">
+    <div className="grid grid-cols-1 gap-4">
+      <div className="col-span-1">
         <Typography variant="h2">Pilots</Typography>
+      </div>
+      <div className="col-span-1 justify-self-end">
         <Button
-          className="flex items-center gap-3"
+          className="flex justify-center gap-3"
           variant="filled"
           onClick={onOpenCloseDrawer}
           data-testid="add-pilot-button"
-          fullWidth={true}
         >
           <PlusIcon size="lg" />
           Add Pilot
         </Button>
-
-        <PilotForm
-          isDrawerOpen={isDrawerOpen}
-          onOpenCloseDrawer={onOpenCloseDrawer}
-        />
+        <Menu>
+          <MenuHandler>
+            <Button>Menu</Button>
+          </MenuHandler>
+          <MenuList>
+            <MenuItem>List Item 1</MenuItem>
+          </MenuList>
+        </Menu>
       </div>
-    </Card>
+
+      <PilotForm
+        isDrawerOpen={isDrawerOpen}
+        onOpenCloseDrawer={onOpenCloseDrawer}
+      />
+    </div>
+    //</Card>
   );
 };
 

app/src/components/siteNav/SiteNav.tsx

@@ -1,3 +1,4 @@
+import { ISiteNavProps } from './ISiteNavProps';
 // import { Link as ReactRouterLink } from 'react-router-dom';
 import { useAppContext } from '../../hooks/appContext/UseAppContext';
 import {
@@ -12,19 +13,17 @@ import {
   NavbarMenu,
   NavbarItemProps,
   PlaneIcon,
+  Spinner,
   Typography
 } from '@noahspan/noahspan-components';
 import { useIsAuthenticated } from '@azure/msal-react';
+import { InteractionStatus } from '@azure/msal-browser';
 
-interface SiteNavProps {
-  handleSignIn: () => void;
-  handleSignOut: () => void;
-}
-
-const SiteNav: React.FC<SiteNavProps> = ({
+const SiteNav: React.FC<ISiteNavProps> = ({
   handleSignIn,
-  handleSignOut
-}: SiteNavProps) => {
+  handleSignOut,
+  inProgress
+}: ISiteNavProps) => {
   const appContext = useAppContext();
   const isAuthenticated = useIsAuthenticated();
   const navItems: NavbarItemProps[] = [
@@ -47,22 +46,25 @@ const SiteNav: React.FC<SiteNavProps> = ({
             <Menu placement="bottom-end">
               <MenuHandler>
                 <div>
-                  <Typography>
+                  <Button variant="text" size="sm">
                     {appContext.state.userProfile.displayName}
-                  </Typography>
+                  </Button>
                 </div>
               </MenuHandler>
               <MenuList>
-                <MenuItem>
-                  <Button variant="text" size="sm" onClick={handleSignOut}>
-                    Sign Out
-                  </Button>
+                <MenuItem onClick={handleSignOut}>
+                  <Typography variant="small">Sign Out</Typography>
                 </MenuItem>
               </MenuList>
             </Menu>
           )}
           {!isAuthenticated && (
-            <Button variant="text" size="sm" onClick={handleSignIn}>
+            <Button
+              variant="text"
+              size="sm"
+              onClick={handleSignIn}
+              loading={inProgress === InteractionStatus.Login ? true : false}
+            >
               Sign In
             </Button>
           )}

app/src/hooks/accessToken/UseAcessToken.tsx

@@ -15,7 +15,7 @@ export const useAccessToken = () => {
     try {
       const response: AuthenticationResult =
         await instance.acquireTokenSilent(tokenRequest);
-      console.log(response.accessToken);
+
       return `Bearer ${response.accessToken}`;
     } catch (error) {
       if (error instanceof InteractionRequiredAuthError) {