Elegant handling of 'get graphs'

backend/src/index.ts

@@ -4,10 +4,11 @@ import { Server } from 'socket.io';
 import config from './config';
 import { handleAuthenticate } from './websocket/auth/authenticate';
 import { handleLogout } from './websocket/auth/logout';
-import { handleCreateGraph, handleGetGraphs, handleJoinGraph, handleLeaveGraph } from './websocket/graphHandler';
+import { handleCreateGraph, 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';
 
 const app = express();
 const server = http.createServer(app);
@@ -38,23 +39,27 @@ io.on('connection', (socket) => {
         .then(response => callback(response))
         .catch(error => {
           console.error('Socket handler error:', error);
+          const errorMessage =
+            error.code === 'ECONNREFUSED' || error.code === 'ETIMEDOUT'
+              ? 'Database connection issue (server) - please ensure IP is whitelisted'
+              : error.code === 'EADDRNOTAVAIL' || error.code === 'ENETUNREACH'
+                ? 'Network connection issue (server) - please check internet connection'
+                : 'Operation failed - please try again'
           callback({
             success: false,
-            error: error.code === 'ECONNREFUSED' || error.code === 'ETIMEDOUT'
-              ? 'Database connection issue - please ensure IP is whitelisted'
-              : 'Operation failed - please try again'
+            error: errorMessage
           })
         })
     }
   }
 
   socket.on('authenticate', wrapHandler(handleAuthenticate));
   socket.on('logout', wrapHandler(handleLogout));
+  socket.on('get graphs', wrapHandler(handleGetGraphs));
   // 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('get graphs', () => handleGetGraphs(socket));
   socket.on('add argument', (args, callback) => handleAddArgument(socket, io, args, callback));
   socket.on('add reaction', (args, callback) => handleAddReaction(socket, io, args, callback));
   socket.on('remove reaction', (args, callback) => handleRemoveReaction(socket, io, args, callback));

backend/src/websocket/graph/getGraphs.ts

@@ -0,0 +1,14 @@
+import { SocketHandler } from "../../backendTypes";
+import { getGraphs } from "../../db/operations/graphOperations";
+
+interface GetGraphsResponse {
+  graphs: { id: string, name: string }[]
+}
+
+export const handleGetGraphs: SocketHandler<{}, GetGraphsResponse> = async (socket, io, { }) => {
+  const graphs = await getGraphs();
+  return {
+    success: true,
+    data: { graphs }
+  };
+}

backend/src/websocket/graphHandler.ts

@@ -26,10 +26,4 @@ export const handleJoinGraph = async (socket: Socket, graphId: string) => {
 export const handleLeaveGraph = async (socket: Socket, graphId: string) => {
   console.log(`Socket ${socket.id} leaving graph ${graphId}`);
   socket.leave(graphId);
-};
-
-
-export const handleGetGraphs = async (socket: Socket) => {
-  const graphs = await getGraphs();
-  socket.emit('graphs list', graphs);
 };

frontend/src/views/GraphListView.tsx

@@ -17,15 +17,14 @@ const GraphListView: React.FC = () => {
   usePageTitle('All graphs');
 
   useEffect(() => {
-    socket?.emit('get graphs');
-
-    socket?.on('graphs list', (graphsList: Graph[]) => {
-      setGraphs(graphsList);
+    socket?.emit('get graphs', {}, (response: any) => {
+      if (response.success) {
+        setGraphs(response.data.graphs);
+      } else {
+        console.error('Failed to get graphs:', response.error);
+        // TODO Don't show loading indicator if this fails
+      }
     });
-
-    return () => {
-      socket?.off('graphs list');
-    };
   }, [socket]);
 
   return (