futher booking stuff

apps/hub/app/_components/NewBookingModal.tsx

@@ -4,6 +4,9 @@ import { useState, useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { X, CalendarIcon, Clock } from "lucide-react";
 import toast from "react-hot-toast";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { getStationsAPI } from "(app)/_querys/stations";
+import { createBookingAPI } from "(app)/_querys/bookings";
 
 interface Station {
 	id: number;
@@ -36,10 +39,24 @@ export const NewBookingModal = ({
 	onBookingCreated,
 	userPermissions,
 }: NewBookingModalProps) => {
-	const [stations, setStations] = useState<Station[]>([]);
-	const [loading, setLoading] = useState(false);
 	const [submitting, setSubmitting] = useState(false);
 
+	const queryClient = useQueryClient();
+	const { data: stations, isLoading: isLoadingStations } = useQuery({
+		queryKey: ["stations"],
+		queryFn: () => getStationsAPI({}),
+	});
+
+	const { mutate: createBooking, isPending: isCreateBookingLoading } = useMutation({
+		mutationKey: ["createBooking"],
+		mutationFn: createBookingAPI,
+
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["bookings"] });
+			onBookingCreated();
+		},
+	});
+
 	const {
 		register,
 		handleSubmit,
@@ -52,30 +69,6 @@ export const NewBookingModal = ({
 	const selectedType = watch("type");
 	const hasDISPOPermission = userPermissions.includes("DISPO");
 
-	// Fetch stations for selection
-	useEffect(() => {
-		const fetchStations = async () => {
-			setLoading(true);
-			try {
-				const response = await fetch("/api/station");
-				if (!response.ok) {
-					throw new Error("Failed to fetch stations");
-				}
-				const data = await response.json();
-				setStations(data.stations || []);
-			} catch (error) {
-				console.error("Error fetching stations:", error);
-				toast.error("Fehler beim Laden der Stationen");
-			} finally {
-				setLoading(false);
-			}
-		};
-
-		if (isOpen) {
-			fetchStations();
-		}
-	}, [isOpen]);
-
 	// Reset form when modal opens
 	useEffect(() => {
 		if (isOpen) {
@@ -106,24 +99,9 @@ export const NewBookingModal = ({
 				return;
 			}
 
-			const response = await fetch("/api/booking", {
-				method: "POST",
-				headers: {
-					"Content-Type": "application/json",
-				},
-				body: JSON.stringify(data),
-			});
+			const response = await createBooking(data);
 
-			const result = await response.json();
-
-			if (!response.ok) {
-				if (response.status === 409) {
-					toast.error(result.error || "Konflikt: Zeitraum bereits gebucht");
-				} else {
-					toast.error(result.error || "Fehler beim Erstellen der Buchung");
-				}
-				return;
-			}
+			console.log("Booking created:", response);
 
 			toast.success("Buchung erfolgreich erstellt!");
 			onBookingCreated();
@@ -167,10 +145,7 @@ export const NewBookingModal = ({
 							<option value="STATION">Station</option>
 							{hasDISPOPermission && (
 								<>
-									<option value="LST_01">LST-01</option>
-									<option value="LST_02">LST-02</option>
-									<option value="LST_03">LST-03</option>
-									<option value="LST_04">LST-04</option>
+									<option value="LST_01">Leitstelle</option>
 								</>
 							)}
 						</select>
@@ -187,7 +162,7 @@ export const NewBookingModal = ({
 							<label className="label">
 								<span className="label-text font-semibold">Station *</span>
 							</label>
-							{loading ? (
+							{isLoadingStations ? (
 								<div className="skeleton h-12 w-full"></div>
 							) : (
 								<select
@@ -198,7 +173,7 @@ export const NewBookingModal = ({
 									className="select select-bordered w-full"
 								>
 									<option value="">Station auswählen...</option>
-									{stations.map((station) => (
+									{stations?.map((station) => (
 										<option key={station.id} value={station.id}>
 											{station.bosCallsignShort} - {station.locationState} ({station.aircraft})
 										</option>