From 80a86a281c8570ca4277aaa65156aa8f5bee6ee8 Mon Sep 17 00:00:00 2001 From: Noah Spannbauer Date: Sun, 26 May 2024 19:28:28 -0500 Subject: [PATCH 1/3] Adding app config module --- .DS_Store | Bin 8196 -> 8196 bytes api/.gitignore | 2 + api/local.settings.json | 7 --- api/package.json | 1 + api/src/app.controller.ts | 11 ++-- api/src/app.module.ts | 7 ++- package-lock.json | 123 +++++++++++++++++++++++++++++++++++++- package.json | 7 ++- 8 files changed, 142 insertions(+), 16 deletions(-) delete mode 100644 api/local.settings.json diff --git a/.DS_Store b/.DS_Store index 12c0f7d6ce865a651e11230d0d89b71c218a7667..1e588e319ae45e4e86fc4e67ad69e6d8a6046aa5 100644 GIT binary patch delta 78 zcmZp1XmOa}FUrrrz`)4BAi&_6lb@WFlb;0S3v4W$#y+uucQZQ&3kM_rWEX**ldT2K iHg6QPWZcXy;>$R>M|9a{b)E;zo7pA4v23hhX9fTg4i&Hf delta 381 zcmZp1XmOa}FDk~sz`)4BAi%(o$&klT!cfGJ%%Hcia2or>2Hwr=94s8tAQe0edJL%y z#SA&fsu;2+vxq28<`>u|%ny_=0P0Nznot5%lgdyuIZr@p@+)D%$wvjuOa(CIAvQ5& z0Zq+k$n(s}Pfp6oPXgKnbP7{Ckk;G$LBNI4k`3q}khQ5G=b=NHt NCTj_YQ)0{|MgV{xVaEUf diff --git a/api/.gitignore b/api/.gitignore index 4b56acf..ba2c55b 100644 --- a/api/.gitignore +++ b/api/.gitignore @@ -54,3 +54,5 @@ pids # Diagnostic reports (https://nodejs.org/api/report.html) report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json + +local.settings.json diff --git a/api/local.settings.json b/api/local.settings.json deleted file mode 100644 index 4e3da2c..0000000 --- a/api/local.settings.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "IsEncrypted": false, - "Values": { - "AzureWebJobsStorage": "", - "FUNCTIONS_WORKER_RUNTIME": "node" - } -} diff --git a/api/package.json b/api/package.json index 2affa4d..0f930ca 100644 --- a/api/package.json +++ b/api/package.json @@ -26,6 +26,7 @@ "@nestjs/common": "^10.0.0", "@nestjs/core": "^10.0.0", "@nestjs/platform-express": "^10.0.0", + "@noahspan/noahspan-modules": "^0.0.1", "@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 cce879e..5a0c91f 100644 --- a/api/src/app.controller.ts +++ b/api/src/app.controller.ts @@ -1,12 +1,15 @@ import { Controller, Get } from '@nestjs/common'; import { AppService } from './app.service'; +import { AzAppConfigService } from '@noahspan/noahspan-modules'; @Controller() export class AppController { - constructor(private readonly appService: AppService) {} + constructor(private readonly azAppConfigService: AzAppConfigService) {} - @Get() - getHello(): string { - return this.appService.getHello(); + @Get('featureFlag') + getFeatureFlag(key: string, label: string): string { + const featureFlag = this.azAppConfigService.getFeatureFlag(key, label); + console.log(process.env.AZ_APP_CONFIG_CONNECTION_STRING); + return 'blah'; } } diff --git a/api/src/app.module.ts b/api/src/app.module.ts index 4526e06..7b7ca2b 100644 --- a/api/src/app.module.ts +++ b/api/src/app.module.ts @@ -1,9 +1,14 @@ import { Module } from '@nestjs/common'; import { AppController } from './app.controller'; import { AppService } from './app.service'; +import { AzAppConfigModule } from '@noahspan/noahspan-modules'; @Module({ - imports: [], + imports: [ + AzAppConfigModule.register({ + connectionString: process.env.AZ_APP_CONFIG_CONNECTION_STRING + }) + ], controllers: [AppController], providers: [AppService] }) diff --git a/package-lock.json b/package-lock.json index 945a5c9..ecb14de 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,9 +9,12 @@ "version": "1.0.0", "workspaces": [ "api", - "client", + "app", "tests" ], + "dependencies": { + "@azure/app-configuration": "^1.6.0" + }, "devDependencies": { "@typescript-eslint/eslint-plugin": "^7.2.0", "@typescript-eslint/parser": "^7.2.0", @@ -34,6 +37,7 @@ "@nestjs/common": "^10.0.0", "@nestjs/core": "^10.0.0", "@nestjs/platform-express": "^10.0.0", + "@noahspan/noahspan-modules": "^0.0.1", "@schematics/angular": "^17.3.7", "dotenv": "^16.4.5", "reflect-metadata": "0.1.13", @@ -57,9 +61,36 @@ "typescript": "^5.1.3" } }, + "app": { + "name": "@noahspan/flying-client", + "version": "0.1.0", + "dependencies": { + "@azure/msal-react": "^2.0.15", + "@nextui-org/react": "^2.3.6", + "framer-motion": "^11.1.7", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-hook-form": "^7.51.4", + "react-router-dom": "^6.23.0" + }, + "devDependencies": { + "@types/react": "^18.2.66", + "@types/react-dom": "^18.2.22", + "@vitejs/plugin-react": "^4.2.1", + "autoprefixer": "^10.4.19", + "postcss": "^8.4.38", + "tailwindcss": "^3.4.3", + "typescript": "^5.2.2", + "vite": "^5.2.0" + }, + "engines": { + "node": ">=18.0.0" + } + }, "client": { "name": "@noahspan/flying-client", "version": "0.1.0", + "extraneous": true, "dependencies": { "@azure/msal-react": "^2.0.15", "@nextui-org/react": "^2.3.6", @@ -299,6 +330,27 @@ "node": ">=12.0.0" } }, + "node_modules/@azure/app-configuration": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@azure/app-configuration/-/app-configuration-1.6.0.tgz", + "integrity": "sha512-5Ae4SB0g4VbTnF7B+bwlkRLesRIYcaeg6e2Qxf0RlOEIetIgfAZiX6S5e7hD83X5RkwiPmzDm8rJm6HDpnVcvQ==", + "dependencies": { + "@azure/abort-controller": "^1.0.0", + "@azure/core-auth": "^1.3.0", + "@azure/core-client": "^1.5.0", + "@azure/core-http-compat": "^2.0.0", + "@azure/core-lro": "^2.5.1", + "@azure/core-paging": "^1.4.0", + "@azure/core-rest-pipeline": "^1.6.0", + "@azure/core-tracing": "^1.0.0", + "@azure/core-util": "^1.6.1", + "@azure/logger": "^1.0.0", + "tslib": "^2.2.0" + }, + "engines": { + "node": ">=18.0.0" + } + }, "node_modules/@azure/core-auth": { "version": "1.7.2", "resolved": "https://registry.npmjs.org/@azure/core-auth/-/core-auth-1.7.2.tgz", @@ -351,6 +403,55 @@ "node": ">=18.0.0" } }, + "node_modules/@azure/core-http-compat": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@azure/core-http-compat/-/core-http-compat-2.1.2.tgz", + "integrity": "sha512-5MnV1yqzZwgNLLjlizsU3QqOeQChkIXw781Fwh1xdAqJR5AA32IUaq6xv1BICJvfbHoa+JYcaij2HFkhLbNTJQ==", + "dependencies": { + "@azure/abort-controller": "^2.0.0", + "@azure/core-client": "^1.3.0", + "@azure/core-rest-pipeline": "^1.3.0" + }, + "engines": { + "node": ">=18.0.0" + } + }, + "node_modules/@azure/core-http-compat/node_modules/@azure/abort-controller": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@azure/abort-controller/-/abort-controller-2.1.2.tgz", + "integrity": "sha512-nBrLsEWm4J2u5LpAPjxADTlq3trDgVZZXHNKabeXZtpq3d3AbN/KGO82R87rdDz5/lYB024rtEf10/q0urNgsA==", + "dependencies": { + "tslib": "^2.6.2" + }, + "engines": { + "node": ">=18.0.0" + } + }, + "node_modules/@azure/core-lro": { + "version": "2.7.2", + "resolved": "https://registry.npmjs.org/@azure/core-lro/-/core-lro-2.7.2.tgz", + "integrity": "sha512-0YIpccoX8m/k00O7mDDMdJpbr6mf1yWo2dfmxt5A8XVZVVMz2SSKaEbMCeJRvgQ0IaSlqhjT47p4hVIRRy90xw==", + "dependencies": { + "@azure/abort-controller": "^2.0.0", + "@azure/core-util": "^1.2.0", + "@azure/logger": "^1.0.0", + "tslib": "^2.6.2" + }, + "engines": { + "node": ">=18.0.0" + } + }, + "node_modules/@azure/core-lro/node_modules/@azure/abort-controller": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@azure/abort-controller/-/abort-controller-2.1.2.tgz", + "integrity": "sha512-nBrLsEWm4J2u5LpAPjxADTlq3trDgVZZXHNKabeXZtpq3d3AbN/KGO82R87rdDz5/lYB024rtEf10/q0urNgsA==", + "dependencies": { + "tslib": "^2.6.2" + }, + "engines": { + "node": ">=18.0.0" + } + }, "node_modules/@azure/core-paging": { "version": "1.6.2", "resolved": "https://registry.npmjs.org/@azure/core-paging/-/core-paging-1.6.2.tgz", @@ -4297,9 +4398,27 @@ } }, "node_modules/@noahspan/flying-client": { - "resolved": "client", + "resolved": "app", "link": true }, + "node_modules/@noahspan/noahspan-modules": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/@noahspan/noahspan-modules/-/noahspan-modules-0.0.1.tgz", + "integrity": "sha512-VTJg2dGY/6q+6NxtngimxENPrKh/jRDmyR8fAhnZovE7+cgqZ2JjImrZAFqcNPZolheFLwLqM2A4O4oU35MHOQ==", + "dependencies": { + "@azure/app-configuration": "^1.6.0", + "@nestjs/common": "^10.0.0", + "@nestjs/core": "^10.0.0", + "@nestjs/platform-express": "^10.0.0", + "reflect-metadata": "^0.2.0", + "rxjs": "^7.8.1" + } + }, + "node_modules/@noahspan/noahspan-modules/node_modules/reflect-metadata": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.2.2.tgz", + "integrity": "sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q==" + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", diff --git a/package.json b/package.json index 5aba11d..a5e3470 100644 --- a/package.json +++ b/package.json @@ -14,15 +14,18 @@ "devDependencies": { "@typescript-eslint/eslint-plugin": "^7.2.0", "@typescript-eslint/parser": "^7.2.0", - "eslint-plugin-react-hooks": "^4.6.0", - "eslint-plugin-react-refresh": "^0.4.6", "eslint": "^8.42.0", "eslint-config-prettier": "^9.0.0", + "eslint-plugin-react-hooks": "^4.6.0", + "eslint-plugin-react-refresh": "^0.4.6", "husky": "^9.0.11", "lint-staged": "^15.2.2", "prettier": "3.2.5" }, "lint-staged": { "**/*": "prettier --write \"**/src/**/*.ts\" \"**/test/**/*.ts\" --ignore-unknown" + }, + "dependencies": { + "@azure/app-configuration": "^1.6.0" } } -- 2.49.1 From bea4e7f04b1a0415bd317f3a48b9246500956298 Mon Sep 17 00:00:00 2001 From: Noah Spannbauer Date: Mon, 27 May 2024 18:55:35 -0500 Subject: [PATCH 2/3] adding app context --- api/package.json | 2 +- api/src/app.controller.ts | 33 ++++++++++--- api/src/app.module.ts | 9 ++-- app/src/App.tsx | 4 -- app/src/context/appContext/AppContext.tsx | 5 ++ .../context/appContext/AppContextProvider.tsx | 28 +++++++++++ .../context/appContext/IAppContextProps.ts | 4 ++ .../appContext/IAppContextProviderProps.ts | 3 ++ .../context/appContext/IAppContextState.ts | 3 ++ app/src/context/appContext/reducer.ts | 20 ++++++++ package-lock.json | 49 +++++++++++++++---- 11 files changed, 136 insertions(+), 24 deletions(-) create mode 100644 app/src/context/appContext/AppContext.tsx create mode 100644 app/src/context/appContext/AppContextProvider.tsx create mode 100644 app/src/context/appContext/IAppContextProps.ts create mode 100644 app/src/context/appContext/IAppContextProviderProps.ts create mode 100644 app/src/context/appContext/IAppContextState.ts create mode 100644 app/src/context/appContext/reducer.ts diff --git a/api/package.json b/api/package.json index 0f930ca..72c32ac 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.0.1", + "@noahspan/noahspan-modules": "^0.1.1", "@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 5a0c91f..885f3e1 100644 --- a/api/src/app.controller.ts +++ b/api/src/app.controller.ts @@ -1,15 +1,34 @@ -import { Controller, Get } from '@nestjs/common'; +import { Controller, Get, Query } from '@nestjs/common'; import { AppService } from './app.service'; -import { AzAppConfigService } from '@noahspan/noahspan-modules'; +import { AppConfigService, AuthService } from '@noahspan/noahspan-modules'; +import { FeatureFlagValue } from '@azure/app-configuration'; @Controller() export class AppController { - constructor(private readonly azAppConfigService: AzAppConfigService) {} + constructor( + private readonly appConfigService: AppConfigService, + private readonly authService: AuthService + ) {} @Get('featureFlag') - getFeatureFlag(key: string, label: string): string { - const featureFlag = this.azAppConfigService.getFeatureFlag(key, label); - console.log(process.env.AZ_APP_CONFIG_CONNECTION_STRING); - return 'blah'; + async getFeatureFlag(@Query() query: any): Promise { + try { + const token: string = await this.authService.getToken( + 'client_credentials', + process.env.CLIENT_ID, + process.env.CLIENT_SECRET, + 'https://azconfig.io' + ); + const featureFlags: FeatureFlagValue[] = + await this.appConfigService.getFeatureFlags( + token, + `${query.key}`, + query.label + ); + + return featureFlags; + } catch (error) { + console.log(error); + } } } diff --git a/api/src/app.module.ts b/api/src/app.module.ts index 7b7ca2b..662c93a 100644 --- a/api/src/app.module.ts +++ b/api/src/app.module.ts @@ -1,12 +1,15 @@ import { Module } from '@nestjs/common'; import { AppController } from './app.controller'; import { AppService } from './app.service'; -import { AzAppConfigModule } from '@noahspan/noahspan-modules'; +import { AppConfigModule, AuthModule } from '@noahspan/noahspan-modules'; @Module({ imports: [ - AzAppConfigModule.register({ - connectionString: process.env.AZ_APP_CONFIG_CONNECTION_STRING + AppConfigModule.register({ + url: process.env.APP_CONFIG_URL + }), + AuthModule.register({ + tenantId: process.env.TENANT_ID }) ], controllers: [AppController], diff --git a/app/src/App.tsx b/app/src/App.tsx index 3331d63..d6a17af 100644 --- a/app/src/App.tsx +++ b/app/src/App.tsx @@ -1,15 +1,11 @@ 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'; const App: React.FC = () => { return ( - } /> } /> - } /> } /> ); diff --git a/app/src/context/appContext/AppContext.tsx b/app/src/context/appContext/AppContext.tsx new file mode 100644 index 0000000..cbf2a73 --- /dev/null +++ b/app/src/context/appContext/AppContext.tsx @@ -0,0 +1,5 @@ +import { Context, createContext } from 'react'; +import { IAppContextProps } from './IAppContextProps'; + +export const AppContext: Context = + createContext({} as IAppContextProps); diff --git a/app/src/context/appContext/AppContextProvider.tsx b/app/src/context/appContext/AppContextProvider.tsx new file mode 100644 index 0000000..f67f60b --- /dev/null +++ b/app/src/context/appContext/AppContextProvider.tsx @@ -0,0 +1,28 @@ +import { IAppContextProviderProps } from './IAppContextProviderProps'; +import { IAppContextState } from './IAppContextState'; + +const AppContextProvider: React.FC = ( + props: IAppContextProviderProps +) => { + const intialState: IAppContextState = { + featureFlags: [] + }; + const [state, dispatch] = useReducer(reducer, intialState); + const contextValue = (IAppContextProps = useMemo(() => { + return ( + { + state, + dispatch + }, + [state, dispatch] + ); + })); + + return ( + + {props.children} + + ); +}; + +export default AppContextProvider; diff --git a/app/src/context/appContext/IAppContextProps.ts b/app/src/context/appContext/IAppContextProps.ts new file mode 100644 index 0000000..227b871 --- /dev/null +++ b/app/src/context/appContext/IAppContextProps.ts @@ -0,0 +1,4 @@ +export interface IAppContextProps { + state: IAppContextState; + dispatch: React.Dispatch; +} diff --git a/app/src/context/appContext/IAppContextProviderProps.ts b/app/src/context/appContext/IAppContextProviderProps.ts new file mode 100644 index 0000000..b3a1fee --- /dev/null +++ b/app/src/context/appContext/IAppContextProviderProps.ts @@ -0,0 +1,3 @@ +export interface IAppContextProviderProps { + children: React.ReactNode; +} diff --git a/app/src/context/appContext/IAppContextState.ts b/app/src/context/appContext/IAppContextState.ts new file mode 100644 index 0000000..1803154 --- /dev/null +++ b/app/src/context/appContext/IAppContextState.ts @@ -0,0 +1,3 @@ +export interface IAppContextState { + featureFlags: unknown[]; +} diff --git a/app/src/context/appContext/reducer.ts b/app/src/context/appContext/reducer.ts new file mode 100644 index 0000000..775d371 --- /dev/null +++ b/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; + } + } +}; diff --git a/package-lock.json b/package-lock.json index ecb14de..0799469 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.0.1", + "@noahspan/noahspan-modules": "^0.1.1", "@schematics/angular": "^17.3.7", "dotenv": "^16.4.5", "reflect-metadata": "0.1.13", @@ -4402,14 +4402,15 @@ "link": true }, "node_modules/@noahspan/noahspan-modules": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/@noahspan/noahspan-modules/-/noahspan-modules-0.0.1.tgz", - "integrity": "sha512-VTJg2dGY/6q+6NxtngimxENPrKh/jRDmyR8fAhnZovE7+cgqZ2JjImrZAFqcNPZolheFLwLqM2A4O4oU35MHOQ==", + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@noahspan/noahspan-modules/-/noahspan-modules-0.1.1.tgz", + "integrity": "sha512-9rljhDl2AZeIMWZgTR59pFvC7N3i+j332vsfNnHMAh5ApaNjgmWZ6La/8MkGJmcZ8pxT9cqXDaH27A8YWKbJBQ==", "dependencies": { "@azure/app-configuration": "^1.6.0", "@nestjs/common": "^10.0.0", "@nestjs/core": "^10.0.0", "@nestjs/platform-express": "^10.0.0", + "axios": "^1.7.2", "reflect-metadata": "^0.2.0", "rxjs": "^7.8.1" } @@ -6971,8 +6972,7 @@ "node_modules/asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", - "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==", - "dev": true + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" }, "node_modules/autoprefixer": { "version": "10.4.19", @@ -7011,6 +7011,16 @@ "postcss": "^8.1.0" } }, + "node_modules/axios": { + "version": "1.7.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz", + "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==", + "dependencies": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/babel-jest": { "version": "29.7.0", "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-29.7.0.tgz", @@ -7728,7 +7738,6 @@ "version": "1.0.8", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", - "dev": true, "dependencies": { "delayed-stream": "~1.0.0" }, @@ -8018,7 +8027,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", - "dev": true, "engines": { "node": ">=0.4.0" } @@ -8956,6 +8964,25 @@ "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==", "dev": true }, + "node_modules/follow-redirects": { + "version": "1.15.6", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz", + "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, "node_modules/foreground-child": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz", @@ -9025,7 +9052,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", - "dev": true, "dependencies": { "asynckit": "^0.4.0", "combined-stream": "^1.0.8", @@ -12318,6 +12344,11 @@ "node": ">= 0.10" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", -- 2.49.1 From 4d9c15bc8a1f09100144cc27c6961c45193f2f69 Mon Sep 17 00:00:00 2001 From: Noah Spannbauer Date: Tue, 28 May 2024 12:33:39 -0500 Subject: [PATCH 3/3] 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", -- 2.49.1