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

apps/dispatch/app/_store/chatStore.ts

@@ -4,8 +4,16 @@ import { socket } from "(dispatch)/socket";
 
 interface ChatStore {
 	ownId: null | string;
+	selectedChat: string | null;
+	chatOpen: boolean;
+	setChatOpen: (open: boolean) => void;
+	setSelectedChat: (chatId: string | null) => void;
 	setOwnId: (id: string) => void;
-	chats: Record<string, { name: string; messages: ChatMessage[] }>;
+	chats: Record<
+		string,
+		{ name: string; notification: boolean; messages: ChatMessage[] }
+	>;
+	setChatNotification: (userId: string, notification: boolean) => void;
 	sendMessage: (userId: string, message: string) => Promise<void>;
 	addChat: (userId: string, name: string) => void;
 	addMessage: (userId: string, message: ChatMessage) => void;
@@ -13,11 +21,14 @@ interface ChatStore {
 
 export const useChatStore = create<ChatStore>((set, get) => ({
 	ownId: null,
+	chatOpen: false,
+	selectedChat: null,
+	setChatOpen: (open: boolean) => set({ chatOpen: open }),
+	setSelectedChat: (chatId: string | null) => set({ selectedChat: chatId }),
 	setOwnId: (id: string) => set({ ownId: id }),
 	chats: {},
 	sendMessage: (userId: string, message: string) => {
 		return new Promise((resolve, reject) => {
-			console.log("sendMessage", userId, message);
 			socket.emit(
 				"send-message",
 				{ userId, message },
@@ -35,22 +46,44 @@ export const useChatStore = create<ChatStore>((set, get) => ({
 		set((state) => ({
 			chats: {
 				...state.chats, // Bestehende Chats beibehalten
-				[userId]: { name, messages: [] }, // Neuen Chat hinzufügen
+				[userId]: { name, notification: false, messages: [] }, // Neuen Chat hinzufügen
 			},
 		}));
 	},
-	addMessage: (userId: string, message: ChatMessage) => {
-		console.log("addMessage", userId, message);
+	setChatNotification: (userId, notification) => {
+		const chat = get().chats[userId];
+		if (!chat) return;
+		console.log("setChatNotification", userId, notification);
 		set((state) => {
-			const user = state.chats[userId] || { name: userId, messages: [] };
+			return {
+				chats: {
+					...state.chats,
+					[userId]: {
+						...chat,
+						notification,
+					},
+				},
+			};
+		});
+	},
+	addMessage: (userId: string, message: ChatMessage) => {
+		set((state) => {
+			const user = state.chats[userId] || {
+				name: userId,
+				messages: [],
+				notification: false,
+			};
 			const isSender = message.senderId === state.ownId;
 
 			return {
+				selectedChat: state.selectedChat ? state.selectedChat : userId,
 				chats: {
 					...state.chats,
 					[userId]: {
 						...user,
 						name: isSender ? message.receiverName : message.senderName,
+						notification:
+							!isSender && (state.selectedChat !== userId || !state.chatOpen),
 						messages: [...user.messages, message], // Neuen Zustand erzeugen
 					},
 				},