Flight form wiring and flight page

client/src/components/Dashboard/FlightCard/FlightCard.tsx

 import { Link } from 'react-router-dom';
+import { IFlight } from '../../../services/Dashboard/CustomerDashboard';
 import './FlightCard.scss';
 
-interface IFlight {
-  id: number;
-  flightNumber: string;
-  flightPath: string;
-  flightPathFull: string;
-}
-
 interface IFlightCard {
   flight: IFlight;
 }
@@ -16,9 +10,9 @@ function FlightCard({ flight }: IFlightCard) {
   return (
     <>
       <div className='flight-card'>
-        <span>{flight.flightNumber}</span>
-        <span className='flight-path'>{flight.flightPath}</span>
-        <span>{flight.flightPathFull}</span>
+        <span>{flight.id}</span>
+        {/* <span className='flight-path'>{flight.origin} - {flight.destination}</span> */}
+        <span>{flight.origin} - {flight.destination}</span>
         <Link to={'/flights/' + flight.id}>View Flight</Link>
       </div>
     </>

client/src/components/Flight/Flight.scss

+.flight {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.flight-data-card {
+  width: 25vw;
+  min-width: 350px;
+}
+
+.flight-data-title {
+  font-size: 1.4rem;
+  align-self: center;
+}
+
+.flight-data-label {
+  font-weight: bold;
+  font-size: 1.2rem;
+}
+
+.flight-data-value {
+  font-size: 1.1rem;
+}

client/src/components/Flight/Flight.tsx

+import { useLoaderData } from 'react-router-dom';
+import { IFlight } from '../../services/Dashboard/CustomerDashboard';
+import './Flight.scss';
+
+function Flight() {
+  const data = useLoaderData() as IFlight;
+
+  return (
+    <>
+      <div className='flight'>
+        <div className='card flight-data-card'>
+          <span className='flight-data-title'>Flight Details</span>
+
+          <div className='flight-data-item'>
+            <span className='flight-data-label'>ID: </span>
+            <span className='flight-data-value'>{data.id}</span>
+          </div>
+
+          <div className='flight-data-item'>
+            <span className='flight-data-label'>Origin: </span>
+            <span className='flight-data-value'>{data.origin}</span>
+          </div>
+
+          <div className='flight-data-item'>
+            <span className='flight-data-label'>Destination: </span>
+            <span className='flight-data-value'>{data.destination}</span>
+          </div>
+
+          <div className='flight-data-item'>
+            <span className='flight-data-label'>Departure Time: </span>
+            <span className='flight-data-value'>{new Date(data.departureTime).toLocaleString()}</span>
+          </div>
+
+          <div className='flight-data-item'>
+            <span className='flight-data-label'>Arrival Time: </span>
+            <span className='flight-data-value'>{new Date(data.arrivalTime).toLocaleString()}</span>
+          </div>
+
+          <div className='flight-data-item'>
+            <span className='flight-data-label'>Economy Capacity: </span>
+            <span className='flight-data-value'>{data.economyCapacity}</span>
+          </div>
+
+          <div className='flight-data-item'>
+            <span className='flight-data-label'>Business Capacity: </span>
+            <span className='flight-data-value'>{data.businessCapacity}</span>
+          </div>
+
+          <div className='flight-data-item'>
+            <span className='flight-data-label'>Economy Price: </span>
+            <span className='flight-data-value'>{data.economyPrice}</span>
+          </div>
+
+          <div className='flight-data-item'>
+            <span className='flight-data-label'>Business Price: </span>
+            <span className='flight-data-value'>{data.businessPrice}</span>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default Flight;

client/src/components/FlightCreationForm/FlightCreationForm.tsx

 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useForm } from 'react-hook-form';
+import { AxiosError } from 'axios';
+import { addFlight } from '../../services/FlightForm/FlightForm';
 import './FlightCreationForm.scss';
 
-interface IFlightCreationForm {
+export interface IFlightCreationForm {
     origin: string;
     destination: string;
     departure: string;
@@ -14,14 +17,45 @@ interface IFlightCreationForm {
 }
 
 function FlightCreationForm() {
+  const navigate = useNavigate();
   const [error, setError] = useState('');
   const { register, handleSubmit } = useForm<IFlightCreationForm>({mode: 'onChange'});
 
-  const onSubmit = (formValue : IFlightCreationForm) => {
+  const onSubmit = async (formValue : IFlightCreationForm) => {
     if (!Number.isInteger(formValue.businessCapacity) || !Number.isInteger(formValue.economyCapacity)) {
         setError('Please enter an integer for the capacity.')
         return;
     }
+
+    if (formValue.economyCapacity % 6 !== 0) {
+      setError('Economy capacity must be a multiple of 6');
+      return;
+    }
+
+    if (formValue.businessCapacity % 4 !== 0) {
+      setError('Business capacity must be a multiple of 4');
+      return;
+    }
+
+    if (formValue.origin === formValue.destination) {
+      setError('Destination cannot be the same as the origin');
+      return;
+    }
+
+    setError('');
+
+    try {
+      const result = await addFlight(formValue);
+      navigate(`/flight/${result.data.id}`);
+    } catch (error) {
+      const errorMessage = (error as AxiosError).response?.data;
+
+      if (typeof errorMessage == 'string') {
+        setError(errorMessage);
+      } else {
+        setError('An unexpected error has occurred');
+      }
+    }
   }
 
   return (
@@ -55,22 +89,22 @@ function FlightCreationForm() {
               <div className='form-col'>
                 <div className='form-group'>
                   <label>Economy Class Capacity</label>
-                  <input type='number' placeholder='Enter capacity' {...register('economyCapacity', { required: true })} />
+                  <input type='number' placeholder='Enter capacity' {...register('economyCapacity', { required: true, valueAsNumber: true })} />
                 </div>
 
                 <div className='form-group'>
                   <label>Business Class Capacity</label>
-                  <input type='number' placeholder='Enter capacity' {...register('businessCapacity', { required: true })} />
+                  <input type='number' placeholder='Enter capacity' {...register('businessCapacity', { required: true, valueAsNumber: true })} />
                 </div>
 
                 <div className='form-group'>
                   <label>Economy Class Price</label>
-                  <input type='number' placeholder='Enter price' {...register('economyPrice', { required: true })} />
+                  <input type='number' placeholder='Enter price' {...register('economyPrice', { required: true, valueAsNumber: true })} />
                 </div>
 
                 <div className='form-group'>
                   <label>Business Class Price</label>
-                  <input type='number' placeholder='Enter price' {...register('businessPrice', { required: true })} />
+                  <input type='number' placeholder='Enter price' {...register('businessPrice', { required: true, valueAsNumber: true })} />
                 </div>
               </div>
             </div>

client/src/main.tsx

@@ -8,12 +8,14 @@ import Logout from './components/Logout/Logout.tsx';
 import ProtectedRoute from './components/ProtectedRoute/ProtectedRoute.tsx';
 import InverseProtectedRoute from './components/ProtectedRoute/InverseProtectedRoute.tsx';
 import Dashboard from './components/Dashboard/Dashboard.tsx';
+import Flight from './components/Flight/Flight.tsx';
 import BookingQuery from './components/BookingQuery/BookingQuery.tsx';
 import BookingList from './components/BookingList/BookingList.tsx';
 import { AuthoriseUser } from './services/Authorise/Authorise.ts';
 import { LogoutUser } from './services/Logout/Logout.ts';
 import { GetCustomerDashboardData } from './services/Dashboard/CustomerDashboard.ts';
 import { GetAirlineDashboardData } from './services/Dashboard/AirlineDashboard.ts';
+import { GetFlightData } from './services/Flight/Flight.ts';
 import { GetBookingList } from './services/BookingList/BookingList.ts';
 import './index.scss';
 
@@ -54,6 +56,11 @@ const router = createBrowserRouter([
             loader: GetAirlineDashboardData,
             element: <Dashboard></Dashboard>
           },
+          {
+            path: 'flight/:id',
+            loader: GetFlightData,
+            element: <Flight></Flight>
+          },
           {
             path: 'booking/query',
             element: <BookingQuery></BookingQuery>

client/src/services/BookingList/BookingList.ts

 import { getSearchParam } from '../../helpers/SearchParams';
 import { IFlight } from '../Dashboard/CustomerDashboard';
 
-
 export interface IBookingList {
   flights: IFlight[]
 }
 
-
 export async function GetBookingList({ request }: { request: Request}): Promise<IBookingList> {
   const origin = getSearchParam(request.url, 'origin');
   const destination = getSearchParam(request.url, 'destination');
@@ -16,27 +14,6 @@ export async function GetBookingList({ request }: { request: Request}): Promise<
   console.log('ready to call API with:', origin, destination, date, seatType);
 
   return {
-    flights: [
-      {
-        id: 11,
-        flightNumber: '0011',
-        flightPath: 'LTN - MLG',
-        flightPathFull: 'London(LTN) - Spain(MLG)',
-        economyPrice: 50,
-        businessPrice: 100,
-        departureTime: '10/8/2024 11:00:00 AM',
-        arrivalTime: '10/8/2024 13:00:00 PM'
-      },
-      {
-        id: 12,
-        flightNumber: '0012',
-        flightPath: 'LTN - MLG',
-        flightPathFull: 'London(LTN) - Spain(MLG)',
-        economyPrice: 50,
-        businessPrice: 100,
-        departureTime: '11/8/2024 11:00:00 AM',
-        arrivalTime: '11/8/2024 13:00:00 PM'
-      },
-    ]
+    flights: []
   };
-}
+}
\ No newline at end of file

client/src/services/Dashboard/CustomerDashboard.ts

+export interface ISeats {
+
+}
+
 export interface IFlight {
   id: number;
-  flightNumber: string;
-  flightPath: string;
-  flightPathFull: string;
+  origin: string;
+  destination: string;
+  arrivalTime: string;
+  departureTime: string;
+  economyCapacity: number;
+  businessCapacity: number;
   economyPrice: number;
   businessPrice: number;
-  departureTime: string;
-  arrivalTime: string;
+  seats: ISeats
 }
 
 export interface ICustomerDashboardData {
@@ -16,72 +22,9 @@ export interface ICustomerDashboardData {
 }
 
 export async function GetCustomerDashboardData(): Promise<ICustomerDashboardData> {
-
   return {
     type: 'customer',
-    upcomingFlights: [
-      {
-        id: 4,
-        flightNumber: '0004',
-        flightPath: 'LTN - MLG',
-        flightPathFull: 'London(LTN) - Spain(MLG)',
-        economyPrice: 50,
-        businessPrice: 100,
-        departureTime: '10/8/2024 11:00:00 AM',
-        arrivalTime: '10/8/2024 13:00:00 PM'
-      },
-      {
-        id: 5,
-        flightNumber: '0005',
-        flightPath: 'LTN - MLG',
-        flightPathFull: 'London(LTN) - Spain(MLG)',
-        economyPrice: 50,
-        businessPrice: 100,
-        departureTime: '10/8/2024 11:00:00 AM',
-        arrivalTime: '10/8/2024 13:00:00 PM'
-      },
-      {
-        id: 6,
-        flightNumber: '0006',
-        flightPath: 'LTN - MLG',
-        flightPathFull: 'London(LTN) - Spain(MLG)',
-        economyPrice: 50,
-        businessPrice: 100,
-        departureTime: '10/8/2024 11:00:00 AM',
-        arrivalTime: '10/8/2024 13:00:00 PM'
-      }
-    ],
-    flightsHistory: [
-      {
-        id: 1,
-        flightNumber: '0001',
-        flightPath: 'LTN - MLG',
-        flightPathFull: 'London(LTN) - Spain(MLG)',
-        economyPrice: 50,
-        businessPrice: 100,
-        departureTime: '10/8/2024 11:00:00 AM',
-        arrivalTime: '10/8/2024 13:00:00 PM'
-      },
-      {
-        id: 2,
-        flightNumber: '0002',
-        flightPath: 'LTN - MLG',
-        flightPathFull: 'London(LTN) - Spain(MLG)',
-        economyPrice: 50,
-        businessPrice: 100,
-        departureTime: '10/8/2024 11:00:00 AM',
-        arrivalTime: '10/8/2024 13:00:00 PM'
-      },
-      {
-        id: 3,
-        flightNumber: '0003',
-        flightPath: 'LTN - MLG',
-        flightPathFull: 'London(LTN) - Spain(MLG)',
-        economyPrice: 50,
-        businessPrice: 100,
-        departureTime: '10/8/2024 11:00:00 AM',
-        arrivalTime: '10/8/2024 13:00:00 PM'
-      }
-    ]
+    upcomingFlights: [],
+    flightsHistory: []
   }
 }

client/src/services/Flight/Flight.ts

+import { Params } from 'react-router-dom';
+import Api from '../../helpers/Api';
+import { IFlight } from '../Dashboard/CustomerDashboard';
+
+export async function GetFlightData({ params }: { params: Params }): Promise<IFlight> {
+  try {
+    const result = await Api.get(`Flight/${params.id}`, { withCredentials: true });
+    return result.data;
+  } catch (error ){
+    throw error;
+  }    
+}

client/src/services/FlightForm/FlightForm.ts

+import { AxiosResponse } from 'axios';
+import Api from '../../helpers/Api';
+import { IFlightCreationForm } from '../../components/FlightCreationForm/FlightCreationForm';
+import { IFlight } from '../Dashboard/CustomerDashboard';
+
+export async function addFlight(form: IFlightCreationForm): Promise<AxiosResponse<IFlight>> {
+  return Api.post('Flight', {
+    Origin: form.origin,
+    Destination: form.destination,
+    DepartureTime: form.departure,
+    ArrivalTime: form.arrival,
+    EconomyCapacity: form.economyCapacity,
+    BusinessCapacity: form.businessCapacity,
+    EconomyPrice: form.economyCapacity,
+    BusinessPrice: form.businessPrice
+  }, { withCredentials: true });
+}