diff --git a/client/src/components/BookingQuery/BookingQuery.tsx b/client/src/components/BookingQuery/BookingQuery.tsx index c78c892a2533b26c9628d2379c63647298a89400..1760725bef35b97609acdafeaa2e1d4953e15716 100644 --- a/client/src/components/BookingQuery/BookingQuery.tsx +++ b/client/src/components/BookingQuery/BookingQuery.tsx @@ -1,6 +1,7 @@ import { useState } from 'react'; import { useForm } from 'react-hook-form'; import { useNavigate } from 'react-router-dom'; +import { airports } from '../../helpers/Airports'; import './BookingQuery.scss'; interface IBookingQuery { @@ -14,7 +15,6 @@ function BookingQuery() { const navigate = useNavigate(); const [error, setError] = useState(''); const { register, handleSubmit } = useForm<IBookingQuery>({mode: 'onChange', defaultValues: { origin: '', destination: '', seatType: ''}}); - const airports: string[] = ['LGW', 'LHR', 'BHX', 'MAN', 'EDI']; const onSubmit = (query: IBookingQuery) => { if (query.origin === query.destination) { diff --git a/client/src/components/FlightCreationForm/FlightCreationForm.tsx b/client/src/components/FlightCreationForm/FlightCreationForm.tsx index 6e68144969ac45d11667d8383a93740c166caefb..0eccb62ad0259c2bf0adc138db9f31eec4151ab3 100644 --- a/client/src/components/FlightCreationForm/FlightCreationForm.tsx +++ b/client/src/components/FlightCreationForm/FlightCreationForm.tsx @@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom'; import { useForm } from 'react-hook-form'; import { AxiosError } from 'axios'; import { addFlight } from '../../services/FlightForm/FlightForm'; +import { airports } from '../../helpers/Airports'; import './FlightCreationForm.scss'; export interface IFlightCreationForm { @@ -20,7 +21,7 @@ function FlightCreationForm() { const navigate = useNavigate(); const [error, setError] = useState(''); const [disabled, setDisabled] = useState(false); - const { register, handleSubmit } = useForm<IFlightCreationForm>({ mode: 'onChange' }); + const { register, handleSubmit } = useForm<IFlightCreationForm>({ mode: 'onChange', defaultValues: { origin: '', destination: '' } }); const onSubmit = async (formValue: IFlightCreationForm) => { if (!Number.isInteger(formValue.businessCapacity) || !Number.isInteger(formValue.economyCapacity)) { @@ -71,12 +72,22 @@ function FlightCreationForm() { <div className='form-col'> <div className='form-group'> <label>Origin</label> - <input type='text' placeholder='Enter origin' {...register('origin', { required: true })} /> + <select {...register('origin', { required: true })} > + <option value={''} disabled>Select an airport</option> + {airports.map((airport) => { + return <option key={airport} value={airport}>{airport}</option> + })} + </select> </div> <div className='form-group'> <label>Destination</label> - <input type='text' placeholder='Enter destination' {...register('destination', { required: true })} /> + <select {...register('destination', { required: true })} > + <option value={''} disabled>Select an airport</option> + {airports.map((airport) => { + return <option key={airport} value={airport}>{airport}</option> + })} + </select> </div> <div className='form-group'> diff --git a/client/src/helpers/Airports.ts b/client/src/helpers/Airports.ts new file mode 100644 index 0000000000000000000000000000000000000000..7969723f553092287d2e62c9eed44f6ff28d8727 --- /dev/null +++ b/client/src/helpers/Airports.ts @@ -0,0 +1,16 @@ +const airportMap = new Map<string, string>(); +airportMap.set('London Heathrow', 'LHW'); +airportMap.set('London Gatwick', 'LGW'); +airportMap.set('Manchester', 'MAN'); +airportMap.set('London Stanstead', 'STN'); +airportMap.set('London Luton', 'LTN'); +airportMap.set('Edinburgh', 'EDI'); +airportMap.set('Birmingham', 'BHX'); +airportMap.set('Bristol', 'BRS'); +airportMap.set('Glasgow', 'GLA'); +airportMap.set('Belfast International', 'BFS'); +airportMap.set('Newcastle', 'NCL'); +airportMap.set('Liverpool', 'LPL'); +airportMap.set('Norwich', 'NWI'); + +export const airports = [...airportMap.keys()];