dev

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);