completed basic Chat

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

@@ -8,16 +8,22 @@ import {
 	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 {
+		chatOpen,
+		setChatOpen,
+		sendMessage,
+		addChat,
+		chats,
+		setOwnId,
+		selectedChat,
+		setSelectedChat,
+		setChatNotification,
+	} = 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);
@@ -30,39 +36,54 @@ export const Chat = () => {
 	useEffect(() => {
 		const fetchDispatcher = async () => {
 			const data = await getDispatcher();
-			setDispatcher(data);
-			setAddTabValue(data[0]?.userId || "");
+			if (data) {
+				const filteredDispatcher = data.filter((user) => {
+					return (
+						user.userId !== session.data?.user.id &&
+						!Object.keys(chats).includes(user.userId)
+					);
+				});
+				setDispatcher(filteredDispatcher);
+			}
+			if (!addTabValue && data[0]) setAddTabValue(data[0].userId);
 		};
 
 		timeout.current = setInterval(() => {
 			fetchDispatcher();
-		}, 10000);
+		}, 1000);
 		fetchDispatcher();
 
 		return () => {
 			if (timeout.current) {
 				clearInterval(timeout.current);
+				timeout.current = null;
+				console.log("cleared");
 			}
 		};
-	}, []);
+	}, [addTabValue, chats]);
 
 	return (
 		<div
-			className={cn(
-				"dropdown dropdown-center",
-				dropdownOpen && "dropdown-open",
-			)}
+			className={cn("dropdown dropdown-center", chatOpen && "dropdown-open")}
 		>
-			<button
-				className="btn btn-soft btn-sm btn-primary"
-				onClick={() => {
-					console.log("clicked");
-					setDropdownOpen((prev) => !prev);
-				}}
-			>
-				<ChatBubbleIcon className="w-4 h-4" />
-			</button>
-			{dropdownOpen && (
+			<div className="indicator">
+				{Object.values(chats).some((c) => c.notification) && (
+					<span className="indicator-item status status-info"></span>
+				)}
+				<button
+					className="btn btn-soft btn-sm btn-primary"
+					onClick={() => {
+						console.log("clicked");
+						setChatOpen(!chatOpen);
+						if (selectedChat) {
+							setChatNotification(selectedChat, false);
+						}
+					}}
+				>
+					<ChatBubbleIcon className="w-4 h-4" />
+				</button>
+			</div>
+			{chatOpen && (
 				<div
 					tabIndex={0}
 					className="dropdown-content card bg-base-200 w-150 shadow-md z-[1100]"
@@ -74,9 +95,9 @@ export const Chat = () => {
 								value={addTabValue}
 								onChange={(e) => setAddTabValue(e.target.value)}
 							>
-								<option key={"default"} disabled={true}>
-									Wähle einen Chatpartner...
-								</option>
+								{!dispatcher?.length && (
+									<option disabled={true}>Keine Chatpartner gefunden</option>
+								)}
 								{dispatcher?.map((user) => (
 									<option key={user.userId} value={user.userId}>
 										{user.name}
@@ -91,7 +112,7 @@ export const Chat = () => {
 									);
 									if (!user) return;
 									addChat(addTabValue, user.name);
-									// setSelectedTab(addTabValue);
+									setSelectedChat(addTabValue);
 								}}
 							>
 								<span className="text-xl">+</span>
@@ -108,11 +129,14 @@ export const Chat = () => {
 											name="my_tabs_3"
 											className="tab"
 											aria-label={`<${chat.name}>`}
-											checked={selectedTab === userId}
+											checked={selectedChat === userId}
+											onClick={() => {
+												setChatNotification(userId, false);
+											}}
 											onChange={(e) => {
 												if (e.target.checked) {
 													// Handle tab change
-													setSelectedTab(userId);
+													setSelectedChat(userId);
 												}
 											}}
 										/>
@@ -164,10 +188,10 @@ export const Chat = () => {
 								className="btn btn-soft join-item"
 								onClick={(e) => {
 									e.preventDefault();
-									setSending(true);
 									if (message.length < 1) return;
-									if (!selectedTab) return;
-									sendMessage(selectedTab, message)
+									if (!selectedChat) return;
+									setSending(true);
+									sendMessage(selectedChat, message)
 										.then(() => {
 											setMessage("");
 											setSending(false);