fixed chat zustand bug

apps/dispatch/app/(dispatch)/_components/navbar/_components/Chat.tsx

@@ -1,81 +1,196 @@
+"use client";
 import { ChatBubbleIcon, PaperPlaneIcon } from "@radix-ui/react-icons";
+import { useChatStore } from "_store/chatStore";
+import { useSession } from "next-auth/react";
+import { Fragment, useEffect, useRef, useState } from "react";
+import {
+	Dispatcher,
+	getDispatcher,
+} from "(dispatch)/_components/navbar/_components/action";
+import { cn } from "helpers/cn";
+import { socket } from "(dispatch)/socket";
+import { ChatMessage } from "@repo/db";
 
 export const Chat = () => {
+	const { sendMessage, addChat, chats, addMessage, setOwnId } = useChatStore();
+	const [sending, setSending] = useState(false);
+	const session = useSession();
+	const [dropdownOpen, setDropdownOpen] = useState(false);
+	const [addTabValue, setAddTabValue] = useState<string>("");
+	const [selectedTab, setSelectedTab] = useState<string | null>(null);
+	const [message, setMessage] = useState<string>("");
+	const [dispatcher, setDispatcher] = useState<Dispatcher[] | null>(null);
+	const timeout = useRef<NodeJS.Timeout | null>(null);
+
+	useEffect(() => {
+		if (!session.data?.user.id) return;
+		setOwnId(session.data.user.id);
+	}, [session]);
+
+	useEffect(() => {
+		const fetchDispatcher = async () => {
+			const data = await getDispatcher();
+			setDispatcher(data);
+			setAddTabValue(data[0]?.userId || "");
+		};
+
+		timeout.current = setInterval(() => {
+			fetchDispatcher();
+		}, 10000);
+		fetchDispatcher();
+
+		return () => {
+			if (timeout.current) {
+				clearInterval(timeout.current);
+			}
+		};
+	}, []);
+
 	return (
-		<div className="dropdown">
-			<div
-				tabIndex={0}
-				role="button"
+		<div
+			className={cn(
+				"dropdown dropdown-center",
+				dropdownOpen && "dropdown-open",
+			)}
+		>
+			<button
 				className="btn btn-soft btn-sm btn-primary"
+				onClick={() => {
+					console.log("clicked");
+					setDropdownOpen((prev) => !prev);
+				}}
 			>
 				<ChatBubbleIcon className="w-4 h-4" />
-			</div>
-			<div
-				tabIndex={0}
-				className="dropdown-content card bg-base-200 w-150 shadow-md z-[1100]"
-			>
-				<div className="card-body">
-					<div className="join">
-						<select defaultValue="Small" className="select select-sm w-full">
-							<option disabled={true}>Wähle einen Chatpartner...</option>
-							<option>&lt;LST_01&gt; Nicolas Kratsos #VAR0002</option>
-							<option>&lt;CHX31&gt; Vorname Nachname #VAR1010</option>
-							<option>&lt;CHX100&gt; Vorname Nachname #VAR1010</option>
-						</select>
-						<button className="btn btn-sm btn-soft btn-primary join-item">
-							<span className="text-xl">+</span>
-						</button>
-					</div>
-					<div className="tabs tabs-lift">
-						<input
-							type="radio"
-							name="my_tabs_3"
-							className="tab"
-							aria-label="&lt;LST_01&gt;"
-						/>
-						<div className="tab-content bg-base-100 border-base-300 p-6">
-							<div className="chat chat-start">
-								<div className="chat-header">
-									&lt;LST_01&gt; Nicolas Kratsos #VAR0002
-								</div>
-								<div className="chat-bubble">LST v2 ist schon nice</div>
-							</div>
-							<div className="chat chat-end">
-								<div className="chat-bubble">Hast recht.</div>
-							</div>
+			</button>
+			{dropdownOpen && (
+				<div
+					tabIndex={0}
+					className="dropdown-content card bg-base-200 w-150 shadow-md z-[1100]"
+				>
+					<div className="card-body">
+						<div className="join">
+							<select
+								className="select select-sm w-full"
+								value={addTabValue}
+								onChange={(e) => setAddTabValue(e.target.value)}
+							>
+								<option key={"default"} disabled={true}>
+									Wähle einen Chatpartner...
+								</option>
+								{dispatcher?.map((user) => (
+									<option key={user.userId} value={user.userId}>
+										{user.name}
+									</option>
+								))}
+							</select>
+							<button
+								className="btn btn-sm btn-soft btn-primary join-item"
+								onClick={() => {
+									const user = dispatcher?.find(
+										(user) => user.userId === addTabValue,
+									);
+									if (!user) return;
+									addChat(addTabValue, user.name);
+									// setSelectedTab(addTabValue);
+								}}
+							>
+								<span className="text-xl">+</span>
+							</button>
 						</div>
-
-						<input
-							type="radio"
-							name="my_tabs_3"
-							className="tab"
-							aria-label="&lt;CHX31&gt;"
-							defaultChecked
-						/>
-						<div className="tab-content bg-base-100 border-base-300 p-6">
-							<div className="chat chat-start">
-								<div className="chat-header">
-									&lt;LST_01&gt; Nicolas Kratsos #VAR0002
-								</div>
-								<div className="chat-bubble">get rekt lmao</div>
-							</div>
-							<div className="chat chat-end">
-								<div className="chat-bubble">no u.</div>
-							</div>
+						<div className="tabs tabs-lift">
+							{Object.keys(chats).map((userId) => {
+								const chat = chats[userId];
+								if (!chat) return null;
+								return (
+									<Fragment key={userId}>
+										<input
+											type="radio"
+											name="my_tabs_3"
+											className="tab"
+											aria-label={`<${chat.name}>`}
+											checked={selectedTab === userId}
+											onChange={(e) => {
+												if (e.target.checked) {
+													// Handle tab change
+													setSelectedTab(userId);
+												}
+											}}
+										/>
+										<div className="tab-content bg-base-100 border-base-300 p-6">
+											{chat.messages.map((chatMessage) => {
+												const isSender =
+													chatMessage.senderId === session.data?.user.id;
+												return (
+													<div
+														key={chatMessage.id}
+														className={`chat ${isSender ? "chat-end" : "chat-start"}`}
+													>
+														<p className="chat-footer opacity-50">
+															{new Date(
+																chatMessage.timestamp,
+															).toLocaleTimeString()}
+														</p>
+														<div className="chat-bubble">
+															{chatMessage.text}
+														</div>
+													</div>
+												);
+											})}
+											{!chat.messages.length && (
+												<p className="text-xs opacity-50">
+													Noch keine Nachrichten
+												</p>
+											)}
+										</div>
+									</Fragment>
+								);
+							})}
 						</div>
-					</div>
-					<div className="join">
-						<div className="w-full">
-							<label className="input validator join-item w-full">
-								<input type="text" required className="w-full" />
-							</label>
+						<div className="join">
+							<div className="w-full">
+								<label className="input join-item w-full">
+									<input
+										type="text"
+										required
+										className="w-full"
+										onChange={(e) => {
+											setMessage(e.target.value);
+										}}
+										value={message}
+									/>
+								</label>
+							</div>
+							<button
+								className="btn btn-soft join-item"
+								onClick={(e) => {
+									e.preventDefault();
+									setSending(true);
+									if (message.length < 1) return;
+									if (!selectedTab) return;
+									sendMessage(selectedTab, message)
+										.then(() => {
+											setMessage("");
+											setSending(false);
+										})
+										.catch(() => {
+											setSending(false);
+										});
+									return false;
+								}}
+								disabled={sending}
+								role="button"
+								onSubmit={(e) => false}
+							>
+								{sending ? (
+									<span className="loading loading-spinner loading-sm"></span>
+								) : (
+									<PaperPlaneIcon />
+								)}
+							</button>
 						</div>
-						<button className="btn btn-soft join-item">
-							<PaperPlaneIcon />
-						</button>
 					</div>
 				</div>
-			</div>
+			)}
 		</div>
 	);
 };

apps/dispatch/app/(dispatch)/_components/navbar/_components/action.ts

@@ -0,0 +1,18 @@
+"use server";
+
+export interface Dispatcher {
+	userId: string;
+	lastSeen: string;
+	loginTime: string;
+	logoffTime: string;
+	selectedZone: string;
+	name: string;
+	socketId: string;
+}
+
+export const getDispatcher = async () => {
+	const res = await fetch(`
+        ${process.env.NEXT_PUBLIC_DISPATCH_SERVER_URL}/dispatcher`);
+	const data = await res.json();
+	return data as Dispatcher[];
+};