feat: Add notification pagination with Load More functionality

[Pritam-mb]

Add Notification Pagination with Load More Functionality

📋 Description

This PR implements notification pagination with a "Load More" feature for the Edulume platform, enhancing the user experience by efficiently loading notifications in batches instead of all at once.

🎯 Changes Made

1. Navbar Integration

• Added NotificationDropdown component to the Navbar
• Component appears conditionally when user is authenticated
• Positioned in the navigation bar for easy access

2. Notification Pagination

• Implemented pagination with 5 notifications per page
• Initial load displays first 5 notifications
• "Load More" button fetches and appends next batch
• Button automatically hides when all notifications are loaded

3. API Integration

• Updated getNotifications function to accept pagination parameters:
  • page: Current page number (default: 1)
  • limit: Number of notifications per page (default: 5)
  • skip: Calculated offset for pagination
• Backend endpoint already supports pagination at /api/notifications

4. Bug Fixes

• Fixed useSocket import path (from SocketContext instead of hooks/useSocket)
• Resolved Notification type conflict with browser's native Notification API
• Proper TypeScript typing throughout the component

5. Real-time Support

• Socket.IO integration for live notification updates
• Browser notification permission handling
• Unread count tracking and updates

🔧 Technical Details

Files Modified:

• client/src/components/layout/Navbar.tsx - Added NotificationDropdown component
• client/src/components/ui/NotificationDropdown.tsx - Implemented pagination logic
• client/src/utils/api.ts - Updated API function with pagination params

Pagination Logic:

// API call with pagination
const response = await getNotifications(page, 5);

// Load More appends to existing notifications
if (append) {
  setNotifications((prev) => [...prev, ...response.notifications]);
}

// Track if more pages available
setHasMore(page < response.pagination.pages);

🧪 Testing

The code includes mock data (commented out) for frontend testing without backend:

• 12 sample notifications for testing pagination flow
• Easy to toggle between mock and real API calls
• All pagination logic designed to work identically with database

✨ Features

• ✅ Pagination with 5 notifications per page
• ✅ Load More button for seamless loading
• ✅ Unread count badge on notification bell
• ✅ Real-time notifications via Socket.IO
• ✅ Mark individual notifications as read
• ✅ Mark all notifications as read
• ✅ Click notification to navigate to related discussion
• ✅ Browser notification support
• ✅ Auto-polling for new notifications (30s interval)

📱 User Experience

1. User sees notification bell with unread count badge
2. Clicking bell opens dropdown with first 5 notifications
3. "Load More" button appears if more notifications exist
4. Clicking "Load More" loads next 5 notifications
5. Button disappears when all notifications are displayed
6. Real-time updates via WebSocket for instant notifications

🔗 Backend Compatibility

The implementation is fully compatible with the existing backend:

• Uses existing /api/notifications endpoint
• Backend already supports page, limit, skip parameters
• Response format matches expected structure:

  {
    notifications: Notification[],
    unreadCount: number,
    pagination: {
      page: number,
      limit: number,
      total: number,
      pages: number
    }
  }

📸 Screenshots

🚀 How to Test

1. Start the backend server
2. Start the frontend client
3. Login to the application
4. Look for the notification bell in the navbar
5. Click the bell to see first 5 notifications
6. Click "Load More" to fetch more notifications
7. Test with more than 5 notifications in database

💡 Future Enhancements

• Add notification filters (unread only, by type)
• Implement infinite scroll as alternative to Load More
• Add notification grouping by date
• Implement notification preferences
• Add sound/visual effects for new notifications

📝 Notes

• Mock data is preserved in comments for easy frontend testing
• All TypeScript types properly defined
• Error handling implemented for failed API calls
• Component follows existing project patterns and styling

Related Issues

Fixes: #[issue_number]

[tarin-lgtm]

Changes Requested 🐈

PR adds notification dropdown pagination with “Load More” and integrates it into the navbar, plus real-time socket-driven updates and unread badge increments. Review found multiple critical/high risks in NotificationDropdown around concurrent fetch race conditions, ordering/desync, unbounded growth, and unsafe/unguarded browser Notification usage and payload handling.

There are a few things I'd like to see addressed before we merge this:

Before merging

1. Add request sequencing/cancellation to prevent out-of-order state updates between initial fetch, polling, and load-more (e.g., in-flight guard with per-request IDs; ensure append/replace semantics are consistent).
2. Fix socket handler state management: implement dedupe and bounds/caps for notifications, make unreadCount updates consistent with appended items and read-state, and harden against malformed payloads.
3. Guard and rate-limit browser Notification creation (feature detection/permission handling + try/catch) and ensure backend enforces strict per-user authorization for paginated /notifications (client-side cannot be trusted).

Findings breakdown (49 total)

2 critical / 11 high / 24 medium / 5 low / 7 info

Confidence: 93%

---

🔗 View Full Review Report — detailed findings, severity breakdown, and agent analysis

_{Reviewed by Looks Good To Meow — AI-powered code review}