Integrate flight form and add API interceptor

client/src/components/Dashboard/Flights/Flights.tsx

@@ -2,6 +2,7 @@ import { useLoaderData } from 'react-router';
 import { ICustomerDashboardData } from '../../../services/Dashboard/CustomerDashboard';
 import { IAirlineDashboardData } from '../../../services/Dashboard/AirlineDashboard';
 import FlightCard from '../FlightCard/FlightCard';
+import FlightCreationForm from '../../FlightCreationForm/FlightCreationForm';
 import './Flights.scss';
 
 function Flights() {
@@ -43,7 +44,7 @@ function Flights() {
     return (
       <>
         <div>
-          todo airline dashboard
+          <FlightCreationForm></FlightCreationForm>
         </div>
       </>
     );

client/src/components/FlightCreationForm/FlightCreationForm.scss

@@ -6,7 +6,13 @@
   height: 100%;
 }
 
-.register-card {
-  width: 20vw;
-  min-width: 350px;
+.inner-flight-form {
+  display: flex;
+  gap: 1rem;
+}
+
+.form-col {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }

client/src/components/FlightCreationForm/FlightCreationForm.tsx

 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
+import './FlightCreationForm.scss';
 
 interface IFlightCreationForm {
     origin: string;
@@ -27,46 +28,51 @@ function FlightCreationForm() {
     <>
       <div className='flightCreationForm'>
         <form onSubmit={handleSubmit(onSubmit)}>
-          <div className='card register-card'>
+          <div className='card flight-form-card'>
+            <div className='inner-flight-form'>
+              <div className='form-col'>
+                <div className='form-group'>
+                  <label>Origin</label>
+                  <input type='text' placeholder='Enter origin' {...register('origin', { required: true })} />
+                </div>
+                
+                <div className='form-group'>
+                  <label>Destination</label>
+                  <input type='text' placeholder='Enter destination' {...register('destination', { required: true })} />
+                </div>
 
-            <div className='form-group'>
-              <label>Origin</label>
-              <input type='text' placeholder='Enter origin' {...register('origin', { required: true })} />
-            </div>
-            
-            <div className='form-group'>
-              <label>Destination</label>
-              <input type='text' placeholder='Enter destination' {...register('destination', { required: true })} />
-            </div>
+                <div className='form-group'>
+                  <label>Departure Time</label>
+                  <input type='datetime-local' placeholder='Enter departure time' {...register('departure', { required: true })} />
+                </div>
 
-            <div className='form-group'>
-              <label>Departure Time</label>
-              <input type='datetime-local' placeholder='Enter departure time' {...register('departure', { required: true })} />
-            </div>
-
-            <div className='form-group'>
-              <label>Arrival Time</label>
-              <input type='datetime-local' placeholder='Enter arrival time' {...register('arrival', { required: true })} />
-            </div>
+                <div className='form-group'>
+                  <label>Arrival Time</label>
+                  <input type='datetime-local' placeholder='Enter arrival time' {...register('arrival', { required: true })} />
+                </div>
+              </div>
 
-            <div className='form-group'>
-              <label>Economy Class Capacity</label>
-              <input type='number' placeholder='Enter capacity' {...register('economyCapacity', { required: true })} />
-            </div>
+              <div className='form-col'>
+                <div className='form-group'>
+                  <label>Economy Class Capacity</label>
+                  <input type='number' placeholder='Enter capacity' {...register('economyCapacity', { required: true })} />
+                </div>
 
-            <div className='form-group'>
-              <label>Business Class Capacity</label>
-              <input type='number' placeholder='Enter capacity' {...register('businessCapacity', { required: true })} />
-            </div>
+                <div className='form-group'>
+                  <label>Business Class Capacity</label>
+                  <input type='number' placeholder='Enter capacity' {...register('businessCapacity', { required: true })} />
+                </div>
 
-            <div className='form-group'>
-              <label>Economy Class Price</label>
-              <input type='number' placeholder='Enter price' {...register('economyPrice', { required: true })} />
-            </div>
+                <div className='form-group'>
+                  <label>Economy Class Price</label>
+                  <input type='number' placeholder='Enter price' {...register('economyPrice', { required: true })} />
+                </div>
 
-            <div className='form-group'>
-              <label>Business Class Price</label>
-              <input type='number' placeholder='Enter price' {...register('businessPrice', { required: true })} />
+                <div className='form-group'>
+                  <label>Business Class Price</label>
+                  <input type='number' placeholder='Enter price' {...register('businessPrice', { required: true })} />
+                </div>
+              </div>
             </div>
 
             <div className='form-group'>

client/src/components/Register/Register.tsx

@@ -16,7 +16,7 @@ export interface IRegisterForm {
 }
 
 export function Register() {
-  const { giveAuth, updateUser, user } = useAuth();
+  const { giveAuth, updateUser } = useAuth();
   const navigate = useNavigate();
   const [error, setError] = useState('');
   const { register, handleSubmit } = useForm<IRegisterForm>({mode: 'onChange'});

client/src/helpers/Api.ts

 import axios from 'axios';
+import { AxiosError, AxiosRequestConfig } from 'axios';
+import { AuthoriseUser } from '../services/Authorise/Authorise';
 
-export default axios.create({
+const Api = axios.create({
   baseURL: 'http://localhost:5267/api/'
 });
+
+Api.interceptors.response.use(
+  (response) => response, // Normal success logic
+  (error: AxiosError) => {
+    if (error.request.status === 401) { // If 401 (Unauthorized)
+      AuthoriseUser().then(() => { // Re-auth
+        return Api.request(error.config as AxiosRequestConfig); // Redo the request
+      });
+    } else {
+      throw error; // Otherwise throw error as normal
+    }
+  }
+);
+
+export default Api;