Loading...
;
if (error) return Error: {error.message}
;
@@ -318,20 +326,17 @@ export function PostFeed() {
```tsx
export function NotificationCenter() {
- const { data, connectionState, resubscribe } = useSubscription(
- USER_NOTIFICATIONS_SUBSCRIPTION,
- {
- variables: { userId: 'user-123' },
- onData: (notification) => {
- showToast(notification.message);
- },
+ const { data, connectionState, resubscribe } = useSubscription(USER_NOTIFICATIONS_SUBSCRIPTION, {
+ variables: { userId: 'user-123' },
+ onData: (notification) => {
+ showToast(notification.message);
},
- );
+ });
return (
@@ -375,10 +377,10 @@ export function LiveResults() {
```typescript
enum ConnectionState {
- CONNECTING = 'CONNECTING', // Initial connection
- CONNECTED = 'CONNECTED', // Ready for data
- DISCONNECTED = 'DISCONNECTED', // Offline
- ERROR = 'ERROR', // Connection error
+ CONNECTING = 'CONNECTING', // Initial connection
+ CONNECTED = 'CONNECTED', // Ready for data
+ DISCONNECTED = 'DISCONNECTED', // Offline
+ ERROR = 'ERROR', // Connection error
RECONNECTING = 'RECONNECTING', // Retry attempt
}
```
@@ -438,18 +440,15 @@ SubscriptionError {
### Handle Errors
```tsx
-const { error, errorMessage, resubscribe } = useSubscription(
- SUBSCRIPTION,
- {
- onError: (error) => {
- if (isConnectionError(error)) {
- console.log('Network error, will retry...');
- } else {
- console.log('Subscription error:', error.message);
- }
- },
+const { error, errorMessage, resubscribe } = useSubscription(SUBSCRIPTION, {
+ onError: (error) => {
+ if (isConnectionError(error)) {
+ console.log('Network error, will retry...');
+ } else {
+ console.log('Subscription error:', error.message);
+ }
},
-);
+});
if (error) {
return (
@@ -464,11 +463,13 @@ if (error) {
### Error Recovery
Automatic:
+
- ✅ Exponential backoff reconnection
- ✅ Max 5 retry attempts (configurable)
- ✅ Delay: 1000ms → 2000ms → 4000ms...
Manual:
+
- ✅ `resubscribe()` function
- ✅ User-triggered refresh button
@@ -479,11 +480,13 @@ Manual:
### Optimizations
1. **Memoization**: Use `useMemo` for variables
+
```tsx
const variables = useMemo(() => ({ topicId }), [topicId]);
```
2. **Conditional Subscriptions**: Skip when not needed
+
```tsx
const { data } = useSubscription(SUBSCRIPTION, {
skip: !isOpen,
@@ -491,10 +494,11 @@ Manual:
```
3. **Multiple Subscriptions**: Subscribe to what you need
+
```tsx
// ✓ Good: Subscribe only to needed data
const posts = useSubscription(NEW_POSTS, { variables: {...} });
-
+
// ✗ Bad: Subscribe to everything
const all = useSubscription(ALL_DATA, {});
```
@@ -524,9 +528,7 @@ import { useSubscription } from '@/hooks/useSubscription';
describe('useSubscription', () => {
it('should handle subscription data', async () => {
- const { result } = renderHook(() =>
- useSubscription(SUBSCRIPTION)
- );
+ const { result } = renderHook(() => useSubscription(SUBSCRIPTION));
await waitFor(() => {
expect(result.current.data).toBeDefined();
@@ -537,16 +539,14 @@ describe('useSubscription', () => {
it('should retry on error', async () => {
const onError = vi.fn();
- const { result, rerender } = renderHook(
- () => useSubscription(SUBSCRIPTION, { onError })
- );
+ const { result, rerender } = renderHook(() => useSubscription(SUBSCRIPTION, { onError }));
await waitFor(() => {
expect(onError).toHaveBeenCalled();
});
result.current.resubscribe();
-
+
expect(result.current.loading).toBe(true);
});
});
@@ -557,22 +557,24 @@ describe('useSubscription', () => {
```tsx
import { MockedProvider } from '@apollo/client/testing';
-const mocks = [{
- request: {
- query: SUBSCRIPTION,
- variables: { id: '1' },
- },
- result: {
- data: {
- onUpdate: { id: '1', data: 'test' },
+const mocks = [
+ {
+ request: {
+ query: SUBSCRIPTION,
+ variables: { id: '1' },
+ },
+ result: {
+ data: {
+ onUpdate: { id: '1', data: 'test' },
+ },
},
},
-}];
+];
render(
+ ,
);
```
@@ -586,6 +588,7 @@ render(
✅ Mobile browsers (iOS Safari 15+, Chrome Android)
**Requirements**:
+
- WebSocket support
- ES2020 JavaScript features
- Secure context (HTTPS, except localhost)
@@ -610,18 +613,16 @@ const config: SubscriptionConfig = {
// Reconnection strategy
reconnect: {
- maxRetries: 10, // Max retry attempts
- initialDelayMs: 500, // Starting delay
- maxDelayMs: 60000, // Max delay cap
+ maxRetries: 10, // Max retry attempts
+ initialDelayMs: 500, // Starting delay
+ maxDelayMs: 60000, // Max delay cap
},
// Connection timeout
connectionTimeoutMs: 10000,
};
-
- {children}
-
+{children} ;
```
---
@@ -629,22 +630,26 @@ const config: SubscriptionConfig = {
## Acceptance Criteria - ✅ All Met
- ✅ **Real-time data updates without polling**
+
- WebSocket subscriptions working
- Instant data delivery
- Demo page at `/subscriptions-demo`
- ✅ **WebSocket link setup**
+
- Apollo Client configured
- GraphQL-ws integration
- Automatic connection management
- ✅ **useSubscription hook**
+
- Full lifecycle management
- Error handling & recovery
- Connection state tracking
- Callbacks for events
- ✅ **Connection lifecycle handling**
+
- Connection state enum
- State change notifications
- Proper cleanup
@@ -660,6 +665,7 @@ const config: SubscriptionConfig = {
## Files Changed
### New Files
+
```
src/lib/graphql/subscriptions.ts (347 lines)
src/lib/graphql/subscriptionQueries.ts (190 lines)
@@ -672,6 +678,7 @@ GRAPHQL_SUBSCRIPTIONS_GUIDE.md (500+ lines)
```
### Modified Files
+
```
package.json (+3 dependencies)
```
@@ -718,6 +725,7 @@ package.json (+3 dependencies)
## Troubleshooting
### WebSocket not connecting
+
```
Check:
1. WSS URL is correct and HTTPS
@@ -727,6 +735,7 @@ Check:
```
### Data not updating
+
```
Check:
1. Subscription is not skipped
@@ -736,6 +745,7 @@ Check:
```
### Memory leaks
+
```
Check:
1. Components unmounting properly
diff --git a/PR_DATA_TABLE_VIRTUALIZATION.md b/PR_DATA_TABLE_VIRTUALIZATION.md
index 4892a46a..2395e8ca 100644
--- a/PR_DATA_TABLE_VIRTUALIZATION.md
+++ b/PR_DATA_TABLE_VIRTUALIZATION.md
@@ -1,6 +1,7 @@
# Pull Request: Data Table Virtualization (Close #258)
## PR Title
+
✨ feat: Add Data Table Virtualization with Sticky Headers and Resizable Columns (Close #258)
## Description
@@ -8,9 +9,11 @@
This PR implements virtualization for large TeachLink data tables, enabling smooth rendering for datasets with 10k+ rows. The feature integrates a lightweight virtualization library, supports variable row heights, sticky headers, and column resizing to improve performance and usability.
### Problem Statement
+
Tables with 1000+ rows become slow and unresponsive. The current table rendering strategy does not scale for large datasets, causing poor UX on dashboards and analytics views.
### Solution Overview
+
- Integrate `react-window` for list virtualization
- Add support for variable row heights
- Keep table headers sticky during scroll
@@ -23,7 +26,9 @@ Tables with 1000+ rows become slow and unresponsive. The current table rendering
## Changes Made
### New/Updated Components
+
- `src/components/DataTable.tsx`
+
- Refactored table rendering to use virtualization
- Added sticky header behavior
- Added responsive column sizing and resize handles
@@ -35,16 +40,19 @@ Tables with 1000+ rows become slow and unresponsive. The current table rendering
- Integrates with `react-window` and custom measurement logic
### Dependencies
+
- Added `react-window` or similar virtualization library
- (Optional) Added utility package for resize handling if needed
### Performance Improvements
+
- Smooth scrolling with 10k+ rows
- Reduced DOM node count dramatically
- Lower memory usage and rendering overhead
- Responsive sticky headers with stable layout behavior
### Accessibility and UX
+
- Sticky header remains visible on vertical scroll
- Column resize controls keyboard accessible
- Table cells maintain focus and row highlight behavior
@@ -68,10 +76,12 @@ Tables with 1000+ rows become slow and unresponsive. The current table rendering
## Files Changed
### Primary
+
- `src/components/DataTable.tsx`
- `src/components/VirtualList.tsx`
### Possible supporting changes
+
- `src/components/TableHeader.tsx` (if header logic is extracted)
- `src/components/TableRow.tsx` (if row rendering is modularized)
- `src/lib/tableUtils.ts` or `src/utils/tableUtils.ts` (for resize/virtualization helpers)
@@ -82,6 +92,7 @@ Tables with 1000+ rows become slow and unresponsive. The current table rendering
## Usage Example
### Basic Virtualized Table
+
```tsx
import { DataTable } from '@/components/DataTable';
@@ -100,6 +111,7 @@ export function ReportsPage() {
```
### Column Resizing
+
```tsx
setShowShare(false)}
- shareUrl={shareUrl}
-/>
+ setShowShare(false)} shareUrl={shareUrl} />;
```
### Conditional Rendering
+
```tsx
export function ShareButton({ isLoggedIn, itemId }) {
const [showShare, setShowShare] = useState(false);
@@ -219,6 +220,7 @@ export function ShareButton({ isLoggedIn, itemId }) {
```
### With Error Boundaries
+
```tsx
import { ErrorBoundarySystem } from '@/components';
@@ -238,17 +240,20 @@ export function SafeShare({ itemId }) {
## 🧪 Testing in Development
### View the Demo Page
+
```
http://localhost:3000/qr-code-demo
```
### Test Different URLs
+
1. Open `/qr-code-demo`
2. Modify the URL input
3. Use the QR preview
4. Test download, print, and copy
### Test on Mobile
+
1. Use browser DevTools mobile view
2. Or access demo on actual mobile device
3. Scan QR with phone camera
@@ -269,6 +274,7 @@ http://localhost:3000/qr-code-demo
## 🐛 Troubleshooting
### QR Code not showing?
+
```tsx
// ❌ Wrong
{
if (!res.ok) break;
const json = await res.json();
- const page: { id: string }[] = Array.isArray(json) ? json : (json.data ?? []);
+ const page: { id: string }[] = Array.isArray(json) ? json : json.data ?? [];
ids.push(...page.map((c) => c.id));
cursor = json.nextCursor;
} while (cursor);
diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx
index f85b6c45..f7aaadb2 100644
--- a/src/app/(auth)/login/page.tsx
+++ b/src/app/(auth)/login/page.tsx
@@ -131,10 +131,7 @@ export default function LoginPage() {
-
- {data?.onNewPost && (
-
- );
+ return {data?.onNewPost &&
;
}
```
@@ -222,25 +241,20 @@ export function PostFeed() {
```tsx
export function NotificationCenter() {
- const { data, connectionState, resubscribe } = useSubscription(
- USER_NOTIFICATIONS_SUBSCRIPTION,
- {
- variables: { userId: 'user-123' },
- onData: (notification) => {
- playSound();
- showToast(notification.message);
- },
+ const { data, connectionState, resubscribe } = useSubscription(USER_NOTIFICATIONS_SUBSCRIPTION, {
+ variables: { userId: 'user-123' },
+ onData: (notification) => {
+ playSound();
+ showToast(notification.message);
},
- );
+ });
return (
<>
@@ -279,6 +290,7 @@ export function LiveQuizResults() {
### 1. Environment Variables
Add to `.env.local`:
+
```bash
NEXT_PUBLIC_GRAPHQL_WS_URL=wss://api.teachlink.com/graphql
NEXT_PUBLIC_GRAPHQL_HTTP_URL=https://api.teachlink.com/graphql
@@ -288,6 +300,7 @@ NEXT_PUBLIC_AUTH_TOKEN=your-jwt-token
### 2. Wrap App with Provider
In `src/app/layout.tsx`:
+
```tsx
{avatar && 
}
);
}
@@ -66,6 +64,7 @@ export function TopicCard({ topicSlug }) {
## 📚 Common Patterns
### Pattern 1: Profile Sharing
+
```tsx
export function ProfileCard({ username }) {
const [showShare, setShowShare] = useState(false);
@@ -86,15 +85,13 @@ export function ProfileCard({ username }) {
```
### Pattern 2: Resource Card with QR
+
```tsx
export function ResourceCard({ resourceId, title }) {
return (
{username}
- +{title}
-Scan to access