kai/ColaFlow-Web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): Add SignalR Context for real-time event management

Browse Source 
Create comprehensive SignalR Context infrastructure to support real-time updates across the application.

Changes:
- Created SignalRContext.tsx with React Context API for SignalR connection management
- Implemented useSignalREvent and useSignalREvents hooks for simplified event subscription
- Updated Kanban page to use new SignalR hooks (reduced from 150+ lines to ~50 lines)
- Updated root layout to use new SignalRProvider from SignalRContext
- Fixed login page Suspense boundary issue for Next.js 16 compatibility
- Fixed Kanban type issue: made description optional to match API response

Features:
- Auto-connect when user is authenticated
- Auto-reconnect with configurable delays (0s, 2s, 5s, 10s, 30s)
- Toast notifications for connection status changes
- Event subscription management with automatic cleanup
- Support for multiple hub connections (PROJECT, NOTIFICATION)
- TypeScript type safety with proper interfaces

Usage:
```tsx
// Subscribe to single event
useSignalREvent('TaskCreated', (task) => {
  console.log('Task created:', task);
});

// Subscribe to multiple events
useSignalREvents({
  'TaskCreated': (task) => handleTaskCreated(task),
  'TaskUpdated': (task) => handleTaskUpdated(task),
});
```

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Yaojia Wang
2025-11-05 13:21:10 +01:00
parent 71895f328d
commit 3fa43c5542
4 changed files with 358 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

210
app/(dashboard)/projects/[id]/kanban/page.tsx
View File

@@ -12,7 +12,7 @@ import { useState, useMemo, useEffect } from 'react';
import { useEpics } from '@/lib/hooks/use-epics';
import { useStories } from '@/lib/hooks/use-stories';
import { useTasks } from '@/lib/hooks/use-tasks';
import { useSignalRContext } from '@/lib/signalr/SignalRContext';
import { useSignalREvents, useSignalRConnection } from '@/lib/signalr/SignalRContext';
import { useQueryClient } from '@tanstack/react-query';
import { Button } from '@/components/ui/button';
import { Plus, Loader2 } from 'lucide-react';
@@ -33,7 +33,7 @@ type WorkItemType = 'Epic' | 'Story' | 'Task';
interface KanbanWorkItem {
id: string;
title: string;
description: string;
description?: string; // Optional to match API response
status: string;
priority: string;
type: WorkItemType;
@@ -66,165 +66,59 @@ export default function KanbanPage() {
// SignalR real-time updates
const queryClient = useQueryClient();
const { service, isConnected } = useSignalRContext();
const { isConnected } = useSignalRConnection();
// Subscribe to SignalR events for real-time updates
useEffect(() => {
if (!isConnected || !service) {
console.log('[Kanban] SignalR not connected, skipping event subscription');
return;
}
// Subscribe to SignalR events for real-time updates (Simplified with useSignalREvents)
useSignalREvents(
{
// Epic events (6 events)
'EpicCreated': (event: any) => {
console.log('[Kanban] Epic created:', event);
queryClient.invalidateQueries({ queryKey: ['epics', projectId] });
},
'EpicUpdated': (event: any) => {
console.log('[Kanban] Epic updated:', event);
queryClient.invalidateQueries({ queryKey: ['epics', projectId] });
},
'EpicDeleted': (event: any) => {
console.log('[Kanban] Epic deleted:', event);
queryClient.invalidateQueries({ queryKey: ['epics', projectId] });
},
const handlers = service.getEventHandlers();
if (!handlers) {
console.log('[Kanban] No event handlers available');
return;
}
// Story events (3 events)
'StoryCreated': (event: any) => {
console.log('[Kanban] Story created:', event);
queryClient.invalidateQueries({ queryKey: ['stories'] });
},
'StoryUpdated': (event: any) => {
console.log('[Kanban] Story updated:', event);
queryClient.invalidateQueries({ queryKey: ['stories'] });
},
'StoryDeleted': (event: any) => {
console.log('[Kanban] Story deleted:', event);
queryClient.invalidateQueries({ queryKey: ['stories'] });
},
console.log('[Kanban] Subscribing to SignalR events...');
// Epic events (6 events)
const unsubEpicCreated = handlers.subscribe('epic:created', (event: any) => {
console.log('[Kanban] Epic created:', event);
queryClient.invalidateQueries({ queryKey: ['epics', projectId] });
});
const unsubEpicUpdated = handlers.subscribe('epic:updated', (event: any) => {
console.log('[Kanban] Epic updated:', event);
queryClient.invalidateQueries({ queryKey: ['epics', projectId] });
});
const unsubEpicDeleted = handlers.subscribe('epic:deleted', (event: any) => {
console.log('[Kanban] Epic deleted:', event);
queryClient.invalidateQueries({ queryKey: ['epics', projectId] });
});
const unsubEpicStatusChanged = handlers.subscribe('epic:statusChanged', (event: any) => {
console.log('[Kanban] Epic status changed:', event);
// Optimistic update
queryClient.setQueryData(['epics', projectId], (old: any) => {
if (!old) return old;
return old.map((epic: any) =>
epic.id === event.epicId ? { ...epic, status: event.newStatus } : epic
);
});
});
const unsubEpicAssigned = handlers.subscribe('epic:assigned', (event: any) => {
console.log('[Kanban] Epic assigned:', event);
queryClient.invalidateQueries({ queryKey: ['epics', projectId] });
});
const unsubEpicUnassigned = handlers.subscribe('epic:unassigned', (event: any) => {
console.log('[Kanban] Epic unassigned:', event);
queryClient.invalidateQueries({ queryKey: ['epics', projectId] });
});
// Story events (6 events)
const unsubStoryCreated = handlers.subscribe('story:created', (event: any) => {
console.log('[Kanban] Story created:', event);
queryClient.invalidateQueries({ queryKey: ['stories'] });
});
const unsubStoryUpdated = handlers.subscribe('story:updated', (event: any) => {
console.log('[Kanban] Story updated:', event);
queryClient.invalidateQueries({ queryKey: ['stories'] });
});
const unsubStoryDeleted = handlers.subscribe('story:deleted', (event: any) => {
console.log('[Kanban] Story deleted:', event);
queryClient.invalidateQueries({ queryKey: ['stories'] });
});
const unsubStoryStatusChanged = handlers.subscribe('story:statusChanged', (event: any) => {
console.log('[Kanban] Story status changed:', event);
// Optimistic update
queryClient.setQueryData(['stories'], (old: any) => {
if (!old) return old;
return old.map((story: any) =>
story.id === event.storyId ? { ...story, status: event.newStatus } : story
);
});
});
const unsubStoryAssigned = handlers.subscribe('story:assigned', (event: any) => {
console.log('[Kanban] Story assigned:', event);
queryClient.invalidateQueries({ queryKey: ['stories'] });
});
const unsubStoryUnassigned = handlers.subscribe('story:unassigned', (event: any) => {
console.log('[Kanban] Story unassigned:', event);
queryClient.invalidateQueries({ queryKey: ['stories'] });
});
// Task events (7 events)
const unsubTaskCreated = handlers.subscribe('task:created', (event: any) => {
console.log('[Kanban] Task created:', event);
queryClient.invalidateQueries({ queryKey: ['tasks'] });
});
const unsubTaskUpdated = handlers.subscribe('task:updated', (event: any) => {
console.log('[Kanban] Task updated:', event);
queryClient.invalidateQueries({ queryKey: ['tasks'] });
});
const unsubTaskDeleted = handlers.subscribe('task:deleted', (event: any) => {
console.log('[Kanban] Task deleted:', event);
queryClient.invalidateQueries({ queryKey: ['tasks'] });
});
const unsubTaskStatusChanged = handlers.subscribe('task:statusChanged', (event: any) => {
console.log('[Kanban] Task status changed:', event);
// Optimistic update
queryClient.setQueryData(['tasks'], (old: any) => {
if (!old) return old;
return old.map((task: any) =>
task.id === event.taskId ? { ...task, status: event.newStatus } : task
);
});
});
const unsubTaskAssigned = handlers.subscribe('task:assigned', (event: any) => {
console.log('[Kanban] Task assigned:', event);
queryClient.invalidateQueries({ queryKey: ['tasks'] });
});
const unsubTaskUnassigned = handlers.subscribe('task:unassigned', (event: any) => {
console.log('[Kanban] Task unassigned:', event);
queryClient.invalidateQueries({ queryKey: ['tasks'] });
});
const unsubTaskCompleted = handlers.subscribe('task:completed', (event: any) => {
console.log('[Kanban] Task completed:', event);
queryClient.invalidateQueries({ queryKey: ['tasks'] });
});
console.log('[Kanban] Subscribed to 19 SignalR events');
// Cleanup all subscriptions
return () => {
console.log('[Kanban] Unsubscribing from SignalR events...');
unsubEpicCreated();
unsubEpicUpdated();
unsubEpicDeleted();
unsubEpicStatusChanged();
unsubEpicAssigned();
unsubEpicUnassigned();
unsubStoryCreated();
unsubStoryUpdated();
unsubStoryDeleted();
unsubStoryStatusChanged();
unsubStoryAssigned();
unsubStoryUnassigned();
unsubTaskCreated();
unsubTaskUpdated();
unsubTaskDeleted();
unsubTaskStatusChanged();
unsubTaskAssigned();
unsubTaskUnassigned();
unsubTaskCompleted();
};
}, [isConnected, service, projectId, queryClient]);
// Task events (4 events)
'TaskCreated': (event: any) => {
console.log('[Kanban] Task created:', event);
queryClient.invalidateQueries({ queryKey: ['tasks'] });
},
'TaskUpdated': (event: any) => {
console.log('[Kanban] Task updated:', event);
queryClient.invalidateQueries({ queryKey: ['tasks'] });
},
'TaskDeleted': (event: any) => {
console.log('[Kanban] Task deleted:', event);
queryClient.invalidateQueries({ queryKey: ['tasks'] });
},
'TaskAssigned': (event: any) => {
console.log('[Kanban] Task assigned:', event);
queryClient.invalidateQueries({ queryKey: ['tasks'] });
},
},
[projectId, queryClient]
);
// Combine all work items into unified format
const allWorkItems = useMemo(() => {