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

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

View File

@@ -2,7 +2,7 @@ import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { QueryProvider } from "@/lib/providers/query-provider";
import { SignalRProvider } from "@/components/providers/SignalRProvider";
import { SignalRProvider } from "@/lib/signalr/SignalRContext";
import { Toaster } from "@/components/ui/sonner";
const geistSans = Geist({