renaming client to app

app/.eslintrc.cjs

@@ -4,7 +4,7 @@ module.exports = {
   extends: [
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
+    'plugin:react-hooks/recommended'
   ],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
@@ -12,7 +12,7 @@ module.exports = {
   rules: {
     'react-refresh/only-export-components': [
       'warn',
-      { allowConstantExport: true },
-    ],
-  },
+      { allowConstantExport: true }
+    ]
+  }
 };

app/README.md

@@ -20,8 +20,8 @@ export default {
     ecmaVersion: 'latest',
     sourceType: 'module',
     project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
+    tsconfigRootDir: __dirname
+  }
 };
 ```
 

app/postcss.config.js

@@ -1,6 +1,6 @@
 export default {
   plugins: {
     tailwindcss: {},
-    autoprefixer: {},
-  },
+    autoprefixer: {}
+  }
 };

app/src/App.tsx

@@ -4,16 +4,15 @@ import Logbook from './components/logbook/Logbook';
 import Checklists from './components/checklists/Checklists';
 import Pilots from './components/pilots/Pilots';
 
-
 const App: React.FC<unknown> = () => {
   return (
     <Routes>
-      <Route path='/' element={<Flights />} />
-      <Route path='logbook' element={<Logbook />} />
-      <Route path='checklists' element={<Checklists />} />
-      <Route path='pilots' element={<Pilots />} />
+      <Route path="/" element={<Flights />} />
+      <Route path="logbook" element={<Logbook />} />
+      <Route path="checklists" element={<Checklists />} />
+      <Route path="pilots" element={<Pilots />} />
     </Routes>
   );
-}
+};
 
 export default App;

app/src/components/logbook/Logbook.tsx

@@ -0,0 +1,12 @@
+import SiteNav from '../siteNav/SiteNav';
+
+const Logbook: React.FC<unknown> = () => {
+  return (
+    <div>
+      <SiteNav />
+      <div>Logbook goes here</div>
+    </div>
+  );
+};
+
+export default Logbook;

app/src/components/logbookEntryForm/LogbookEntryForm.tsx

@@ -0,0 +1,122 @@
+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 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>
+  );
+};
+
+export default LogbookEntryForm;

app/src/components/pilotForm/PilotForm.tsx

@@ -0,0 +1,85 @@
+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 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>
+  );
+};
+
+export default PilotForm;

app/src/components/pilots/Pilots.tsx

@@ -0,0 +1,15 @@
+import SiteNav from '../siteNav/SiteNav';
+import PilotForm from '../pilotForm/PilotForm';
+
+const Pilots: React.FC<unknown> = () => {
+  return (
+    <div>
+      <SiteNav />
+      <div>
+        <PilotForm />
+      </div>
+    </div>
+  );
+};
+
+export default Pilots;

app/src/components/siteNav/SiteNav.tsx

@@ -0,0 +1,59 @@
+import {
+  Avatar,
+  Link,
+  Navbar,
+  NavbarBrand,
+  NavbarContent,
+  NavbarItem,
+  Button
+} from '@nextui-org/react';
+import { Link as ReactRouterLink } from 'react-router-dom';
+import { useIsAuthenticated, useMsal } from '@azure/msal-react';
+
+const SiteNav: React.FC<unknown> = () => {
+  const isAuthenticated = useIsAuthenticated();
+  const { accounts, instance } = useMsal();
+  const initializeLogin = () => {
+    instance.loginRedirect();
+  };
+
+  console.log(accounts);
+
+  return (
+    <Navbar isBordered>
+      <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>
+        </NavbarItem>
+      </NavbarContent>
+      <NavbarContent justify="end">
+        {!isAuthenticated && (
+          <Button as={Link} color="primary" href="#" onClick={initializeLogin}>
+            Login
+          </Button>
+        )}
+        {isAuthenticated && <Avatar name={accounts[0]?.username} />}
+      </NavbarContent>
+    </Navbar>
+  );
+};
+
+export default SiteNav;

app/src/main.tsx

@@ -10,10 +10,11 @@ import { BrowserRouter } from 'react-router-dom';
 const configuration: Configuration = {
   auth: {
     clientId: 'd3562a45-050d-4f9a-baed-0497c7156924',
-    authority: 'https://login.microsoftonline.com/0f23652e-4b15-420f-991e-3d6fc769a31d',
+    authority:
+      'https://login.microsoftonline.com/0f23652e-4b15-420f-991e-3d6fc769a31d',
     redirectUri: 'http://localhost:5173'
   }
-}
+};
 
 const pca = new PublicClientApplication(configuration);
 
@@ -26,5 +27,5 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
         </BrowserRouter>
       </NextUIProvider>
     </MsalProvider>
-  </React.StrictMode>,
+  </React.StrictMode>
 );

app/tailwind.config.js

@@ -5,11 +5,11 @@ 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: {},
+    extend: {}
   },
   darkMode: 'class',
-  plugins: [nextui()],
+  plugins: [nextui()]
 };

app/vite.config.ts

@@ -3,5 +3,5 @@ import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react()]
 });

client/src/components/logbook/Logbook.tsx

@@ -1,14 +0,0 @@
-import SiteNav from '../siteNav/SiteNav';
-
-const Logbook: React.FC<unknown> = () => {
-    return (
-        <div>
-            <SiteNav />
-            <div>
-                Logbook goes here
-            </div>
-        </div>
-    )
-}
-
-export default Logbook;

client/src/components/logbookEntryForm/LogbookEntryForm.tsx

@@ -1,138 +0,0 @@
-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 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>
-    )
-}
-
-export default LogbookEntryForm;

client/src/components/pilotForm/PilotForm.tsx

@@ -1,83 +0,0 @@
-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 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>
-    )
-}
-
-export default PilotForm;

client/src/components/pilots/Pilots.tsx

@@ -1,15 +0,0 @@
-import SiteNav from '../siteNav/SiteNav';
-import PilotForm from '../pilotForm/PilotForm';
-
-const Pilots: React.FC<unknown> = () => {
-    return (
-        <div>
-            <SiteNav />
-            <div>
-                <PilotForm />
-            </div>
-        </div>
-    )
-}
-
-export default Pilots;

client/src/components/siteNav/SiteNav.tsx

@@ -1,53 +0,0 @@
-import { Avatar, Link, Navbar, NavbarBrand, NavbarContent, NavbarItem, Button } from '@nextui-org/react';
-import { Link as ReactRouterLink } from 'react-router-dom';
-import { useIsAuthenticated, useMsal } from '@azure/msal-react';
-
-const SiteNav: React.FC<unknown> = () => {
-    const isAuthenticated = useIsAuthenticated();
-    const { accounts, instance } = useMsal();
-    const initializeLogin = () => {
-        instance.loginRedirect();
-    }
-
-    console.log(accounts)
-
-    return (
-        <Navbar isBordered>
-            <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>
-                </NavbarItem>
-            </NavbarContent>
-            <NavbarContent justify='end'>
-                {!isAuthenticated &&
-                    <Button as={Link} color='primary' href='#' onClick={initializeLogin}>Login</Button>
-                }
-                {isAuthenticated &&
-                    <Avatar name={accounts[0]?.username} />
-                }
-            </NavbarContent>
-        </Navbar>
-    )
-}
-
-export default SiteNav;