Elegant handling of reactions

backend/src/index.ts

@@ -4,13 +4,14 @@ import { Server } from 'socket.io';
 import config from './config';
 import { handleAuthenticate } from './websocket/auth/authenticate';
 import { handleLogout } from './websocket/auth/logout';
-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';
 import { handleLeaveGraph } from './websocket/graph/leaveGraph';
 import { handleAddArgument } from './websocket/argument/addArgument';
+import { handleAddReaction } from './websocket/reaction/addReaction';
+import { handleRemoveReaction } from './websocket/reaction/removeReaction';
 
 const app = express();
 const server = http.createServer(app);
@@ -62,9 +63,9 @@ io.on('connection', (socket) => {
   socket.on('join graph', wrapHandler(handleJoinGraph));
   socket.on('leave graph', wrapHandler(handleLeaveGraph));
   socket.on('add argument', wrapHandler(handleAddArgument));
+  socket.on('add reaction', wrapHandler(handleAddReaction));
+  socket.on('remove reaction', wrapHandler(handleRemoveReaction));
   // TODO Finish transition
-  socket.on('add reaction', (args, callback) => handleAddReaction(socket, io, args, callback));
-  socket.on('remove reaction', (args, callback) => handleRemoveReaction(socket, io, args, callback));
   socket.on('disconnect', () => console.log(`User disconnected: ${socket.id}`));
   socket.on('reconnect', () => console.log(`User reconnected: ${socket.id}`));
 });

backend/src/websocket/reaction/addReaction.ts

@@ -0,0 +1,20 @@
+import { SocketHandler } from "../../backendTypes";
+import { query } from "../../db/db";
+import { addReaction } from "../../db/operations/reactionOperations";
+import { sendReactionUpdate } from "../updateHandler";
+
+interface AddReactionData {
+  argumentId: string;
+  type: 'agree' | 'disagree' | 'unclear';
+}
+
+export const handleAddReaction: SocketHandler<AddReactionData, {}> = async (socket, io, { argumentId, type }) => {
+  if (!socket.data.user) {
+    return { success: false, error: 'Authentication required' };
+  }
+
+  await addReaction(socket.data.user.id, argumentId, type);
+  const graphId = (await query('SELECT graph_id FROM arguments WHERE id = $1', [argumentId])).rows[0].graph_id;
+  sendReactionUpdate(socket, io, graphId, argumentId);
+  return { success: true };
+}

backend/src/websocket/reaction/removeReaction.ts

@@ -0,0 +1,20 @@
+import { SocketHandler } from "../../backendTypes";
+import { query } from "../../db/db";
+import { removeReaction } from "../../db/operations/reactionOperations";
+import { sendReactionUpdate } from "../updateHandler";
+
+interface RemoveReactionData {
+  argumentId: string;
+  type: 'agree' | 'disagree' | 'unclear';
+}
+
+export const handleRemoveReaction: SocketHandler<RemoveReactionData, {}> = async (socket, io, { argumentId, type }) => {
+  if (!socket.data.user) {
+    return { success: false, error: 'Authentication required' };
+  }
+
+  await removeReaction(socket.data.user.id, argumentId, type);
+  const graphId = (await query('SELECT graph_id FROM arguments WHERE id = $1', [argumentId])).rows[0].graph_id;
+  sendReactionUpdate(socket, io, graphId, argumentId);
+  return { success: true };
+}

frontend/src/components/ArgumentInfoBox/ArgumentInfoBox.tsx

@@ -55,11 +55,19 @@ const ArgumentInfoBox: React.FC<ArgumentInfoBoxProps> = ({
       socket.emit('add reaction', {
         argumentId: argument.id,
         type
+      }, (response: any) => {
+        if (!response.success) {
+          console.error('Failed to add reaction:', response.error);
+        }
       });
     } else {
       socket.emit('remove reaction', {
         argumentId: argument.id,
         type
+      }, (response: any) => {
+        if (!response.success) {
+          console.error('Failed to remove reaction:', response.error);
+        }
       });
     }
   };