Add ISSUE_UPDATED event and improve event handling

This commit includes the addition of the ISSUE_UPDATED event in the socket handler together with enhanced event emission. Socket event handling has been optimized to unwrap the event responsibility from BOARD_UPDATED and ISSUE_UPDATED specific events to a more general emitEvent function. Also, to prevent memory leaks, appropriate clean-up actions have been added for the socket event listener in the frontend services.

backend/src/resolvers.js

@@ -6,7 +6,7 @@ import GraphQLUpload from 'graphql-upload/GraphQLUpload.mjs';
 import { isUndefined } from 'lodash-es';
 import board from './db/models/board.js';
 import { issueResolvers } from './resolvers/issue.js';
-import { emitBoardUpdatedEvent } from './socket/events.js';
+import { emitBoardUpdatedEvent, emitIssueUpdatedEvent } from './socket/events.js';
 
 // TODO: make these delete operations with SQL + minio inside a SQL transaction
 
@@ -62,8 +62,6 @@ const resolvers = {
 
       await board.save();
 
-      console.log({ io });
-
       emitBoardUpdatedEvent(io, board.toJSON());
 
       return board;
@@ -207,7 +205,7 @@ const resolvers = {
     //     assetFilename: path.basename(finalAssetPath),
     //   });
     // },
-    updateIssue: async (parent, { input }, { db }) => {
+    updateIssue: async (parent, { input }, { db, io }) => {
       const { id, issueStatusId, assigneeId, reporterId, title, description, tagIds, priority } = input;
 
       const issue = await db.sequelize.models.Issue.findByPk(id);
@@ -234,6 +232,8 @@ const resolvers = {
 
       await issue.save();
 
+      emitIssueUpdatedEvent(io, issue.toJSON());
+
       const issueStatus = await db.sequelize.models.IssueStatuses.findByPk(issueStatusId ?? issue.issueStatusId);
 
       return { ...issue.toJSON(), status: issueStatus.toJSON() };

backend/src/socket/events.js

@@ -1,12 +1,19 @@
 export const TYPE_BOARD_UPDATED = 'BOARD_UPDATED';
+export const TYPE_ISSUE_UPDATED = 'ISSUE_UPDATED';
 
 const room = 'general';
 
-export const emitBoardUpdatedEvent = (io, data) => {
-  const message = {
-    type: TYPE_BOARD_UPDATED,
+const emitEvent = (io, type, data) => {
+  io.to(room).emit('message', {
+    type,
     data,
-  };
+  });
+};
+
+export const emitBoardUpdatedEvent = (io, data) => {
+  emitEvent(io, TYPE_BOARD_UPDATED, data);
+};
 
-  io.to(room).emit('message', message);
+export const emitIssueUpdatedEvent = (io, data) => {
+  emitEvent(io, TYPE_ISSUE_UPDATED, data);
 };

frontend/components/Header/DropdownNotification.tsx

@@ -1,7 +1,6 @@
 'use client';
 import { useEffect, useRef, useState } from 'react';
 import Link from 'next/link';
-import axios from 'axios';
 import { notificationsTable } from '@/database/database.config';
 import { useLiveQuery } from 'dexie-react-hooks';
 import { CheckIcon } from '@heroicons/react/20/solid';
@@ -22,25 +21,24 @@ type Event = {
 };
 
 const DropdownNotification = () => {
+  const trigger = useRef<any>(null);
+  const dropdown = useRef<any>(null);
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const [notifying, setNotifying] = useState(false);
   const { socket, connected, error } = useAuthenticatedSocket();
 
-  // const [messages, setMessages] = useState<Event[]>([]);
-
-  const trigger = useRef<any>(null);
-  const dropdown = useRef<any>(null);
-
   useEffect(() => {
     if (connected) {
-      socket.on('message', (msg: any) => {
+      const eventHandler = (msg: any) => {
         console.log({ msg });
-        // notificationsTable.add({
-        //   ...msg,
-        //   subscriptionId: `http://${PUBLIC_NEXTAUTH_URL}/${msg.topic}`,
-        //   new: 1,
-        // });
-      });
+      };
+
+      socket.on('message', eventHandler);
+
+      // unsubscribe from event for preventing memory leaks
+      return () => {
+        socket.off('message', eventHandler);
+      };
     }
   }, [connected]);
 
@@ -122,7 +120,7 @@ const DropdownNotification = () => {
         onFocus={() => setDropdownOpen(true)}
         onBlur={() => setDropdownOpen(false)}
         className={`absolute -right-27 mt-2.5 flex h-90 w-75 flex-col rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark sm:right-0 sm:w-80 ${
-          dropdownOpen === true ? 'block' : 'hidden'
+          dropdownOpen ? 'block' : 'hidden'
         }`}
       >
         <div className='flex px-4.5 py-3'>

frontend/services/socket-handlers.ts

@@ -1,13 +1,19 @@
 import { apolloClient } from '@/services/apollo-client';
 
 const socketMsgHandler = async (msg: any) => {
-  switch (msg.type) {
+  switch (msg?.type) {
     case 'BOARD_UPDATED':
       await apolloClient.refetchQueries({
         include: ['GetProjectInfo', 'GetBoardInfo'],
       });
       break;
 
+    case 'ISSUE_UPDATED':
+      await apolloClient.refetchQueries({
+        include: ['GetProjectInfo', 'GetBoardInfo'],
+      });
+      break;
+
     default:
       break;
   }