Services/dashboard api calls semi-completed.

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

@@ -2,7 +2,6 @@ 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';
 import { Link } from 'react-router-dom';
 
@@ -15,11 +14,13 @@ function Flights() {
         <div className='flights'>
           <div className='flex-row'>
             <span className='flights-title'>Upcoming Flights</span>
-            <button type='submit' className='view-more'>View more</button>
+            <Link to={"/"}>
+              <button type='button' className='view-more'>View more</button>
+            </Link>
           </div>
           <div className='flight-list'>
             {data.upcomingFlights.length > 0
-              ? data.upcomingFlights.map((flight) => {
+              ? data.upcomingFlights.slice(0,3).map((flight) => {
                   return <FlightCard key={flight.id} flight={flight}></FlightCard>
                 })
               : <div>No Upcoming Flights</div>}
@@ -29,11 +30,11 @@ function Flights() {
         <div className='flights'>
           <div className='flex-row'>
             <span className='flights-title'>Flights History</span>
-            <button type='submit' className='view-more'>View more</button>
+            <button type='button' className='view-more'>View more</button>
           </div>
           <div className='flight-list'>
             {data.upcomingFlights.length > 0
-              ? data.flightsHistory.map((flight) => {
+              ? data.flightsHistory.slice(0,3).map((flight) => {
                   return <FlightCard key={flight.id} flight={flight}></FlightCard>
                 })
               : <div>No Flights History</div>}
@@ -50,30 +51,13 @@ function Flights() {
             <Link to="/register-flight">
               <button type='button' className='add-flight'>Add flight</button>
             </Link>
-            <Link to="">
-              <button type='button' className='view-more'>View more</button>
-            </Link>
-          </div>
-          <div className='flight-list'>
-            {data.upcomingFlights.length > 0
-              ? data.upcomingFlights.map((flight) => {
-                  return <FlightCard key={flight.id} flight={flight}></FlightCard>
-                })
-              : <div>No Upcoming Flights</div>}
-          </div>
-        </div>
-  
-        <div className='flights'>
-          <div className='flex-row'>
-            <span className='flights-title'>Flights History</span>
-            <button type='submit' className='view-more'>View more</button>
           </div>
           <div className='flight-list'>
-            {data.upcomingFlights.length > 0
-              ? data.flightsHistory.map((flight) => {
+            {data.flightList.length > 0
+              ? data.flightList.slice(0,3).map((flight) => {
                   return <FlightCard key={flight.id} flight={flight}></FlightCard>
                 })
-              : <div>No Flights History</div>}
+              : <div>No Flights have been created yet.</div>}
           </div>
         </div>
       </>

client/src/services/Dashboard/AirlineDashboard.ts

+import Api from "../../helpers/Api";
+import { getSearchParam } from "../../helpers/SearchParams";
+
 export interface ISeat {
   id: number;
   classType: number;
@@ -25,14 +28,15 @@ export interface IFlight {
 
 export interface IAirlineDashboardData {
   type: 'airline'
-  upcomingFlights: IFlight[];
-  flightsHistory: IFlight[];
+  flightList: IFlight[];
 }
 
-export async function GetAirlineDashboardData(): Promise<IAirlineDashboardData> {
-  return {
-    type: 'airline',
-    upcomingFlights: [],
-    flightsHistory: []
-  };
+export async function GetAirlineDashboardData({request}: {request: Request}): Promise<IAirlineDashboardData> {
+  try {
+    const id = getSearchParam(request.url, 'id');
+    const result = await Api.get(`Flight?airlineId=${id}`, { withCredentials: true });
+    return result.data;
+  } catch (error) {
+    throw error;
+  }
 }

client/src/services/Dashboard/CustomerDashboard.ts

+import Api from "../../helpers/Api";
+
 export interface ISeat {
   id: number;
   classType: number;
@@ -30,9 +32,17 @@ export interface ICustomerDashboardData {
 }
 
 export async function GetCustomerDashboardData(): Promise<ICustomerDashboardData> {
-  return {
-    type: 'customer',
-    upcomingFlights: [],
-    flightsHistory: []
+  try {
+    const upcomingFlights = Api.get('', {withCredentials: true});
+    const flightsHistory = Api.get('', {withCredentials: true});
+    const [uData, hData] = await Promise.all([upcomingFlights, flightsHistory]);
+
+    return {
+      type: 'customer',
+      upcomingFlights: uData.data,
+      flightsHistory: hData.data
+    };
+  } catch (error) {
+    throw error;
   }
 }