more logging stuff

frontend/src/routes/admin/logs.tsx

@@ -1,7 +1,6 @@
 import { createFileRoute, redirect } from "@tanstack/react-router";
-import { useEffect, useState } from "react";
+import { useSocketRoom } from "@/hooks/socket.io.hook";
 import { authClient } from "@/lib/auth-client";
-import socket from "@/lib/socket.io";
 
 export const Route = createFileRoute("/admin/logs")({
 	beforeLoad: async ({ location }) => {
@@ -60,40 +59,49 @@ function LevelBadge({ level }: { level: number }) {
 }
 
 function RouteComponent() {
+	const { data: logs, info: logsInfo } = useSocketRoom<LogEntry>("logs");
 	//const { user } = Route.useRouteContext();
 	//const router = useRouter();
-	const [logs, setLogs] = useState<LogEntry[]>([]);
+	// const [logs, setLogs] = useState<LogEntry[]>([]);
+	// const [logsInfo, setLogInfo] = useState(
+	// 	"No logs yet — join the room to start receiving",
+	// );
 
-	useEffect(() => {
-		// Connect if not already connected
-		if (!socket.connected) {
-			socket.connect();
-		}
+	// useEffect(() => {
+	// 	// Connect if not already connected
+	// 	if (!socket.connected) {
+	// 		socket.connect();
+	// 	}
 
-		socket.on("connect", () => {
-			socket.emit("join-room", "logs");
-		});
+	// 	socket.on("connect", () => {
+	// 		socket.emit("join-room", "logs");
+	// 	});
 
-		socket.emit("join-room", "logs");
-		socket.on(
-			"room-update",
-			(data: { payloads: LogEntry[]; roomId: string }) => {
-				setLogs((prev) => [...data.payloads, ...prev]);
-			},
-		);
+	// 	socket.emit("join-room", "logs");
+	// 	socket.on(
+	// 		"room-update",
+	// 		(data: { payloads: LogEntry[]; roomId: string }) => {
+	// 			setLogs((prev) => [...data.payloads, ...prev]);
+	// 		},
+	// 	);
 
-		// socket.on("logs", (data) => {
-		// 	console.log(data);
-		// 	setLogs((prev) => [...data.payloads, ...prev]);
-		// });
+	// 	socket.on("room-error", (data) => {
+	// 		setLogInfo(data.message);
+	// 	});
 
-		// Cleanup listeners on unmount
-		return () => {
-			socket.emit("leave-room", "logs");
-			socket.off("room-update");
-			socket.off("logs");
-		};
-	}, []);
+	// 	// socket.on("logs", (data) => {
+	// 	// 	console.log(data);
+	// 	// 	setLogs((prev) => [...data.payloads, ...prev]);
+	// 	// });
+
+	// 	// Cleanup listeners on unmount
+	// 	return () => {
+	// 		socket.emit("leave-room", "logs");
+	// 		socket.off("room-update");
+	// 		socket.off("room-error");
+	// 		socket.off("logs");
+	// 	};
+	// }, []);
 	return (
 		<div>
 			{/* Log Table */}
@@ -115,7 +123,7 @@ function RouteComponent() {
 									colSpan={6}
 									className="text-center py-6 text-muted-foreground"
 								>
-									No logs yet — join the room to start receiving
+									{logsInfo}
 								</td>
 							</tr>
 						) : (