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]