From 2498effce34f18694c1a1d69b06913071960dc35 Mon Sep 17 00:00:00 2001
From: shancds <shancds1@gmail.com>
Date: Fri, 11 Jul 2025 16:20:21 +0530
Subject: [PATCH] fix(enhanced-kanban): integrate socket event handling for
 real-time updates

- Added useTaskSocketHandlers hook to manage socket event handlers for real-time task updates, improving code organization and readability.
- Removed inline socket handling logic to streamline the component and enhance maintainability.
---
 .../EnhancedKanbanBoardNativeDnD.tsx          | 37 ++++---------------
 1 file changed, 7 insertions(+), 30 deletions(-)

diff --git a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/EnhancedKanbanBoardNativeDnD.tsx b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/EnhancedKanbanBoardNativeDnD.tsx
index a1a08105..e1d7248a 100644
--- a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/EnhancedKanbanBoardNativeDnD.tsx
+++ b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/EnhancedKanbanBoardNativeDnD.tsx
@@ -21,6 +21,7 @@ import alertService from '@/services/alerts/alertService';
 import logger from '@/utils/errorLogger';
 import Skeleton from 'antd/es/skeleton/Skeleton';
 import { checkTaskDependencyStatus } from '@/utils/check-task-dependency-status';
+import { useTaskSocketHandlers } from '@/hooks/useTaskSocketHandlers';
 
 const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ projectId }) => {
   const dispatch = useDispatch();
@@ -41,6 +42,10 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
   const [hoveredTaskIdx, setHoveredTaskIdx] = useState<number | null>(null);
   const [dragType, setDragType] = useState<'group' | 'task' | null>(null);
   const { statusCategories, status: existingStatuses } = useAppSelector((state) => state.taskStatusReducer);
+
+  // Set up socket event handlers for real-time updates
+  useTaskSocketHandlers();
+
   useEffect(() => {
     if (projectId) {
       dispatch(fetchEnhancedKanbanGroups(projectId) as any);
@@ -268,36 +273,8 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
     setHoveredTaskIdx(null);
   };
 
-  useEffect(() => {
-    if (!socket) return;
-
-    // Handler for new task received via socket
-    const handleNewTaskReceived = (data: any) => {
-      if (!data) return;
-      if (data.parent_task_id) {
-        // Subtask: update subtasks in the correct group
-        dispatch({
-          type: 'enhancedKanbanReducer/updateEnhancedKanbanSubtask',
-          payload: { sectionId: '', subtask: data, mode: 'add' }
-        });
-      } else {
-        // Regular task: add to the correct group
-        let sectionId = '';
-        if (groupBy === 'status') sectionId = data.status;
-        else if (groupBy === 'priority') sectionId = data.priority;
-        else if (groupBy === 'phase') sectionId = data.phase_id;
-        dispatch({
-          type: 'enhancedKanbanReducer/addTaskToGroup',
-          payload: { sectionId, task: data }
-        });
-      }
-    };
-
-    socket.on(SocketEvents.QUICK_TASK.toString(), handleNewTaskReceived);
-    return () => {
-      socket.off(SocketEvents.QUICK_TASK.toString(), handleNewTaskReceived);
-    };
-  }, [socket, groupBy, dispatch]);
+  // Note: Socket event handlers are now managed by useTaskSocketHandlers hook
+  // This includes TASK_NAME_CHANGE, QUICK_TASK, and other real-time updates
 
   if (error) {
     return (