Elegant handling of 'join graph'

backend/src/index.ts

@@ -4,12 +4,13 @@ import { Server } from 'socket.io';
 import config from './config';
 import { handleAuthenticate } from './websocket/auth/authenticate';
 import { handleLogout } from './websocket/auth/logout';
-import { handleJoinGraph, handleLeaveGraph } from './websocket/graphHandler';
+import { handleLeaveGraph } from './websocket/graphHandler';
 import { handleAddArgument } from './websocket/argumentHandler';
 import { handleAddReaction, handleRemoveReaction } from './websocket/reactionHandler';
 import { SocketHandler, SocketResponse } from './backendTypes';
 import { handleGetGraphs } from './websocket/graph/getGraphs';
 import { handleCreateGraph } from './websocket/graph/createGraph';
+import { handleJoinGraph } from './websocket/graph/joinGraph';
 
 const app = express();
 const server = http.createServer(app);
@@ -58,8 +59,8 @@ io.on('connection', (socket) => {
   socket.on('logout', wrapHandler(handleLogout));
   socket.on('get graphs', wrapHandler(handleGetGraphs));
   socket.on('create graph', wrapHandler(handleCreateGraph));
+  socket.on('join graph', wrapHandler(handleJoinGraph));
   // TODO Finish transition
-  socket.on('join graph', (graphId: string) => handleJoinGraph(socket, graphId));
   socket.on('leave graph', (graphId: string) => handleLeaveGraph(socket, graphId));
   socket.on('add argument', (args, callback) => handleAddArgument(socket, io, args, callback));
   socket.on('add reaction', (args, callback) => handleAddReaction(socket, io, args, callback));

backend/src/websocket/graph/joinGraph.ts

@@ -0,0 +1,21 @@
+import { Graph } from "../../.shared/types";
+import { SocketHandler } from "../../backendTypes";
+import { getGraphDataWithUserReactions } from "../../db/operations/graphOperations";
+
+interface JoinGraphData {
+  graphId: string;
+}
+
+interface JoinGraphResponse {
+  graph: Graph;
+}
+
+export const handleJoinGraph: SocketHandler<JoinGraphData, JoinGraphResponse> = async (socket, io, { graphId }) => {
+  socket.join(graphId);
+  console.log(`Socket ${socket.id} joining graph ${graphId}`);
+  const graph = await getGraphDataWithUserReactions(graphId, socket.data.user?.id);
+  return {
+    success: true,
+    data: { graph }
+  }
+}

backend/src/websocket/graphHandler.ts

@@ -1,12 +1,5 @@
 import { Socket } from 'socket.io';
-import { getGraphDataWithUserReactions } from '../db/operations/graphOperations';
 
-export const handleJoinGraph = async (socket: Socket, graphId: string) => {
-  console.log(`Socket ${socket.id} joining graph ${graphId}, user: ${socket.data.user?.id}`);
-  socket.join(graphId);
-  const graph = await getGraphDataWithUserReactions(graphId, socket.data.user?.id);
-  socket.emit('graph data', graph);
-};
 
 export const handleLeaveGraph = async (socket: Socket, graphId: string) => {
   console.log(`Socket ${socket.id} leaving graph ${graphId}`);

frontend/src/hooks/useGraph.ts

@@ -16,8 +16,13 @@ export function useGraph(graphId: string) {
   const [layoutData, setLayoutData] = useState<ForceGraphData>({ nodes: [], links: [] });
 
   useEffect(() => {
-    socket?.emit('join graph', graphId);
-    socket?.on('graph data', setGraph);
+    socket?.emit('join graph', { graphId }, (response: any) => {
+      if (response.success) {
+        setGraph(response.data.graph);
+      } else {
+        console.error('Failed to join graph:', response.error);
+      }
+    });
     socket?.on('graph update', setGraph);
     socket?.on('argument added', ({ argument, newEdges }) => {
       setGraph(prevGraph => {
@@ -55,7 +60,6 @@ export function useGraph(graphId: string) {
     });
     return () => {
       socket?.emit('leave graph', graphId);
-      socket?.off('graph data');
       socket?.off('graph update');
       socket?.off('argument added');
       socket?.off('user reaction update');