adding medical certificate to pilot form

app/src/components/pilotForm/PilotForm.tsx

@@ -1,12 +1,15 @@
 import { useEffect, useState } from 'react';
 import { useForm, Controller, FormProvider } from 'react-hook-form';
 import {
+  Accordion,
   Button,
+  DatePicker,
   Drawer,
   Grid,
   IconButton,
   PeoplePicker,
   SaveIcon,
+  Select,
   StateSelect,
   TextField,
   Typography,
@@ -19,6 +22,7 @@ import { useAccessToken } from '../../hooks/accessToken/UseAcessToken';
 import { useIsAuthenticated } from '@azure/msal-react';
 import { FormMode } from '../../enums/formMode';
 import { Person } from '@microsoft/microsoft-graph-types';
+import PilotFormMedical from '../pilotFormMedical/PilotFormMedical';
 
 const PilotForm: React.FC<IPilotFormProps> = ({
   pilotId,
@@ -47,7 +51,9 @@ const PilotForm: React.FC<IPilotFormProps> = ({
     state: '',
     postalCode: '',
     email: '',
-    phone: ''
+    phone: '',
+    medicalClass: '',
+    medicalExpiration: ''
   };
   const methods = useForm({
     defaultValues: defaultValues
@@ -103,6 +109,7 @@ const PilotForm: React.FC<IPilotFormProps> = ({
   };
 
   const onSubmit = async (data: unknown) => {
+    console.log(data)
     try {
       setIsLoading(true);
 
@@ -363,6 +370,11 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                 )}
               />
             </Grid>
+            <Grid size={12}>
+              <PilotFormMedical
+                isDisabled={isDisabled}
+              />
+            </Grid>
             <Grid display="flex" gap={2} justifyContent="right" size={12}>
               <Button
                 disabled={
@@ -392,6 +404,7 @@ const PilotForm: React.FC<IPilotFormProps> = ({
               )}
             </Grid>
           </Grid>
+          
           {/* {pilotId && (
                 <>
                   <div className="col-span-1">
@@ -417,69 +430,8 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                   </div>
                 </>
               )} */}
-          {/* {pilotId && (
-                <>
-                  <div className="col-span-4">
-                    <Typography variant="h5">Medical</Typography>
-                    <hr className="my-3" />
-                  </div>
-                  <div className="col-span-1">
-                    <Typography variant="h6">Class</Typography>
-                  </div>
-                  <div className="col-span-3">
-                    <Controller
-                      name="medicalClass"
-                      control={methods.control}
-                      render={({ field }) => {
-                        return (
-                          <Select
-                            labelProps={{
-                              className:
-                                'before:content-none after:content-none'
-                            }}
-                            {...field}
-                          >
-                            <Option key="first" value="First">
-                              First
-                            </Option>
-                            <Option key="second" value="Second">
-                              Second
-                            </Option>
-                            <Option key="third" value="Third">
-                              Third
-                            </Option>
-                            <Option key="basicMed" value="Basic Med">
-                              Basic Med
-                            </Option>
-                          </Select>
-                        );
-                      }}
-                    />
-                  </div>
-                  <div className="col-span-1">
-                    <Typography variant="h6">Expiration Date</Typography>
-                  </div>
-                  <div className="col-span-3">
-                    <Controller
-                      name="medicalExpiration"
-                      control={methods.control}
-                      render={({ field }) => {
-                        return (
-                          <DatePicker
-                            handleDateChanged={(date: string) => {
-                              methods.setValue('medicalExpiration', date);
-                            }}
-                            inputProps={{
-                              value: field.value
-                            }}
-                          />
-                        );
-                      }}
-                    />
-                  </div>
-                </>
-              )}
-              {pilotId && (
+
+              {/* {pilotId && (
                 <>
                   <div className="col-span-4">
                     <Typography variant="h5">Certificates</Typography>

app/src/components/pilotFormMedical/PilotFormMedical.tsx

@@ -0,0 +1,77 @@
+import { DatePicker, Grid, Select, Typography } from "@noahspan/noahspan-components";
+import { Controller, useFormContext } from "react-hook-form"
+import { PilotFormMedicalProps } from "./PilotFormMedicalProps.interface";
+
+const PilotFormMedical = ({ isDisabled }: PilotFormMedicalProps) => {
+  const {
+    control,
+    formState: { errors },
+    setValue
+  } = useFormContext()
+
+  return (
+    <Grid container spacing={2}>
+      <Grid size={12}>
+        <Typography variant="h5">Medical</Typography>
+      </Grid>
+      <Grid size={3}>
+        <Typography variant="h6">Class</Typography>
+      </Grid>
+      <Grid size={9}>
+        <Controller
+          name="medicalClass"
+          control={control}
+          render={({ field: { onChange, value } }) => {
+            return (
+              <Select 
+                disabled={isDisabled}
+                fullWidth
+                onChange={onChange}
+                options={
+                  [
+                    {
+                      label: 'First',
+                      value: 'first'
+                    },
+                    {
+                      label: 'Second',
+                      value: 'second'
+                    },
+                    {
+                      label: 'Third',
+                      value: 'third'
+                    },
+                    {
+                      label: 'Basic Med',
+                      value: 'basicMed'
+                    }
+                  ]
+                }
+              />
+            );
+          }}
+        />
+      </Grid>
+      <Grid size={3}>
+        <Typography variant="h6">Expiration</Typography>
+      </Grid>
+      <Grid size={9}>
+        <Controller
+          name="medicalExpiration"
+          control={control}
+          render={({ field: { onChange, value } }) => {
+            return (
+              <DatePicker
+                disabled={isDisabled}
+                onChange={onChange}
+                value={value}
+              />
+            );
+          }}
+        />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default PilotFormMedical

app/src/components/pilotFormMedical/PilotFormMedicalProps.interface.ts

@@ -0,0 +1,3 @@
+export interface PilotFormMedicalProps {
+  isDisabled: boolean;
+}

docker-compose.yaml

@@ -9,6 +9,8 @@ services:
       - '10001:10001'
       - '10002:10002'
     command: 'azurite --blobHost 0.0.0.0 --queueHost 0.0.0.0 --tableHost 0.0.0.0 --loose'
+    volumes: 
+      - ./azurite-flying:/data
 
   api:
     container_name: flying-api
@@ -28,4 +30,5 @@ services:
     ports: 
       - '8080:8080'
 
-
+volumes:
+  azurite-flying: