Successfully implemented a comprehensive join requests management system for students in ClassSync, allowing them to view, cancel, and delete their course join requests with proper state management and mobile-first design.
-
getMyJoinRequests(Student Query)- Fetches all join requests for the authenticated student
- Populates with course and lecturer data including profile images
- Orders by creation time (newest first)
-
cancelJoinRequest(Student Mutation)- Allows students to cancel pending join requests
- Validates ownership and status before cancellation
- Completely removes the request from the database
-
deleteJoinRequest(Student Mutation)- Allows students to delete rejected or approved requests
- Used for cleanup of request history
- Prevents deletion of pending requests (must cancel instead)
- All functions use
StudentQueryMiddlewareandStudentMutationMiddleware - Proper ownership validation (students can only manage their own requests)
- Status-based action restrictions (pending = cancel, rejected/approved = delete)
- Comprehensive error handling with descriptive messages
-
useGetMyJoinRequests()- Real-time query for all student's join requests
- Automatically updates when data changes
-
useGetPendingJoinRequestsCount()- Derived hook for badge count in navigation
- Filters pending requests for UI indicators
-
useCancelJoinRequest()&useDeleteJoinRequest()- Mutation hooks with built-in toast notifications
- Proper error handling and user feedback
- Summary Statistics: Cards showing pending, approved, and rejected counts
- Categorized Lists: Organized by request status with clear visual indicators
- Action Buttons: Context-aware cancel/delete actions with confirmation dialogs
- Rich Information: Shows course details, lecturer info, timestamps, and rejection reasons
- Mobile-First Design: Touch-friendly interface with proper spacing
- Compact Stats Grid: 3-column layout for status counts
- Responsive Cards: Optimized for mobile viewing with truncation
- Touch Interactions: Proper tap feedback and mobile-optimized dialogs
-
Status-Based Actions
- Pending requests: Can be cancelled
- Approved/Rejected requests: Can be deleted for cleanup
- Visual indicators for each status type
-
Rich Information Display
- Course name and code
- Lecturer information with profile images
- Request timestamps with relative formatting
- Rejection reasons when applicable
-
Confirmation Dialogs
- Prevent accidental actions
- Clear descriptions of consequences
- Mobile-optimized dialog layouts
- Removed: Notifications from main navigation
- Added: Join Requests as main navigation item
- Moved: Notifications to user dropdown menu (bell icon)
- Replaced: "Inbox" with "Requests"
- Updated: Badge logic to show pending join requests count
- Icon: Changed from Inbox to Bell for requests
- Added: Bell icon in header for notifications access
- Badge: Shows notification count (currently mocked)
- Link: Direct access to notifications page
- Touch Targets: Minimum 48px touch targets
- Visual Hierarchy: Clear status indicators and typography
- Responsive Layout: Adapts to different screen sizes
- Performance: Optimized loading states and animations
- Compact Stats: 3-column grid for status overview
- Truncated Text: Prevents layout breaks on small screens
- Mobile Dialogs: Properly sized confirmation dialogs
- Touch Feedback: Visual feedback for all interactive elements
- Live Queries: Automatic updates when join request status changes
- Optimistic Updates: Immediate UI feedback for actions
- Error Handling: Graceful fallbacks and error messages
- Derived State: Pending count automatically calculated
- Loading States: Proper loading indicators during data fetch
- Empty States: Helpful messages when no requests exist
- Toast Notifications: Success and error feedback
- Validation Messages: Clear error descriptions
- Graceful Degradation: Fallbacks for network issues
- TypeScript: Full type safety throughout
- Error Boundaries: Prevent crashes from unexpected errors
- Logging: Comprehensive error logging for debugging
- View Requests: Access via sidebar or mobile bottom nav
- Review Status: See all requests categorized by status
- Take Action: Cancel pending or delete processed requests
- Get Feedback: Receive confirmation of actions via toasts
- Pending → Can cancel (removes from system)
- Approved → Can delete (cleanup only)
- Rejected → Can delete (cleanup only)
- Complete Control: Students can manage their entire request history
- Clear Status: Visual indicators make request status obvious
- Mobile Optimized: Excellent experience on all devices
- Real-Time: Immediate updates when lecturers respond
- Secure: Proper validation and authorization throughout
- Bulk Actions: Select and delete multiple requests
- Request Notes: Allow students to add notes to requests
- Push Notifications: Real-time alerts for status changes
- Request History: Archive system for long-term tracking
- Analytics: Insights into request patterns and success rates
- View all join requests with proper data
- Cancel pending requests successfully
- Delete approved/rejected requests
- Proper error handling for edge cases
- Real-time updates when status changes
- Mobile responsive design works correctly
- Touch targets are appropriately sized
- Loading states display properly
- Empty states are helpful and actionable
- Confirmation dialogs prevent accidents
- Desktop sidebar navigation works
- Mobile bottom navigation shows correct badges
- Bell icon on mobile home page functions
- All links navigate to correct pages
The join requests management system provides students with complete control over their course enrollment requests while maintaining a clean, intuitive interface that works seamlessly across all devices. The implementation follows best practices for security, user experience, and code organization, making it maintainable and extensible for future enhancements.