From ea81025a1cc23a54a7a2a4e54a58a7d3cac03683 Mon Sep 17 00:00:00 2001
From: "Cross, Liam (UG - Comp Sci & Elec Eng)" <lc01383@surrey.ac.uk>
Date: Wed, 3 Apr 2024 17:52:29 +0000
Subject: [PATCH] Integrate flight form and add API interceptor
---
.../components/Dashboard/Flights/Flights.tsx | 3 +-
.../FlightCreationForm.scss | 12 ++-
.../FlightCreationForm/FlightCreationForm.tsx | 74 ++++++++++---------
client/src/components/Register/Register.tsx | 2 +-
client/src/helpers/Api.ts | 19 ++++-
5 files changed, 70 insertions(+), 40 deletions(-)
diff --git a/client/src/components/Dashboard/Flights/Flights.tsx b/client/src/components/Dashboard/Flights/Flights.tsx
index 96ff319..9739ea6 100644
--- a/client/src/components/Dashboard/Flights/Flights.tsx
+++ b/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>
</>
);
diff --git a/client/src/components/FlightCreationForm/FlightCreationForm.scss b/client/src/components/FlightCreationForm/FlightCreationForm.scss
index 98e7222..f741e66 100644
--- a/client/src/components/FlightCreationForm/FlightCreationForm.scss
+++ b/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;
}
diff --git a/client/src/components/FlightCreationForm/FlightCreationForm.tsx b/client/src/components/FlightCreationForm/FlightCreationForm.tsx
index 8483656..5b68749 100644
--- a/client/src/components/FlightCreationForm/FlightCreationForm.tsx
+++ b/client/src/components/FlightCreationForm/FlightCreationForm.tsx
@@ -1,5 +1,6 @@
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'>
diff --git a/client/src/components/Register/Register.tsx b/client/src/components/Register/Register.tsx
index 28a373d..dd9bd0a 100644
--- a/client/src/components/Register/Register.tsx
+++ b/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'});
diff --git a/client/src/helpers/Api.ts b/client/src/helpers/Api.ts
index f313797..5eee650 100644
--- a/client/src/helpers/Api.ts
+++ b/client/src/helpers/Api.ts
@@ -1,5 +1,22 @@
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;
--
GitLab