refactor(dock door scanning): fixes and final writes for the intial trial went smooth

frontend/src/components/Sidebar/Warhouse.tsx

@@ -1,7 +1,7 @@
-import { useQuery } from "@tanstack/react-query";
+//import { useQuery } from "@tanstack/react-query";
 import { Link } from "@tanstack/react-router";
 import { ChevronRight, Link as link } from "lucide-react";
-import { permissionQuery } from "../../lib/queries/permsCheck";
+//import { permissionQuery } from "../../lib/queries/permsCheck";
 import {
 	Collapsible,
 	CollapsibleContent,
@@ -21,11 +21,11 @@ import {
 } from "../ui/sidebar";
 
 export default function WarehouseBar() {
-	const { data: canCreate = false } = useQuery(
-		permissionQuery({
-			warehouse: ["read"],
-		}),
-	);
+	// const { data: canCreate = false } = useQuery(
+	// 	permissionQuery({
+	// 		warehouse: ["read"],
+	// 	}),
+	// );
 
 	const { setOpen } = useSidebar();
 	const items = [
@@ -33,7 +33,7 @@ export default function WarehouseBar() {
 			title: "Dock Door Scanning",
 			url: "/warehouse",
 			//icon,
-			isActive: canCreate,
+			isActive: true,
 			items: [
 				{
 					title: "DockDoorScanning",

frontend/src/components/Sidebar/sidebar.tsx

@@ -24,11 +24,11 @@ export function AppSidebar() {
 		}),
 	);
 
-	const { data: canReadWarehouse = false } = useQuery(
-		permissionQuery({
-			warehouse: ["read"],
-		}),
-	);
+	// const { data: canReadWarehouse = false } = useQuery(
+	// 	permissionQuery({
+	// 		warehouse: ["read"],
+	// 	}),
+	// );
 
 	return (
 		<Sidebar
@@ -53,8 +53,7 @@ export function AppSidebar() {
 
 							{!isLoading &&
 								settings.filter((n: any) => n.name === "dockDoorScanning")[0]
-									?.active &&
-								canReadWarehouse && <WarehouseBar />}
+									?.active && <WarehouseBar />}
 
 							{session &&
 								(session.user.role === "admin" ||

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

@@ -1,68 +1,110 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
 import socket from "@/lib/socket.io";
 
+type RoomParams = Record<string, unknown>;
+
+type JoinRoomPayload = {
+	room: string;
+	params?: RoomParams;
+};
+
 type RoomUpdatePayload<T> = {
 	roomId: string;
 	payloads: T[];
+	type: string;
+};
+
+type RoomJoinedPayload = {
+	room: string;
+	roomId: string;
 };
 
 type RoomErrorPayload = {
+	room?: string;
 	roomId?: string;
 	message?: string;
 };
 
-type UpdateMode = "append" | "replace";
-
-export function useSocketRoom<T>(
-	roomId: string,
-	getKey?: (item: T) => string | number,
-	updateMode: UpdateMode = "append",
-) {
+export function useSocketRoom<T>(room: string, params?: RoomParams) {
+	const [actualRoomId, setActualRoomId] = useState<string | null>(null);
 	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;
-			}
-			console.log("cleared data from the room");
-			setData([]);
-			setInfo("Room data cleared");
-		},
-		[getKey],
+	// This is the payload we send to the server.
+	// Example:
+	// { room: "inventory", params: { location: "ppoo" } }
+	const joinPayload = useMemo<JoinRoomPayload>(
+		() => ({
+			room,
+			params,
+		}),
+		[room, params],
 	);
 
+	const clearRoom = useCallback((filterFn?: (item: T) => boolean) => {
+		if (filterFn) {
+			setData((prev) => prev.filter((item) => !filterFn(item)));
+			return;
+		}
+
+		setData([]);
+		setInfo("Room data cleared");
+	}, []);
+
 	useEffect(() => {
-		function handleConnect() {
-			socket.emit("join-room", roomId);
-			setInfo(`Joined room: ${roomId}`);
+		// Join the logical room.
+		// The server decides the real Socket.IO roomId.
+		// Example:
+		// client sends: { room: "inventory", params: { location: "ppoo" } }
+		// server joins: "inventory:ppoo"
+		function joinRoom() {
+			socket.emit("join-room", joinPayload);
+			setInfo(`Joining room: ${room}`);
+		}
+
+		// Server should emit this after socket.join(actualRoom).
+		// This lets the client know the final roomId to filter updates by.
+		function handleJoined(payload: RoomJoinedPayload) {
+			//if (payload.room !== room) return;
+
+			setActualRoomId(payload.roomId);
+			setInfo(`Joined room: ${payload.roomId}`);
 		}
 
 		function handleUpdate(payload: RoomUpdatePayload<T>) {
-			// protects against other room updates hitting this hook
-			if (payload.roomId !== roomId) return;
+			// If we know the actual roomId, only accept updates for that room.
+			// This protects against other pages/rooms also listening to "room-update".
 
-			// resetting room data for rooms that just need updated data.
-			if (updateMode === "replace") {
+			if (!actualRoomId) return;
+
+			if (payload.roomId !== actualRoomId) return;
+
+			if (payload.type === "snapshot") {
 				setData(payload.payloads);
-			} else {
-				setData((prev) => [...payload.payloads, ...prev]);
+				return;
 			}
 
+			// Append mode is good for logs/scans/events.
+			setData((prev) => [...payload.payloads, ...prev]);
 			setInfo("");
 		}
 
 		function handleError(err: RoomErrorPayload) {
-			if (err.roomId && err.roomId !== roomId) return;
+			// Ignore errors for other logical rooms.
+			if (err.room && err.room !== room) return;
+
+			// Ignore errors for other actual rooms.
+			if (err.roomId && room && err.roomId !== room) return;
+
+			toast.error(err.message);
 			setInfo(err.message ?? "Room error");
 		}
 
-		socket.on("connect", handleConnect);
+		socket.on("connect", joinRoom);
+		socket.on("room-joined", handleJoined);
 		socket.on("room-update", handleUpdate);
 		socket.on("room-error", handleError);
 
@@ -70,31 +112,26 @@ export function useSocketRoom<T>(
 			socket.connect();
 		}
 
-		// If already connected, join immediately
+		// If socket is already connected, join immediately.
 		if (socket.connected) {
-			socket.emit("join-room", roomId);
-			setInfo(`Joined room: ${roomId}`);
+			joinRoom();
 		}
 
 		return () => {
-			socket.emit("leave-room", roomId);
+			// Leave using the same logical room payload.
+			// Server should rebuild the actual room and call socket.leave(actualRoom).
+			socket.emit("leave-room", joinPayload);
 
-			socket.off("connect", handleConnect);
+			socket.off("connect", joinRoom);
+			socket.off("room-joined", handleJoined);
 			socket.off("room-update", handleUpdate);
 			socket.off("room-error", handleError);
 		};
-	}, [roomId, updateMode]);
+	}, [room, joinPayload, actualRoomId]);
 
-	return { data, info, clearRoom };
+	return {
+		data,
+		info,
+		clearRoom,
+	};
 }
-
-/*
-
-const isDockDoorPage = location.pathname.startsWith("/dockdoor");
-
-useSocketRoom(
-	dockId ? `dockdoor:${dockId}` : null,
-	isDockDoorPage,
-);
-
-*/

frontend/src/routes/warehouse/dockdoorscanning/index.tsx

@@ -21,6 +21,7 @@ export const finishLoadingOrder = async (
 	dockId: string,
 	refetch: any,
 	refetchActiveLoading: any,
+	clear?: boolean,
 ) => {
 	try {
 		const res = await api.post(
@@ -28,6 +29,7 @@ export const finishLoadingOrder = async (
 			{
 				loadingOrder: loadingOrder,
 				dockId: dockId,
+				clear,
 			},
 			{ validateStatus: (status) => status < 500 },
 		);
@@ -80,8 +82,8 @@ function RouteComponent() {
 										(x: any) => x.id === Number(i.currentLoadingOrder),
 									)
 								: [];
-						console.log(loadingPlan);
-						console.log(loadingPlanItems);
+						// console.log(loadingPlan);
+						// console.log(loadingPlanItems);
 						return (
 							<Card
 								key={i.id}
@@ -150,6 +152,7 @@ function RouteComponent() {
 																	i.dockId,
 																	refetch,
 																	refetchActiveLoading,
+																	true,
 																)
 															}
 														>

frontend/src/routes/warehouse/dockdoorscanning/scans/$dockScans.tsx

@@ -2,6 +2,7 @@ import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
 import { createColumnHelper } from "@tanstack/react-table";
 import { formatInTimeZone } from "date-fns-tz";
+import { useEffect, useMemo } from "react";
 import { toast } from "sonner";
 import { Button } from "../../../../components/ui/button";
 import { useSocketRoom } from "../../../../hooks/socket.io.hook";
@@ -21,11 +22,25 @@ export const Route = createFileRoute(
 });
 
 function RouteComponent() {
-	const { dockScans } = Route.useParams();
-	const { data: logs, clearRoom } = useSocketRoom<any>(
-		`dockDoorLoading:${dockScans}`,
+	const { data: canSee = false } = useQuery(
+		permissionQuery({
+			warehouse: ["update"],
+		}),
 	);
 	const { data, refetch } = useSuspenseQuery(getActiveDockScanners());
+	const { dockScans } = Route.useParams();
+	const params = useMemo(
+		() => ({
+			dockId: dockScans,
+			loadingOrder: data[0].currentLoadingOrder ?? undefined,
+		}),
+		[dockScans, data],
+	);
+	const { data: logs, clearRoom } = useSocketRoom<any>(
+		`dockDoorLoading`,
+		params,
+	);
+
 	const { data: loadingPlanItems, refetch: refetchActiveLoading } =
 		useSuspenseQuery(getActiveLoadingOrders());
 
@@ -36,6 +51,24 @@ function RouteComponent() {
 	);
 	const columnHelper = createColumnHelper<any>();
 
+	const logCount = logs.length;
+
+	// TODO: move this to an onMessage: handFunction
+	/*
+	const handleLogMessage = useCallback(() => {
+	refetchActiveLoading();
+	}, [refetchActiveLoading]);
+
+	const { data: logs } = useSocketRoom<LogEntry>("logs", {
+		onMessage: handleLogMessage,
+	});
+	*/
+
+	// biome-ignore lint: false
+	useEffect(() => {
+		refetchActiveLoading();
+	}, [logCount, refetchActiveLoading]);
+
 	const column = [
 		columnHelper.accessor("loadingOrder", {
 			header: ({ column }) => (
@@ -147,33 +180,36 @@ function RouteComponent() {
 				</p>
 			</div>
 			<div className="flex flex-col">
-				<div>
-					<form
-						onSubmit={(e) => {
-							e.preventDefault();
-							form.handleSubmit();
-						}}
-					>
-						<div className="flex flex-row">
-							<div className="mb-2 mr-2 max-w-48">
-								<form.AppField name="runningNo">
-									{(field) => (
-										<field.InputField
-											label="Running Number"
-											inputType="text"
-											required={true}
-										/>
-									)}
-								</form.AppField>
+				{canSee && (
+					<div>
+						<form
+							onSubmit={(e) => {
+								e.preventDefault();
+								form.handleSubmit();
+							}}
+						>
+							<div className="flex flex-row">
+								<div className="mb-2 mr-2 max-w-48">
+									<form.AppField name="runningNo">
+										{(field) => (
+											<field.InputField
+												label="Running Number"
+												inputType="text"
+												required={true}
+											/>
+										)}
+									</form.AppField>
+								</div>
+								<div className="flex justify-end mt-8 mr-3 ">
+									<form.AppForm>
+										<form.SubmitButton>Submit</form.SubmitButton>
+									</form.AppForm>
+								</div>
 							</div>
-							<div className="flex justify-end mt-8 mr-3 ">
-								<form.AppForm>
-									<form.SubmitButton>Submit</form.SubmitButton>
-								</form.AppForm>
-							</div>
-						</div>
-					</form>
-				</div>
+						</form>
+					</div>
+				)}
+
 				{loadingPlan && loadingPlan.length > 0 && (
 					<div className="flex mb-2 gap-2">
 						<Button