feat(admin): moved server build/update to full app

frontend/src/hooks/socket.io.hook.ts

@@ -1,22 +1,55 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import socket from "@/lib/socket.io";
 
-export function useSocketRoom<T>(roomId: string) {
+type RoomUpdatePayload<T> = {
+	roomId: string;
+	payloads: T[];
+};
+
+type RoomErrorPayload = {
+	roomId?: string;
+	message?: string;
+};
+
+export function useSocketRoom<T>(
+	roomId: string,
+	getKey?: (item: T) => string | number,
+) {
 	const [data, setData] = useState<T[]>([]);
 	const [info, setInfo] = useState(
 		"No data yet — join the room to start receiving",
 	);
 
+	const clearRoom = useCallback(
+		(id?: string | number) => {
+			if (id !== undefined && getKey) {
+				setData((prev) => prev.filter((item) => getKey(item) !== id));
+				setInfo(`Removed item ${id}`);
+				return;
+			}
+
+			setData([]);
+			setInfo("Room data cleared");
+		},
+		[getKey],
+	);
+
 	useEffect(() => {
 		function handleConnect() {
 			socket.emit("join-room", roomId);
+			setInfo(`Joined room: ${roomId}`);
 		}
 
-		function handleUpdate(payload: any) {
+		function handleUpdate(payload: RoomUpdatePayload<T>) {
+			// protects against other room updates hitting this hook
+			if (payload.roomId !== roomId) return;
+
 			setData((prev) => [...payload.payloads, ...prev]);
+			setInfo("");
 		}
 
-		function handleError(err: any) {
+		function handleError(err: RoomErrorPayload) {
+			if (err.roomId && err.roomId !== roomId) return;
 			setInfo(err.message ?? "Room error");
 		}
 
@@ -31,6 +64,7 @@ export function useSocketRoom<T>(roomId: string) {
 		// If already connected, join immediately
 		if (socket.connected) {
 			socket.emit("join-room", roomId);
+			setInfo(`Joined room: ${roomId}`);
 		}
 
 		return () => {
@@ -42,5 +76,5 @@ export function useSocketRoom<T>(roomId: string) {
 		};
 	}, [roomId]);
 
-	return { data, info };
+	return { data, info, clearRoom };
 }