Centralise airports in frontend

client/src/components/BookingQuery/BookingQuery.tsx

 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) {

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'>

client/src/helpers/Airports.ts

+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()];