Skip to content

Commit

Permalink
Flight and PlaneTicket create form update
Browse files Browse the repository at this point in the history
  • Loading branch information
crni99 committed Dec 29, 2024
1 parent 86f9ddb commit c8767a1
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 22 deletions.
45 changes: 35 additions & 10 deletions src/components/flight/FlightCreateForm.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState, useContext, useEffect } from 'react';
import React, { useState, useContext, useEffect, useRef } from 'react';
import useFetch from '../../hooks/useFetch.jsx';
import { useNavigate } from 'react-router-dom';
import { createData } from '../../utils/create.js';
Expand All @@ -14,6 +14,7 @@ import { formatTime } from '../../utils/formatting.js';
export default function FlightCreateForm() {

const [pageNumber, setPageNumber] = useState(1);
const isInitialLoad = useRef(true);

const [allAirlines, setAllAirlines] = useState([]);
const [allDestinations, setAllDestinations] = useState([]);
Expand Down Expand Up @@ -88,16 +89,35 @@ export default function FlightCreateForm() {
};

useEffect(() => {
if (airlines?.data) {
setAllAirlines((prev) => [...prev, ...airlines.data]);
if (isInitialLoad.current) {
isInitialLoad.current = false;
return;
}
if (airlines?.data && airlines.data.length > 0) {
setAllAirlines((prev) => {
const newAirlines = airlines.data.filter(
(airline) => !prev.some((prevAirline) => prevAirline.id === airline.id)
);
return [...prev, ...newAirlines];
});
}
if (destinations?.data) {
setAllDestinations((prev) => [...prev, ...destinations.data]);
if (destinations?.data && destinations.data.length > 0) {
setAllDestinations((prev) => {
const newDestinations = destinations.data.filter(
(destination) => !prev.some((prevDestination) => prevDestination.id === destination.id)
);
return [...prev, ...newDestinations];
});
}
if (pilots?.data) {
setAllPilots((prev) => [...prev, ...pilots.data]);
if (pilots?.data && pilots.data.length > 0) {
setAllPilots((prev) => {
const newPilots = pilots.data.filter(
(pilot) => !prev.some((prevPilot) => prevPilot.id === pilot.id)
);
return [...prev, ...newPilots];
});
}
}, [airlines.data, destinations.data, pilots.data]);
}, [pageNumber, airlines?.data, destinations?.data, pilots?.data]);

if (isLoadingAirlines || isLoadingDestinations || isLoadingPilots) {
return <LoadingSpinner />
Expand Down Expand Up @@ -149,8 +169,13 @@ export default function FlightCreateForm() {
</button>
</div>
<div className="form-group">
<input type="button" value="Load More" className="btn btn-primary"
id="loadMoreButton" onClick={handleLoadMore} />
<input
type="button"
value="Load More"
className="btn btn-primary"
id="loadMoreButton"
onClick={handleLoadMore}
disabled={isLoadingAirlines || isLoadingDestinations || isLoadingPilots} />
</div>
</div>
<div className="col-md-4">
Expand Down
47 changes: 35 additions & 12 deletions src/components/planeTicket/PlaneTicketCreateForm.jsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import React, { useState, useEffect } from 'react';
import React, { useState, useContext, useEffect, useRef } from 'react';
import useFetch from '../../hooks/useFetch.jsx';
import { useNavigate } from 'react-router-dom';
import { createData } from '../../utils/create.js';
import PageTitle from '../common/PageTitle.jsx';
import Alert from '../common/Alert.jsx';
import BackToListAction from '../common/pagination/BackToListAction.jsx';
import { useContext } from 'react';
import { DataContext } from '../../store/data-context.jsx';
import { validateFields } from '../../utils/validation/validateFields.js';
import { Entities } from '../../utils/const.js';
Expand All @@ -14,6 +13,7 @@ import LoadingSpinner from '../common/LoadingSpinner.jsx';
export default function PlaneTicketCreateForm() {

const [pageNumber, setPageNumber] = useState(1);
const isInitialLoad = useRef(true);

const [allPassengers, setAllPassengers] = useState([]);
const [allTravelClasses, setAllTravelClasses] = useState([]);
Expand Down Expand Up @@ -88,16 +88,35 @@ export default function PlaneTicketCreateForm() {
};

useEffect(() => {
if (passengers?.data) {
setAllPassengers((prev) => [...prev, ...passengers.data]);
if (isInitialLoad.current) {
isInitialLoad.current = false;
return;
}
if (travelClasses?.data) {
setAllTravelClasses((prev) => [...prev, ...travelClasses.data]);
if (passengers?.data && passengers.data.length > 0) {
setAllPassengers((prev) => {
const newPassengers = passengers.data.filter(
(passenger) => !prev.some((prevPassenger) => prevPassenger.id === passenger.id)
);
return [...prev, ...newPassengers];
});
}
if (flights?.data) {
setAllFlights((prev) => [...prev, ...flights.data]);
if (travelClasses?.data && travelClasses.data.length > 0) {
setAllTravelClasses((prev) => {
const newTravelClasses = travelClasses.data.filter(
(travelClass) => !prev.some((prevTravelClass) => prevTravelClass.id === travelClass.id)
);
return [...prev, ...newTravelClasses];
});
}
}, [flights.data, passengers.data, travelClasses.data]);
if (flights?.data && flights.data.length > 0) {
setAllFlights((prev) => {
const newFlights = flights.data.filter(
(flight) => !prev.some((prevFlight) => prevFlight.id === flight.id)
);
return [...prev, ...newFlights];
});
}
}, [pageNumber, passengers?.data, travelClasses?.data, flights?.data]);

if (isLoadingPassengers || isLoadingTravelClasses || isLoadingFlights) {
return <LoadingSpinner />
Expand All @@ -106,7 +125,6 @@ export default function PlaneTicketCreateForm() {
if (errorPassengers || errorTravelClasses || errorFlights) {
return <Alert alertType='danger' alertText='Error loading data..' />;
}

return (
<>
<PageTitle title='Create Plane Ticket' />
Expand Down Expand Up @@ -149,8 +167,13 @@ export default function PlaneTicketCreateForm() {
</button>
</div>
<div className="form-group">
<input type="button" value="Load More" className="btn btn-primary"
id="loadMoreButton" onClick={handleLoadMore} />
<input
type="button"
value="Load More"
className="btn btn-primary"
id="loadMoreButton"
onClick={handleLoadMore}
disabled={isLoadingPassengers || isLoadingTravelClasses || isLoadingFlights} />
</div>
</div>
<div className="col-md-4">
Expand Down

0 comments on commit c8767a1

Please sign in to comment.