dev

apps/dispatch/app/_store/leftMenuStore.ts

@@ -3,6 +3,8 @@ import { ChatMessage } from "@repo/db";
 import { socket } from "dispatch/socket";
 
 interface ChatStore {
+	reportTabOpen: boolean;
+	setReportTabOpen: (open: boolean) => void;
 	ownId: null | string;
 	selectedChat: string | null;
 	chatOpen: boolean;
@@ -19,7 +21,9 @@ interface ChatStore {
 	addMessage: (userId: string, message: ChatMessage) => void;
 }
 
-export const useChatStore = create<ChatStore>((set, get) => ({
+export const useLeftMenuStore = create<ChatStore>((set, get) => ({
+	reportTabOpen: false,
+	setReportTabOpen: (open: boolean) => set({ reportTabOpen: open }),
 	ownId: null,
 	chatOpen: false,
 	selectedChat: null,
@@ -95,7 +99,7 @@ export const useChatStore = create<ChatStore>((set, get) => ({
 socket.on(
 	"chat-message",
 	({ userId, message }: { userId: string; message: ChatMessage }) => {
-		const store = useChatStore.getState();
+		const store = useLeftMenuStore.getState();
 		console.log("chat-message", userId, message);
 		// Update the chat store with the new message
 		store.addMessage(userId, message);

apps/dispatch/app/api/mission/route.ts

@@ -1,24 +0,0 @@
-import { Prisma, prisma } from "@repo/db";
-import { NextRequest, NextResponse } from "next/server";
-
-export const POST = async (req: NextRequest) => {
-	console.log(req.body);
-	const body = await req.json();
-	console.log(body);
-
-	const missions = await prisma.mission.findMany({
-		where: (body.filter as Prisma.MissionWhereInput) || {},
-	});
-
-	return NextResponse.json(missions);
-};
-
-export const PUT = async (req: NextRequest) => {
-	const body = await req.json();
-
-	const newMission = await prisma.mission.create({
-		data: body,
-	});
-
-	return NextResponse.json(newMission);
-};

apps/dispatch/app/dispatch/_components/left/Chat.tsx

@@ -1,14 +1,17 @@
 "use client";
 import { ChatBubbleIcon, PaperPlaneIcon } from "@radix-ui/react-icons";
-import { useChatStore } from "_store/chatStore";
+import { useLeftMenuStore } from "_store/leftMenuStore";
 import { useSession } from "next-auth/react";
 import { Fragment, useEffect, useRef, useState } from "react";
-import {
-	Dispatcher,
-	getDispatcher,
-} from "dispatch/_components/navbar/_components/action";
+import { Dispatcher } from "dispatch/_components/navbar/_components/action";
 import { cn } from "helpers/cn";
 import { useReportStore } from "_store/reportStore";
+import { serverApi } from "helpers/axios";
+
+export const getDispatcher = async () => {
+	const res = await serverApi.get<Dispatcher[]>(`/dispatcher`);
+	return res.data;
+};
 
 export const Chat = () => {
 	const { setReportOpen } = useReportStore();
@@ -22,7 +25,7 @@ export const Chat = () => {
 		selectedChat,
 		setSelectedChat,
 		setChatNotification,
-	} = useChatStore();
+	} = useLeftMenuStore();
 	const [sending, setSending] = useState(false);
 	const session = useSession();
 	const [addTabValue, setAddTabValue] = useState<string>("");
@@ -33,7 +36,7 @@ export const Chat = () => {
 	useEffect(() => {
 		if (!session.data?.user.id) return;
 		setOwnId(session.data.user.id);
-	}, [session]);
+	}, [session, setOwnId]);
 
 	useEffect(() => {
 		const fetchDispatcher = async () => {
@@ -52,7 +55,7 @@ export const Chat = () => {
 
 		timeout.current = setInterval(() => {
 			fetchDispatcher();
-		}, 1000000);
+		}, 1000);
 		fetchDispatcher();
 
 		return () => {
@@ -89,6 +92,9 @@ export const Chat = () => {
 					className="dropdown-content card bg-base-200 w-150 shadow-md z-[1100] ml-2 border-1 border-primary"
 				>
 					<div className="card-body">
+						<h2 className="inline-flex items-center gap-2 text-lg font-bold mb-2">
+							<ChatBubbleIcon /> Chat
+						</h2>
 						<div className="join">
 							<select
 								className="select select-sm w-full"
@@ -203,7 +209,7 @@ export const Chat = () => {
 								}}
 								disabled={sending}
 								role="button"
-								onSubmit={(e) => false}
+								onSubmit={() => false} // prevent submit event for react hook form
 							>
 								{sending ? (
 									<span className="loading loading-spinner loading-sm"></span>

apps/dispatch/app/dispatch/_components/left/Report.tsx

@@ -1,18 +1,16 @@
 "use client";
 import { ExclamationTriangleIcon, PaperPlaneIcon } from "@radix-ui/react-icons";
-import { useReportStore, sendReport } from "_store/reportStore";
 import { useSession } from "next-auth/react";
 import { useEffect, useRef, useState } from "react";
-import {
-	Dispatcher,
-	getDispatcher,
-} from "dispatch/_components/navbar/_components/action";
+import { Dispatcher } from "dispatch/_components/navbar/_components/action";
 import { cn } from "helpers/cn";
-import { useChatStore } from "_store/chatStore";
+import { useLeftMenuStore } from "_store/leftMenuStore";
+import { getDispatcher } from "dispatch/_components/left/Chat";
+import { serverApi } from "helpers/axios";
 
 export const Report = () => {
-	const { setChatOpen } = useChatStore();
-	const { reportOpen, setReportOpen, setOwnId } = useReportStore();
+	const { setChatOpen, setReportTabOpen, reportTabOpen, setOwnId } =
+		useLeftMenuStore();
 	const [sending, setSending] = useState(false);
 	const session = useSession();
 	const [selectedPlayer, setSelectedPlayer] = useState<string>("");
@@ -23,7 +21,7 @@ export const Report = () => {
 	useEffect(() => {
 		if (!session.data?.user.id) return;
 		setOwnId(session.data.user.id);
-	}, [session]);
+	}, [session, setOwnId]);
 
 	useEffect(() => {
 		const fetchDispatcher = async () => {
@@ -46,32 +44,37 @@ export const Report = () => {
 			if (timeout.current) {
 				clearInterval(timeout.current);
 				timeout.current = null;
-				console.log("cleared");
 			}
 		};
-	}, [selectedPlayer]);
+	}, [selectedPlayer, session.data?.user.id]);
 
 	return (
 		<div
-			className={cn("dropdown dropdown-right", reportOpen && "dropdown-open")}
+			className={cn(
+				"dropdown dropdown-right",
+				reportTabOpen && "dropdown-open",
+			)}
 		>
 			<div className="indicator">
 				<button
 					className="btn btn-soft btn-sm btn-error"
 					onClick={() => {
 						setChatOpen(false);
-						setReportOpen(!reportOpen);
+						setReportTabOpen(!reportTabOpen);
 					}}
 				>
 					<ExclamationTriangleIcon className="w-4 h-4" />
 				</button>
 			</div>
-			{reportOpen && (
+			{reportTabOpen && (
 				<div
 					tabIndex={0}
 					className="dropdown-content card bg-base-200 w-150 shadow-md z-[1100] ml-2 border-1 border-error"
 				>
 					<div className="card-body">
+						<h2 className="inline-flex items-center gap-2 text-lg font-bold mb-2">
+							<ExclamationTriangleIcon /> Report senden
+						</h2>
 						<div className="join">
 							<select
 								className="select select-sm w-full"
@@ -107,7 +110,13 @@ export const Report = () => {
 									e.preventDefault();
 									if (message.length < 1 || !selectedPlayer) return;
 									setSending(true);
-									sendReport(selectedPlayer, message)
+									serverApi("/report", {
+										method: "POST",
+										data: {
+											message,
+											to: selectedPlayer,
+										},
+									})
 										.then(() => {
 											setMessage("");
 											setSending(false);

apps/dispatch/app/pilot/_components/navbar/Chat.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { ChatBubbleIcon, PaperPlaneIcon } from "@radix-ui/react-icons";
-import { useChatStore } from "_store/chatStore";
+import { leftMenuStore } from "_store/leftMenuStore";
 import { useSession } from "next-auth/react";
 import { Fragment, useEffect, useRef, useState } from "react";
 import {
@@ -20,7 +20,7 @@ export const Chat = () => {
 		selectedChat,
 		setSelectedChat,
 		setChatNotification,
-	} = useChatStore();
+	} = leftMenuStore();
 	const [sending, setSending] = useState(false);
 	const session = useSession();
 	const [addTabValue, setAddTabValue] = useState<string>("");