Features/15 add azure app configuration (#16)

* Adding app config module

* adding app context

* adding app context and feature flag hooks

---------

Co-authored-by: Noah Spannbauer <nspannbauer@sensonix.com>

app/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@azure/msal-react": "^2.0.15",
     "@nextui-org/react": "^2.3.6",
+    "axios": "^1.7.2",
     "framer-motion": "^11.1.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

app/src/App.tsx

@@ -1,16 +1,40 @@
+import { useEffect } from 'react';
 import { Route, Routes } from 'react-router-dom';
-import Flights from './components/flights/Flights';
-import Logbook from './components/logbook/Logbook';
-import Checklists from './components/checklists/Checklists';
 import Pilots from './components/pilots/Pilots';
+import { useAppContext } from './hooks/appContext/UseAppContext';
+import axios, { AxiosResponse } from 'axios';
+import { useFeatureFlag } from './hooks/featureFlag/UseFeatureFlag';
 
 const App: React.FC<unknown> = () => {
+  const appContext = useAppContext();
+
+  useEffect(() => {
+    const getFeatureFlags = async () => {
+      try {
+        const response: AxiosResponse = await axios.get(
+          `http://localhost:7071/api/featureFlags?key=flying*&label=${process.env.NODE_ENV}`
+        );
+        const featureFlags: unknown[] = response.data;
+
+        if (featureFlags.length > 0) {
+          appContext.dispatch({
+            type: 'SET_FEATURE_FLAGS',
+            payload: featureFlags
+          });
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    };
+
+    getFeatureFlags();
+  }, []);
+
   return (
     <Routes>
-      <Route path="/" element={<Flights />} />
-      <Route path="logbook" element={<Logbook />} />
-      <Route path="checklists" element={<Checklists />} />
-      <Route path="pilots" element={<Pilots />} />
+      {useFeatureFlag('flying-pilots')?.enabled && (
+        <Route path="/" element={<Pilots />} />
+      )}
     </Routes>
   );
 };

app/src/components/siteNav/SiteNav.tsx

@@ -9,6 +9,7 @@ import {
 } from '@nextui-org/react';
 import { Link as ReactRouterLink } from 'react-router-dom';
 import { useIsAuthenticated, useMsal } from '@azure/msal-react';
+import { useAppContext } from '../../hooks/appContext/UseAppContext';
 
 const SiteNav: React.FC<unknown> = () => {
   const isAuthenticated = useIsAuthenticated();
@@ -16,6 +17,7 @@ const SiteNav: React.FC<unknown> = () => {
   const initializeLogin = () => {
     instance.loginRedirect();
   };
+  const appContext = useAppContext();
 
   console.log(accounts);
 
@@ -24,24 +26,13 @@ const SiteNav: React.FC<unknown> = () => {
       <NavbarBrand>Site Logo Goes Here</NavbarBrand>
       <NavbarContent justify="center">
         <NavbarItem>
-          <Link>
-            <ReactRouterLink to="/">Flights</ReactRouterLink>
-          </Link>
-        </NavbarItem>
-        <NavbarItem>
-          <Link>
-            <ReactRouterLink to="/logbook">Logbook</ReactRouterLink>
-          </Link>
-        </NavbarItem>
-        <NavbarItem>
-          <Link>
-            <ReactRouterLink to="/checklists">Checklists</ReactRouterLink>
-          </Link>
-        </NavbarItem>
-        <NavbarItem>
-          <Link>
-            <ReactRouterLink to="/pilots">Pilots</ReactRouterLink>
-          </Link>
+          {appContext.state.featureFlags.find(
+            (featureFlag) => featureFlag.id === 'flying-pilots'
+          )?.enabled && (
+            <Link>
+              <ReactRouterLink to="/">Pilots</ReactRouterLink>
+            </Link>
+          )}
         </NavbarItem>
       </NavbarContent>
       <NavbarContent justify="end">

app/src/context/appContext/AppContext.tsx

@@ -0,0 +1,5 @@
+import { Context, createContext } from 'react';
+import { IAppContextProps } from './IAppContextProps';
+
+export const AppContext: Context<IAppContextProps> =
+  createContext<IAppContextProps>({} as IAppContextProps);

app/src/context/appContext/AppContextProvider.tsx

@@ -0,0 +1,29 @@
+import { useMemo, useReducer } from 'react';
+import { AppContext } from './AppContext';
+import { IAppContextProviderProps } from './IAppContextProviderProps';
+import { IAppContextProps } from './IAppContextProps';
+import { IAppContextState } from './IAppContextState';
+import { reducer } from './reducer';
+
+const AppContextProvider: React.FC<IAppContextProviderProps> = (
+  props: IAppContextProviderProps
+) => {
+  const intialState: IAppContextState = {
+    featureFlags: []
+  };
+  const [state, dispatch] = useReducer(reducer, intialState);
+  const contextValue: IAppContextProps = useMemo(() => {
+    return {
+      state,
+      dispatch
+    };
+  }, [state, dispatch]);
+
+  return (
+    <AppContext.Provider value={contextValue}>
+      {props.children}
+    </AppContext.Provider>
+  );
+};
+
+export default AppContextProvider;

app/src/context/appContext/IAppContextProps.ts

@@ -0,0 +1,7 @@
+import { Action } from './reducer';
+import { IAppContextState } from './IAppContextState';
+
+export interface IAppContextProps {
+  state: IAppContextState;
+  dispatch: React.Dispatch<Action>;
+}

app/src/context/appContext/IAppContextProviderProps.ts

@@ -0,0 +1,3 @@
+export interface IAppContextProviderProps {
+  children: React.ReactNode;
+}

app/src/context/appContext/IAppContextState.ts

@@ -0,0 +1,3 @@
+export interface IAppContextState {
+  featureFlags: unknown[];
+}

app/src/context/appContext/reducer.ts

@@ -0,0 +1,20 @@
+import { IAppContextState } from './IAppContextState';
+
+export type Action = { type: 'SET_FEATURE_FLAGS'; payload: unknown[] };
+
+export const reducer = (
+  state: IAppContextState,
+  action: Action
+): IAppContextState => {
+  switch (action.type) {
+    case 'SET_FEATURE_FLAGS': {
+      return {
+        ...state,
+        featureFlags: action.payload
+      };
+    }
+    default: {
+      return state;
+    }
+  }
+};

app/src/hooks/appContext/UseAppContext.tsx

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { AppContext } from '../../context/appContext/AppContext';
+
+export const useAppContext = () => {
+  const { state, dispatch } = useContext(AppContext);
+
+  return {
+    state,
+    dispatch
+  };
+};

app/src/hooks/featureFlag/UseFeatureFlag.tsx

@@ -0,0 +1,10 @@
+import { useAppContext } from '../appContext/UseAppContext';
+
+export const useFeatureFlag = (featureFlagId: string) => {
+  const appContext = useAppContext();
+  const featureFlag = appContext.state.featureFlags.find(
+    (featureFlag) => featureFlag.id === featureFlagId
+  );
+
+  return featureFlag;
+};

app/src/main.tsx

@@ -4,8 +4,9 @@ import { MsalProvider } from '@azure/msal-react';
 import { Configuration, PublicClientApplication } from '@azure/msal-browser';
 import { NextUIProvider } from '@nextui-org/react';
 import App from './App.tsx';
-import './index.css';
 import { BrowserRouter } from 'react-router-dom';
+import AppContextProvider from './context/appContext/AppContextProvider.tsx';
+import './index.css';
 
 const configuration: Configuration = {
   auth: {
@@ -21,11 +22,13 @@ const pca = new PublicClientApplication(configuration);
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <MsalProvider instance={pca}>
-      <NextUIProvider>
-        <BrowserRouter>
-          <App />
-        </BrowserRouter>
-      </NextUIProvider>
+      <AppContextProvider>
+        <NextUIProvider>
+          <BrowserRouter>
+            <App />
+          </BrowserRouter>
+        </NextUIProvider>
+      </AppContextProvider>
     </MsalProvider>
   </React.StrictMode>
 );

app/tailwind.config.js

@@ -5,7 +5,7 @@ export default {
   content: [
     './index.html',
     './src/**/*.{js,ts,jsx,tsx}',
-    './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}'
+    '../node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}'
   ],
   theme: {
     extend: {}