FCE-2767 fetch older events on room join (#52)

* preserve game state

* display toast on error

* format

Author: czerwiukk

deep-sea-stories/packages/backend/src/controllers/notifications.ts

@@ -4,6 +4,18 @@ import { tracked } from '@trpc/server';
 import { z } from 'zod';
 import { publicProcedure } from '../trpc.js';
 
+export const getEvents = publicProcedure
+	.input(z.object({ roomId: z.string() }))
+	.query(({ ctx, input }) => {
+		const history = ctx.notifierService.getEventHistory(input.roomId);
+		const lastEventId =
+			history.length > 0 ? history[history.length - 1].id.toString() : null;
+		return {
+			events: history.map(({ event }) => event),
+			lastEventId,
+		};
+	});
+
 export const Notifications = publicProcedure
 	.input(
 		z.object({

deep-sea-stories/packages/backend/src/router.ts

@@ -1,4 +1,4 @@
-import { Notifications } from './controllers/notifications.js';
+import { Notifications, getEvents } from './controllers/notifications.js';
 import { createPeer } from './controllers/peers.js';
 import { createRoom } from './controllers/rooms.js';
 import {
@@ -18,6 +18,7 @@ export const appRouter = router({
 	stopGame,
 	getStories,
 	Notifications,
+	getEvents,
 	muteVoiceAgent,
 });
 

deep-sea-stories/packages/web/src/assets/elevenlabs.svg

@@ -1,6 +1,8 @@
 import type { AgentEvent } from '@deep-sea-stories/common';
 import { useEffect, useState } from 'react';
 import { useTRPCClient } from '@/contexts/trpc';
+import { toast } from '@/components/ui/sonner';
+import { X } from 'lucide-react';
 
 export const useAgentEvents = (roomId?: string) => {
 	const [events, setEvents] = useState<AgentEvent[]>([]);
@@ -11,31 +13,39 @@ export const useAgentEvents = (roomId?: string) => {
 
 		setEvents([]);
 
-		const subscription = trpcClient.Notifications.subscribe(
-			{ roomId, lastEventId: undefined },
-			{
-				onStarted: () => {
-					console.log(
-						'[useAgentEvents] Subscription started successfully for',
-						roomId,
-					);
-				},
-				onData: (data: unknown) => {
-					const event =
-						data && typeof data === 'object' && 'data' in data
-							? (data as { data: AgentEvent }).data
-							: (data as AgentEvent);
-					setEvents((prev) => [...prev, event]);
-				},
-				onError: (error: unknown) => {
-					console.error('[useAgentEvents] Subscription error:', error);
-				},
-			},
-		);
+		let subscription:
+			| ReturnType<typeof trpcClient.Notifications.subscribe>
+			| undefined;
+		let active = true;
+
+		trpcClient.getEvents
+			.query({ roomId })
+			.then(({ events: pastEvents, lastEventId }) => {
+				if (!active) return;
+
+				setEvents(pastEvents);
+
+				subscription = trpcClient.Notifications.subscribe(
+					{ roomId, lastEventId },
+					{
+						onData: (data: unknown) => {
+							const event =
+								data && typeof data === 'object' && 'data' in data
+									? (data as { data: AgentEvent }).data
+									: (data as AgentEvent);
+							setEvents((prev) => [...prev, event]);
+						},
+						onError: (error: unknown) => {
+							console.error('[useAgentEvents] Subscription error:', error);
+						},
+					},
+				);
+			})
+			.catch(() => toast('Failed to fetch events', X));
 
 		return () => {
-			console.log('[useAgentEvents] Unsubscribing from', roomId);
-			subscription.unsubscribe();
+			active = false;
+			subscription?.unsubscribe();
 		};
 	}, [trpcClient, roomId]);