Updating api auth and ms graph endpoint (#19)

* Updating api auth and ms graph endpoint

* updating feature flag value

* Updating get feature flags functions

* Updating get feature flags functions

app/src/App.tsx

@@ -11,10 +11,12 @@ const App: React.FC<unknown> = () => {
   useEffect(() => {
     const getFeatureFlags = async () => {
       try {
+        const featureFlagKeys: string = 'flying-pilots';
         const response: AxiosResponse = await axios.get(
-          `http://localhost:7071/api/featureFlags?key=flying*&label=${process.env.NODE_ENV}`
+          `http://localhost:7071/api/featureFlags?keys=${featureFlagKeys}&label=${process.env.NODE_ENV}`
         );
-        const featureFlags: unknown[] = response.data;
+        const featureFlags: { key: string; enabled: boolean }[] = response.data;
+        console.log(featureFlags);
 
         if (featureFlags.length > 0) {
           appContext.dispatch({

app/src/components/logbookEntryForm/LogbookEntryForm.tsx

@@ -1,122 +1,122 @@
-import React from 'react';
-import {
-  Accordion,
-  AccordionItem,
-  Button,
-  DatePicker,
-  Input
-} from '@nextui-org/react';
-import { useForm, Controller, SubmitHandler } from 'react-hook-form';
+// import React from 'react';
+// import {
+//   Accordion,
+//   AccordionItem,
+//   Button,
+//   DatePicker,
+//   Input
+// } from '@nextui-org/react';
+// import { useForm, Controller, SubmitHandler } from 'react-hook-form';
 
-const LogbookEntryForm: React.FC<unknown> = () => {
-  const { control, handleSubmit } = useForm();
+// const LogbookEntryForm: React.FC<unknown> = () => {
+//   const { control, handleSubmit } = useForm();
 
-  const onSubmit = (data: unknown) => {
-    console.log(data);
-  };
+//   const onSubmit = (data: unknown) => {
+//     console.log(data);
+//   };
 
-  return (
-    <form className="m-10" onSubmit={handleSubmit(onSubmit)}>
-      <div className="grid grid-cols-2 gap-4">
-        <div className="self-center">
-          <label>Date</label>
-        </div>
-        <div>
-          <Controller
-            name="date"
-            control={control}
-            render={({ field }) => <DatePicker labelPlacement="outside-left" />}
-          />
-        </div>
-        <div className="self-center">
-          <label>Aircraft Type</label>
-        </div>
-        <div>
-          <Controller
-            name="aircraftType"
-            control={control}
-            render={({ field }) => (
-              <Input fullWidth={true} labelPlacement="outside-left" />
-            )}
-          />
-        </div>
-        <div className="self-center">
-          <label>Aircraft Identity</label>
-        </div>
-        <div>
-          <Controller
-            name="aircraftIdent"
-            control={control}
-            render={({ field }) => (
-              <Input fullWidth={true} labelPlacement="outside-left" />
-            )}
-          />
-        </div>
-        <div className="self-center">
-          <label>Route To</label>
-        </div>
-        <div>
-          <Controller
-            name="routeTo"
-            control={control}
-            render={({ field }) => <Input />}
-          />
-        </div>
-        <div className="self-center">
-          <label>Route From</label>
-        </div>
-        <div>
-          <Controller
-            name="routeFrom"
-            control={control}
-            render={({ field }) => <Input />}
-          />
-        </div>
-        <div className="self-center">
-          <label>Duration of Flight</label>
-        </div>
-        <div>
-          <Controller
-            name="flightDuration"
-            control={control}
-            render={({ field }) => <Input />}
-          />
-        </div>
-        <div className="self-center">
-          <label>Single Engine Land</label>
-        </div>
-        <div>
-          <Controller
-            name="aircraftSEL"
-            control={control}
-            render={({ field }) => <Input />}
-          />
-        </div>
-        <div className="col-span-2">
-          <Accordion>
-            <AccordionItem title="Aircraft Category and Class">
-              <div className="self-center">
-                <label>Single Engine Land</label>
-              </div>
-              <div>
-                <Controller
-                  name="aircraftSEL"
-                  control={control}
-                  render={({ field }) => <Input />}
-                />
-              </div>
-            </AccordionItem>
-          </Accordion>
-        </div>
-        <div className="col-span-2 justify-self-end">
-          <Button color="default">Cancel</Button>
-          <Button className="ml-10" color="primary">
-            Save
-          </Button>
-        </div>
-      </div>
-    </form>
-  );
-};
+//   return (
+//     <form className="m-10" onSubmit={handleSubmit(onSubmit)}>
+//       <div className="grid grid-cols-2 gap-4">
+//         <div className="self-center">
+//           <label>Date</label>
+//         </div>
+//         <div>
+//           <Controller
+//             name="date"
+//             control={control}
+//             render={({ field }) => <DatePicker labelPlacement="outside-left" />}
+//           />
+//         </div>
+//         <div className="self-center">
+//           <label>Aircraft Type</label>
+//         </div>
+//         <div>
+//           <Controller
+//             name="aircraftType"
+//             control={control}
+//             render={({ field }) => (
+//               <Input fullWidth={true} labelPlacement="outside-left" />
+//             )}
+//           />
+//         </div>
+//         <div className="self-center">
+//           <label>Aircraft Identity</label>
+//         </div>
+//         <div>
+//           <Controller
+//             name="aircraftIdent"
+//             control={control}
+//             render={({ field }) => (
+//               <Input fullWidth={true} labelPlacement="outside-left" />
+//             )}
+//           />
+//         </div>
+//         <div className="self-center">
+//           <label>Route To</label>
+//         </div>
+//         <div>
+//           <Controller
+//             name="routeTo"
+//             control={control}
+//             render={({ field }) => <Input />}
+//           />
+//         </div>
+//         <div className="self-center">
+//           <label>Route From</label>
+//         </div>
+//         <div>
+//           <Controller
+//             name="routeFrom"
+//             control={control}
+//             render={({ field }) => <Input />}
+//           />
+//         </div>
+//         <div className="self-center">
+//           <label>Duration of Flight</label>
+//         </div>
+//         <div>
+//           <Controller
+//             name="flightDuration"
+//             control={control}
+//             render={({ field }) => <Input />}
+//           />
+//         </div>
+//         <div className="self-center">
+//           <label>Single Engine Land</label>
+//         </div>
+//         <div>
+//           <Controller
+//             name="aircraftSEL"
+//             control={control}
+//             render={({ field }) => <Input />}
+//           />
+//         </div>
+//         <div className="col-span-2">
+//           <Accordion>
+//             <AccordionItem title="Aircraft Category and Class">
+//               <div className="self-center">
+//                 <label>Single Engine Land</label>
+//               </div>
+//               <div>
+//                 <Controller
+//                   name="aircraftSEL"
+//                   control={control}
+//                   render={({ field }) => <Input />}
+//                 />
+//               </div>
+//             </AccordionItem>
+//           </Accordion>
+//         </div>
+//         <div className="col-span-2 justify-self-end">
+//           <Button color="default">Cancel</Button>
+//           <Button className="ml-10" color="primary">
+//             Save
+//           </Button>
+//         </div>
+//       </div>
+//     </form>
+//   );
+// };
 
-export default LogbookEntryForm;
+// export default LogbookEntryForm;

app/src/components/pilotForm/PilotForm.tsx

@@ -1,85 +1,85 @@
-import {
-  Accordion,
-  AccordionItem,
-  Button,
-  DatePicker,
-  Input,
-  Select,
-  SelectItem
-} from '@nextui-org/react';
-import { useForm, Controller, SubmitHandler } from 'react-hook-form';
+// import {
+//   Accordion,
+//   AccordionItem,
+//   Button,
+//   DatePicker,
+//   Input,
+//   Select,
+//   SelectItem
+// } from '@nextui-org/react';
+// import { useForm, Controller, SubmitHandler } from 'react-hook-form';
 
-const PilotForm: React.FC<unknown> = () => {
-  const { control, handleSubmit } = useForm();
+// const PilotForm: React.FC<unknown> = () => {
+//   const { control, handleSubmit } = useForm();
 
-  const onSubmit = (data: unknown) => {
-    console.log(data);
-  };
+//   const onSubmit = (data: unknown) => {
+//     console.log(data);
+//   };
 
-  return (
-    <form className="m-10" onSubmit={handleSubmit(onSubmit)}>
-      <div className="grid grid-cols-2 gap-4">
-        <div className="self-center">
-          <label>First Name</label>
-        </div>
-        <div>
-          <Controller
-            name="firstName"
-            control={control}
-            render={({ field }) => <Input />}
-          />
-        </div>
-        <div className="self-center">
-          <label>Last Name</label>
-        </div>
-        <div>
-          <Controller
-            name="lastName"
-            control={control}
-            render={({ field }) => <Input />}
-          />
-        </div>
-      </div>
-      <Accordion>
-        <AccordionItem title="Medical Certificate">
-          <div className="grid grid-cols-2 gap-4">
-            <div className="self-center">
-              <label>Class</label>
-            </div>
-            <div>
-              <Controller
-                name="medicalClass"
-                control={control}
-                render={({ field }) => (
-                  <Select>
-                    <SelectItem key="first" value="First">
-                      First
-                    </SelectItem>
-                    <SelectItem key="second" value="Second">
-                      Second
-                    </SelectItem>
-                    <SelectItem key="Third" value="Third">
-                      Third
-                    </SelectItem>
-                  </Select>
-                )}
-              />
-            </div>
-            <div className="self-center">
-              <label>Expires</label>
-            </div>
-            <div>
-              <Controller
-                name="medicalExpiration"
-                control={control}
-                render={({ field }) => <DatePicker />}
-              />
-            </div>
-          </div>
-        </AccordionItem>
-      </Accordion>
-    </form>
-  );
-};
+//   return (
+//     <form className="m-10" onSubmit={handleSubmit(onSubmit)}>
+//       <div className="grid grid-cols-2 gap-4">
+//         <div className="self-center">
+//           <label>First Name</label>
+//         </div>
+//         <div>
+//           <Controller
+//             name="firstName"
+//             control={control}
+//             render={({ field }) => <Input />}
+//           />
+//         </div>
+//         <div className="self-center">
+//           <label>Last Name</label>
+//         </div>
+//         <div>
+//           <Controller
+//             name="lastName"
+//             control={control}
+//             render={({ field }) => <Input />}
+//           />
+//         </div>
+//       </div>
+//       <Accordion>
+//         <AccordionItem title="Medical Certificate">
+//           <div className="grid grid-cols-2 gap-4">
+//             <div className="self-center">
+//               <label>Class</label>
+//             </div>
+//             <div>
+//               <Controller
+//                 name="medicalClass"
+//                 control={control}
+//                 render={({ field }) => (
+//                   <Select>
+//                     <SelectItem key="first" value="First">
+//                       First
+//                     </SelectItem>
+//                     <SelectItem key="second" value="Second">
+//                       Second
+//                     </SelectItem>
+//                     <SelectItem key="Third" value="Third">
+//                       Third
+//                     </SelectItem>
+//                   </Select>
+//                 )}
+//               />
+//             </div>
+//             <div className="self-center">
+//               <label>Expires</label>
+//             </div>
+//             <div>
+//               <Controller
+//                 name="medicalExpiration"
+//                 control={control}
+//                 render={({ field }) => <DatePicker />}
+//               />
+//             </div>
+//           </div>
+//         </AccordionItem>
+//       </Accordion>
+//     </form>
+//   );
+// };
 
-export default PilotForm;
+// export default PilotForm;

app/src/components/pilots/Pilots.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import SiteNav from '../siteNav/SiteNav';
-import PilotForm from '../pilotForm/PilotForm';
+// import PilotForm from '../pilotForm/PilotForm';
 import { Button } from '@nextui-org/react';
 import {
   Drawer,
@@ -37,9 +37,7 @@ const Pilots: React.FC<unknown> = () => {
             <DrawerHeader>
               <h2>Add Pilot</h2>
             </DrawerHeader>
-            <DrawerBody>
-              <PilotForm />
-            </DrawerBody>
+            <DrawerBody>{/* <PilotForm /> */}</DrawerBody>
             <DrawerFooter>
               <div className="flex gap-4 justify-end justify-self-center">
                 <div>

app/src/components/siteNav/SiteNav.tsx

@@ -38,7 +38,7 @@ const SiteNav: React.FC<unknown> = () => {
       <NavbarContent justify="center">
         <NavbarItem>
           {appContext.state.featureFlags.find(
-            (featureFlag) => featureFlag.id === 'flying-pilots'
+            (featureFlag) => featureFlag.key === 'flying-pilots'
           )?.enabled && (
             <Link>
               <ReactRouterLink to="/">Pilots</ReactRouterLink>

app/src/context/appContext/IAppContextState.ts

@@ -1,3 +1,3 @@
 export interface IAppContextState {
-  featureFlags: unknown[];
+  featureFlags: { key: string; enabled: boolean }[];
 }

app/src/context/appContext/reducer.ts

@@ -1,6 +1,9 @@
 import { IAppContextState } from './IAppContextState';
 
-export type Action = { type: 'SET_FEATURE_FLAGS'; payload: unknown[] };
+export type Action = {
+  type: 'SET_FEATURE_FLAGS';
+  payload: { key: string; enabled: boolean }[];
+};
 
 export const reducer = (
   state: IAppContextState,

app/src/hooks/featureFlag/UseFeatureFlag.tsx

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