From c8767a1696085c647f48973fe3b691763646c0d7 Mon Sep 17 00:00:00 2001
From: Ognjen Andjelic <andjelicb.ognjen@gmail.com>
Date: Sun, 29 Dec 2024 17:57:08 +0100
Subject: [PATCH] Flight and PlaneTicket create form update

---
 src/components/flight/FlightCreateForm.jsx    | 45 ++++++++++++++----
 .../planeTicket/PlaneTicketCreateForm.jsx     | 47 ++++++++++++++-----
 2 files changed, 70 insertions(+), 22 deletions(-)

diff --git a/src/components/flight/FlightCreateForm.jsx b/src/components/flight/FlightCreateForm.jsx
index 962563f..7b62c1c 100644
--- a/src/components/flight/FlightCreateForm.jsx
+++ b/src/components/flight/FlightCreateForm.jsx
@@ -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';
@@ -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([]);
@@ -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 />
@@ -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">
diff --git a/src/components/planeTicket/PlaneTicketCreateForm.jsx b/src/components/planeTicket/PlaneTicketCreateForm.jsx
index 9bb9b67..08c5b8e 100644
--- a/src/components/planeTicket/PlaneTicketCreateForm.jsx
+++ b/src/components/planeTicket/PlaneTicketCreateForm.jsx
@@ -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';
@@ -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([]);
@@ -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 />
@@ -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' />
@@ -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">