add status 9, statusToast bugfix

apps/dispatch/app/_components/customToasts/StationStatusToast.tsx

@@ -5,8 +5,9 @@ import { FMS_STATUS_COLORS } from "_helpers/fmsStatusColors";
 import { editConnectedAircraftAPI, getConnectedAircraftsAPI } from "_querys/aircrafts";
 import { getStationsAPI } from "_querys/stations";
 import { useMapStore } from "_store/mapStore";
+import { cpSync } from "fs";
 import { X } from "lucide-react";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Toast, toast } from "react-hot-toast";
 
 export const QUICK_RESPONSE: Record<string, string[]> = {
@@ -18,26 +19,32 @@ export const QUICK_RESPONSE: Record<string, string[]> = {
 export const StatusToast = ({ event, t }: { event: StationStatus; t: Toast }) => {
 	const status0Sounds = useRef<HTMLAudioElement | null>(null);
 	const status5Sounds = useRef<HTMLAudioElement | null>(null);
+	const status9Sounds = useRef<HTMLAudioElement | null>(null);
 
 	useEffect(() => {
 		if (typeof window !== "undefined") {
 			status0Sounds.current = new Audio("/sounds/status-0.mp3");
 			status5Sounds.current = new Audio("/sounds/status-5.mp3");
+			status9Sounds.current = new Audio("/sounds/status-9.mp3");
 		}
 	}, []);
-
+	const [aircraftDataAcurate, setAircraftDataAccurate] = useState(false);
 	const mapStore = useMapStore((s) => s);
 
 	const { data: connectedAircrafts } = useQuery({
 		queryKey: ["aircrafts"],
 		queryFn: () => getConnectedAircraftsAPI(),
 		refetchInterval: 10000,
+		initialData: [],
 	});
 	const { data: stations } = useQuery({
 		queryKey: ["stations"],
 		queryFn: () => getStationsAPI(),
 	});
 
+	const connectedAircraft = connectedAircrafts?.find((a) => a.id === event.data?.aircraftId);
+	const station = stations?.find((s) => s.id === event.data?.stationId);
+
 	const queryClient = useQueryClient();
 	const changeAircraftMutation = useMutation({
 		mutationFn: async ({
@@ -54,20 +61,41 @@ export const StatusToast = ({ event, t }: { event: StationStatus; t: Toast }) =>
 		},
 	});
 
-	const connectedAircraft = connectedAircrafts?.find((a) => a.id === event.data?.aircraftId);
-	const station = stations?.find((s) => s.id === event.data?.stationId);
+	useEffect(() => {
+		if (event.status !== connectedAircraft?.fmsStatus && aircraftDataAcurate) {
+			toast.remove(t.id);
+		} else if (event.status == connectedAircraft?.fmsStatus && !aircraftDataAcurate) {
+			setAircraftDataAccurate(true);
+		}
+	}, [connectedAircraft, station]);
 
 	useEffect(() => {
-		if (connectedAircraft?.fmsStatus === "0" && status0Sounds.current) {
-			status0Sounds.current.currentTime = 0;
-			status0Sounds.current.volume = 0.7;
-			status0Sounds.current.play();
-		} else if (connectedAircraft?.fmsStatus === "5" && status5Sounds.current) {
-			status5Sounds.current.currentTime = 0;
-			status5Sounds.current.volume = 0.7;
-			status5Sounds.current.play();
+		let soundRef: React.RefObject<HTMLAudioElement | null> | null = null;
+		switch (event.status) {
+			case "0":
+				soundRef = status0Sounds;
+				break;
+			case "5":
+				soundRef = status5Sounds;
+				break;
+			case "9":
+				soundRef = status9Sounds;
+				break;
+			default:
+				soundRef = null;
 		}
-	}, [connectedAircraft?.fmsStatus]);
+		if (soundRef?.current) {
+			soundRef.current.currentTime = 0;
+			soundRef.current.volume = 0.7;
+			soundRef.current.play().catch(() => {});
+		}
+		return () => {
+			if (soundRef?.current) {
+				soundRef.current.pause();
+				soundRef.current.currentTime = 0;
+			}
+		};
+	}, [event.status]);
 
 	if (!connectedAircraft || !station) return null;
 	return (
@@ -90,10 +118,10 @@ export const StatusToast = ({ event, t }: { event: StationStatus; t: Toast }) =>
 					>
 						{station.bosCallsign}
 					</span>
-					sendet Status {connectedAircraft.fmsStatus}
+					sendet Status {event.status}
 				</p>
 				<div className="flex gap-2 items-center">
-					{QUICK_RESPONSE[String(connectedAircraft.fmsStatus)]?.map((status) => (
+					{QUICK_RESPONSE[String(event.status)]?.map((status) => (
 						<button
 							key={status}
 							className={
@@ -104,8 +132,13 @@ export const StatusToast = ({ event, t }: { event: StationStatus; t: Toast }) =>
 								color: "white",
 							}}
 							onClick={async () => {
+								if (!event.data?.aircraftId) {
+									toast.remove(t.id);
+									toast.error("Keine Flugzeug-ID gefunden");
+									return;
+								}
 								await changeAircraftMutation.mutateAsync({
-									id: connectedAircraft.id,
+									id: event.data?.aircraftId,
 									update: {
 										fmsStatus: status,
 									},