setting pilot page behind protected route

app/src/App.tsx

@@ -1,56 +1,32 @@
-import { useEffect } from 'react';
-import { Route, Routes } from 'react-router-dom';
+import { Navigate, Route, Routes } from 'react-router-dom';
 import Pilots from './components/pilots/Pilots';
 import Logbook from './components/logbook/Logbook';
-import { useAppContext } from './hooks/appContext/UseAppContext';
-import { AxiosInstance, AxiosResponse } from 'axios';
-import { useHttpClient } from './hooks/httpClient/UseHttpClient';
-import { useFeatureFlag } from './hooks/featureFlag/UseFeatureFlag';
 import SiteNav from './components/siteNav/SiteNav';
-import { IPublicClientApplication } from '@azure/msal-browser';
-import { MsalProvider } from '@azure/msal-react';
+import { useIsAuthenticated } from '@azure/msal-react';
 
-interface AppProps {
-  pca: IPublicClientApplication
+interface ProtectedRouteProps {
+  children: React.ReactNode;
 }
 
-const App: React.FC<AppProps> = ({ pca }: AppProps) => {
-  const httpClient: AxiosInstance = useHttpClient();
-  const appContext = useAppContext();
+const App = () => {
+  const isAuthenticated = useIsAuthenticated()
 
-  // useEffect(() => {
-  //   const getFeatureFlags = async () => {
-  //     try {
-  //       const featureFlagKeys: string = 'flying-pilots';
-  //       const response: AxiosResponse = await httpClient.get(
-  //         `api/featureFlags?keys=${featureFlagKeys}&label=${import.meta.env.MODE}`
-  //       );
-  //       const featureFlags: { key: string; enabled: boolean }[] = response.data;
-
-  //       if (featureFlags.length > 0) {
-  //         appContext.dispatch({
-  //           type: 'SET_FEATURE_FLAGS',
-  //           payload: featureFlags
-  //         });
-  //       }
-  //     } catch (error) {
-  //       console.log(error);
-  //     }
-  //   };
-
-  //   getFeatureFlags();
-  // }, []);
+  const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
+    return isAuthenticated ? children : <Navigate to='/' />
+  }
 
   return (
-    <MsalProvider instance={pca}>
+    <>
       <SiteNav />
       <Routes>
-        {/* {useFeatureFlag('flying-pilots')?.enabled && ( */}
-        <Route path="/pilots" element={<Pilots />} />
-        {/* )} */}
+        <Route path="/pilots" element={
+          <ProtectedRoute>
+            <Pilots />
+          </ProtectedRoute>
+        } />
         <Route path="/" element={<Logbook />} />
       </Routes>
-    </MsalProvider>
+    </>
   );
 };
 

app/src/components/logbook/Logbook.tsx

@@ -32,7 +32,7 @@ const Logbook: React.FC<unknown> = () => {
       dispatch({ type: 'SET_IS_LOADING', payload: true });
 
       const response: AxiosResponse = await httpClient.get(`api/logs`);
-      console.log(response)
+
       if (response.data.length > 0) {
         dispatch({ type: 'SET_ENTRIES', payload: response.data });
 

app/src/components/siteNav/SiteNav.tsx

@@ -27,22 +27,30 @@ type EventPayloadExtended = EventPayload & { accessToken: string };
 const SiteNav: React.FC<unknown> = () => {
   const [loading, setLoading] = useState<boolean>(false);
   const [userPhoto, setUserPhoto] = useState<string>();
+  const [pages, setPages] = useState<{ name: string; url: string; }[]>([]);
   const httpClient: AxiosInstance = useHttpClient();
   const appContext = useAppContext();
   const isAuthenticated = useIsAuthenticated();
   const { getAccessToken } = useAccessToken();
   const { inProgress, instance } = useMsal();
   const navigate = useNavigate();
-  const pages = [
-    {
-      name: 'Logbook',
-      url: '/'
-    },
-    {
-      name: 'Pilots',
-      url: '/pilots'
+  const getPages = () => {
+    const pages = [
+      {
+        name: 'Logbook',
+        url: '/'
+      }
+    ];
+
+    if (isAuthenticated) {
+      pages.push({
+        name: 'Pilots',
+        url: '/pilots'
+      })
     }
-  ];
+
+    setPages(pages)
+  };
   const handleSignIn = () => {
     instance.loginRedirect({
       scopes: [`api://${import.meta.env.VITE_CLIENT_ID}/user_impersonation`]
@@ -125,9 +133,14 @@ const SiteNav: React.FC<unknown> = () => {
       Object.keys(appContext.state.userProfile).length === 0
     ) {
       setUserProfile();
+      getPages();
     }
   }, [isAuthenticated]);
 
+  useEffect(() => {
+    getPages();
+  }, [])
+
   return (
     <Navbar
       handlePageClick={handlePageClick}

app/src/main.tsx

@@ -28,11 +28,13 @@ msalInstance.initialize().then(() => {
 
   ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
-      <AppContextProvider>
-        <BrowserRouter>
-          <App pca={msalInstance} />
-        </BrowserRouter>
-      </AppContextProvider>
+      <MsalProvider instance={msalInstance}>
+        <AppContextProvider>
+          <BrowserRouter>
+            <App />
+          </BrowserRouter>
+        </AppContextProvider>
+      </MsalProvider>
     </React.StrictMode>
   );
 })