From 4d9c15bc8a1f09100144cc27c6961c45193f2f69 Mon Sep 17 00:00:00 2001 From: Noah Spannbauer Date: Tue, 28 May 2024 12:33:39 -0500 Subject: [PATCH] adding app context and feature flag hooks --- api/package.json | 2 +- api/src/app.controller.ts | 4 +-- app/package.json | 1 + app/src/App.tsx | 34 +++++++++++++++++-- app/src/components/siteNav/SiteNav.tsx | 27 +++++---------- .../context/appContext/AppContextProvider.tsx | 19 ++++++----- .../context/appContext/IAppContextProps.ts | 3 ++ app/src/hooks/appContext/UseAppContext.tsx | 11 ++++++ app/src/hooks/featureFlag/UseFeatureFlag.tsx | 10 ++++++ app/src/main.tsx | 15 ++++---- app/tailwind.config.js | 2 +- package-lock.json | 9 ++--- 12 files changed, 93 insertions(+), 44 deletions(-) create mode 100644 app/src/hooks/appContext/UseAppContext.tsx create mode 100644 app/src/hooks/featureFlag/UseFeatureFlag.tsx diff --git a/api/package.json b/api/package.json index 72c32ac..5909808 100644 --- a/api/package.json +++ b/api/package.json @@ -26,7 +26,7 @@ "@nestjs/common": "^10.0.0", "@nestjs/core": "^10.0.0", "@nestjs/platform-express": "^10.0.0", - "@noahspan/noahspan-modules": "^0.1.1", + "@noahspan/noahspan-modules": "^0.1.2", "@schematics/angular": "^17.3.7", "dotenv": "^16.4.5", "reflect-metadata": "0.1.13", diff --git a/api/src/app.controller.ts b/api/src/app.controller.ts index 885f3e1..461dc73 100644 --- a/api/src/app.controller.ts +++ b/api/src/app.controller.ts @@ -10,8 +10,8 @@ export class AppController { private readonly authService: AuthService ) {} - @Get('featureFlag') - async getFeatureFlag(@Query() query: any): Promise { + @Get('featureFlags') + async getFeatureFlags(@Query() query: any): Promise { try { const token: string = await this.authService.getToken( 'client_credentials', diff --git a/app/package.json b/app/package.json index a6b04f4..b9062cf 100644 --- a/app/package.json +++ b/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", diff --git a/app/src/App.tsx b/app/src/App.tsx index d6a17af..c1d86f2 100644 --- a/app/src/App.tsx +++ b/app/src/App.tsx @@ -1,12 +1,40 @@ +import { useEffect } from 'react'; import { Route, Routes } from 'react-router-dom'; -import Logbook from './components/logbook/Logbook'; 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 = () => { + 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 ( - } /> - } /> + {useFeatureFlag('flying-pilots')?.enabled && ( + } /> + )} ); }; diff --git a/app/src/components/siteNav/SiteNav.tsx b/app/src/components/siteNav/SiteNav.tsx index 0bd14e8..22cb5ee 100644 --- a/app/src/components/siteNav/SiteNav.tsx +++ b/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 = () => { const isAuthenticated = useIsAuthenticated(); @@ -16,6 +17,7 @@ const SiteNav: React.FC = () => { const initializeLogin = () => { instance.loginRedirect(); }; + const appContext = useAppContext(); console.log(accounts); @@ -24,24 +26,13 @@ const SiteNav: React.FC = () => { Site Logo Goes Here - - Flights - - - - - Logbook - - - - - Checklists - - - - - Pilots - + {appContext.state.featureFlags.find( + (featureFlag) => featureFlag.id === 'flying-pilots' + )?.enabled && ( + + Pilots + + )} diff --git a/app/src/context/appContext/AppContextProvider.tsx b/app/src/context/appContext/AppContextProvider.tsx index f67f60b..6e51c50 100644 --- a/app/src/context/appContext/AppContextProvider.tsx +++ b/app/src/context/appContext/AppContextProvider.tsx @@ -1,5 +1,9 @@ +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 = ( props: IAppContextProviderProps @@ -8,15 +12,12 @@ const AppContextProvider: React.FC = ( featureFlags: [] }; const [state, dispatch] = useReducer(reducer, intialState); - const contextValue = (IAppContextProps = useMemo(() => { - return ( - { - state, - dispatch - }, - [state, dispatch] - ); - })); + const contextValue: IAppContextProps = useMemo(() => { + return { + state, + dispatch + }; + }, [state, dispatch]); return ( diff --git a/app/src/context/appContext/IAppContextProps.ts b/app/src/context/appContext/IAppContextProps.ts index 227b871..fb9a270 100644 --- a/app/src/context/appContext/IAppContextProps.ts +++ b/app/src/context/appContext/IAppContextProps.ts @@ -1,3 +1,6 @@ +import { Action } from './reducer'; +import { IAppContextState } from './IAppContextState'; + export interface IAppContextProps { state: IAppContextState; dispatch: React.Dispatch; diff --git a/app/src/hooks/appContext/UseAppContext.tsx b/app/src/hooks/appContext/UseAppContext.tsx new file mode 100644 index 0000000..7246910 --- /dev/null +++ b/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 + }; +}; diff --git a/app/src/hooks/featureFlag/UseFeatureFlag.tsx b/app/src/hooks/featureFlag/UseFeatureFlag.tsx new file mode 100644 index 0000000..006f7fa --- /dev/null +++ b/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; +}; diff --git a/app/src/main.tsx b/app/src/main.tsx index f10596f..26d4d2f 100644 --- a/app/src/main.tsx +++ b/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( - - - - - + + + + + + + ); diff --git a/app/tailwind.config.js b/app/tailwind.config.js index 7b9c96b..f3089eb 100644 --- a/app/tailwind.config.js +++ b/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: {} diff --git a/package-lock.json b/package-lock.json index 0799469..32ccef8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -37,7 +37,7 @@ "@nestjs/common": "^10.0.0", "@nestjs/core": "^10.0.0", "@nestjs/platform-express": "^10.0.0", - "@noahspan/noahspan-modules": "^0.1.1", + "@noahspan/noahspan-modules": "^0.1.2", "@schematics/angular": "^17.3.7", "dotenv": "^16.4.5", "reflect-metadata": "0.1.13", @@ -67,6 +67,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", @@ -4402,9 +4403,9 @@ "link": true }, "node_modules/@noahspan/noahspan-modules": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/@noahspan/noahspan-modules/-/noahspan-modules-0.1.1.tgz", - "integrity": "sha512-9rljhDl2AZeIMWZgTR59pFvC7N3i+j332vsfNnHMAh5ApaNjgmWZ6La/8MkGJmcZ8pxT9cqXDaH27A8YWKbJBQ==", + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/@noahspan/noahspan-modules/-/noahspan-modules-0.1.2.tgz", + "integrity": "sha512-cD1PUgcFvy/9LTvxfzjk43+n+wZ4eTfWIZk1XFyM+NjjvP9cks2QnpQJ+di+7LYuzO8EPRX0/Ln34ywwwOCZaQ==", "dependencies": { "@azure/app-configuration": "^1.6.0", "@nestjs/common": "^10.0.0",