Elegant handling of 'create graph'

backend/src/index.ts

@@ -4,11 +4,12 @@ import { Server } from 'socket.io';
 import config from './config';
 import { handleAuthenticate } from './websocket/auth/authenticate';
 import { handleLogout } from './websocket/auth/logout';
-import { handleCreateGraph, handleJoinGraph, handleLeaveGraph } from './websocket/graphHandler';
+import { handleJoinGraph, 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';
 
 const app = express();
 const server = http.createServer(app);
@@ -56,8 +57,8 @@ io.on('connection', (socket) => {
   socket.on('authenticate', wrapHandler(handleAuthenticate));
   socket.on('logout', wrapHandler(handleLogout));
   socket.on('get graphs', wrapHandler(handleGetGraphs));
+  socket.on('create graph', wrapHandler(handleCreateGraph));
   // TODO Finish transition
-  socket.on('create graph', (name, callback) => handleCreateGraph(socket, name, callback));
   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));

backend/src/websocket/graph/createGraph.ts

@@ -0,0 +1,25 @@
+import { SocketHandler } from "../../backendTypes";
+import { createGraph } from "../../db/operations/graphOperations";
+
+interface CreateGraphData {
+  name: string;
+}
+
+interface CreateGraphResponse {
+  id: string;
+}
+
+export const handleCreateGraph: SocketHandler<CreateGraphData, CreateGraphResponse> = async (socket, io, { name }) => {
+  if (!socket.data.user) {
+    return {
+      success: false,
+      error: 'Authentication required'
+    }
+  }
+
+  const graphId = await createGraph(name, socket.data.user.id);
+  return {
+    success: true,
+    data: { id: graphId }
+  }
+}

backend/src/websocket/graphHandler.ts

@@ -1,20 +1,5 @@
 import { Socket } from 'socket.io';
-import { createGraph, getGraphs, getGraphDataWithUserReactions } from '../db/operations/graphOperations';
-
-export const handleCreateGraph = async (socket: Socket, name: string, callback?: Function) => {
-  if (!socket.data.user) {
-    callback?.({ success: false, error: 'Authentication required' });
-    return;
-  }
-
-  try {
-    const graphId = await createGraph(name, socket.data.user.id);
-    callback?.({ success: true, id: graphId });
-  } catch (error) {
-    console.error('Error creating graph:', error);
-    callback?.({ success: false, error: 'Failed to create graph' });
-  }
-};
+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}`);

frontend/src/views/HomeView.tsx

@@ -18,22 +18,17 @@ const HomeView: React.FC = () => {
   const handleCreateGraph = (e: React.FormEvent) => {
     e.preventDefault();
     if (graphName.trim() && socket) {
-      console.log('Sending create graph event');
-      socket.emit('create graph', graphName);
-      setGraphName('');
+      socket.emit('create graph', { name: graphName }, (response: any) => {
+        if (response.success) {
+          navigate(`/graph/${response.data.id}`);
+        } else {
+          console.error('Failed to create graph:', response.error);
+          setError(response.error);
+        }
+      });
     }
   };
 
-  React.useEffect(() => {
-    socket?.on('graph created', ({ id }) => navigate(`/graph/${id}`));
-    socket?.on('graph creation error', ({ message }) => setError(message));
-
-    return () => {
-      socket?.off('graph created');
-      socket?.off('graph creation error');
-    };
-  }, [socket, navigate]);
-
   return (
     <div className="text-center px-4">
       <h1 className="mb-4 mt-8">Welcome to MindMeld</h1>