refactor(drag-and-drop): replace console logging with error logging

- Integrated an error logging utility to replace console warnings and errors in the `useDragAndDrop` hook, enhancing error tracking and debugging.
- Removed unnecessary console logs related to drag-and-drop operations, streamlining the code and improving performance.
This commit is contained in:
chamikaJ
2025-07-15 14:24:24 +05:30
parent 17371200ca
commit 55a0028e26

View File

@@ -9,6 +9,7 @@ import { useSocket } from '@/socket/socketContext';
import { SocketEvents } from '@/shared/socket-events'; import { SocketEvents } from '@/shared/socket-events';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import { useAuthService } from '@/hooks/useAuth'; import { useAuthService } from '@/hooks/useAuth';
import logger from '@/utils/errorLogger';
export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => { export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
@@ -23,13 +24,13 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
const emitTaskSortChange = useCallback( const emitTaskSortChange = useCallback(
(taskId: string, sourceGroup: TaskGroup, targetGroup: TaskGroup, insertIndex: number) => { (taskId: string, sourceGroup: TaskGroup, targetGroup: TaskGroup, insertIndex: number) => {
if (!socket || !connected || !projectId) { if (!socket || !connected || !projectId) {
console.warn('Socket not connected or missing project ID'); logger.warning('Socket not connected or missing project ID');
return; return;
} }
const task = allTasks.find(t => t.id === taskId); const task = allTasks.find(t => t.id === taskId);
if (!task) { if (!task) {
console.error('Task not found for socket emission:', taskId); logger.error('Task not found for socket emission:', taskId);
return; return;
} }
@@ -106,7 +107,6 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
team_id: teamId, team_id: teamId,
}; };
console.log('Emitting TASK_SORT_ORDER_CHANGE:', socketData);
socket.emit(SocketEvents.TASK_SORT_ORDER_CHANGE.toString(), socketData); socket.emit(SocketEvents.TASK_SORT_ORDER_CHANGE.toString(), socketData);
// Also emit the specific grouping field change event for the moved task // Also emit the specific grouping field change event for the moved task
@@ -174,15 +174,6 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
} }
if (!activeGroup || !targetGroup) return; if (!activeGroup || !targetGroup) return;
// If dragging to a different group, we need to handle cross-group movement
if (activeGroup.id !== targetGroup.id) {
console.log('Cross-group drag detected:', {
activeTask: activeTask.id,
fromGroup: activeGroup.id,
toGroup: targetGroup.id,
});
}
}, },
[allTasks, groups] [allTasks, groups]
); );
@@ -203,14 +194,14 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
// Find the active task // Find the active task
const activeTask = allTasks.find(task => task.id === activeId); const activeTask = allTasks.find(task => task.id === activeId);
if (!activeTask) { if (!activeTask) {
console.error('Active task not found:', activeId); logger.error('Active task not found:', activeId);
return; return;
} }
// Find the groups // Find the groups
const activeGroup = groups.find(group => group.taskIds.includes(activeTask.id)); const activeGroup = groups.find(group => group.taskIds.includes(activeTask.id));
if (!activeGroup) { if (!activeGroup) {
console.error('Could not find active group for task:', activeId); logger.error('Could not find active group for task:', activeId);
return; return;
} }
@@ -243,24 +234,13 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
} }
if (!targetGroup) { if (!targetGroup) {
console.error('Could not find target group'); logger.error('Could not find target group');
return; return;
} }
const isCrossGroup = activeGroup.id !== targetGroup.id; const isCrossGroup = activeGroup.id !== targetGroup.id;
const activeIndex = activeGroup.taskIds.indexOf(activeTask.id); const activeIndex = activeGroup.taskIds.indexOf(activeTask.id);
console.log('Drag operation:', {
activeId,
overId,
activeTask: activeTask.name || activeTask.title,
activeGroup: activeGroup.id,
targetGroup: targetGroup.id,
activeIndex,
insertIndex,
isCrossGroup,
});
if (isCrossGroup) { if (isCrossGroup) {
// Moving task between groups // Moving task between groups
console.log('Moving task between groups:', { console.log('Moving task between groups:', {
@@ -284,14 +264,6 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
// Emit socket event for persistence // Emit socket event for persistence
emitTaskSortChange(activeId as string, activeGroup, targetGroup, insertIndex); emitTaskSortChange(activeId as string, activeGroup, targetGroup, insertIndex);
} else { } else {
// Reordering within the same group
console.log('Reordering task within same group:', {
task: activeTask.name || activeTask.title,
group: activeGroup.title,
from: activeIndex,
to: insertIndex,
});
if (activeIndex !== insertIndex) { if (activeIndex !== insertIndex) {
// Reorder task within same group at drop position // Reorder task within same group at drop position
dispatch( dispatch(