(Jose's 7th PR/Chris' 4th PR): Inbox Backend Frontend Link

[ChrisCRL]

Added Frontend Notification Service for API Integration

---

Overview

What does this PR do?

This PR introduces a JavaScript service that handles all notification-related API calls to our backend. The service provides a clean, reusable interface for getting, marking, and deleting notifications. Also tweaked a few things in backend regarding the Notification model, views, and serializer.

---

Key Features & Changes

What has been added or changed?

Core Feature Implementation: Complete notification service with methods for all notification API endpoints
Authentication Integration: Automatic token handling for all requests
Error Handling: Consistent error catching and reporting
API Abstraction: Clean interface that hides implementation details from components

• Added getNotifications() method to fetch all user notifications
• Implemented markAsRead() for single notification status updates
• Created markAllAsRead() for bulk notification management
• Added deleteNotification() for removing individual notifications
• Implemented deleteAllNotifications() for clearing notification history
• Integrated JWT token authentication for all API requests
• Created new field sender in our Notification Model

---

Why This Is Needed

What problem does this solve?

This service centralizes all notification API calls, preventing code duplication across components and ensuring consistent authentication handling. With this service, components can easily interact with notification data without needing to understand the underlying API structure or authentication requirements.

---

Related Issue

🔗 This PR addresses Issue #146

---

Implementation Details

How was this feature developed?

• Axios HTTP client for making API requests
• Promise-based async/await pattern for clean, readable asynchronous code
• JWT authentication automatically included in request headers
• Error handling with detailed console logging
• Local storage integration for secure token retrieval
• Modular service design for easy integration with React components

---

How to Test This PR

Step-by-step testing guide

1. Run both front and back end (check README for instructions)
2. Create a new user via LessonConnect Website
3. After creating user, head to the Django admin panel (http://127.0.0.1:8000/admin) and select Notifications
4. Create a notification
5. After creating a notification, head to http://localhost:5173/inbox to see inbox page
6. You should see user's notifications listed
7. Test endpoints (mark as read, delete, delete all, etc.)

---

Files Added/Modified

📂 List of important files changed in this PR

File Name	Description
services/NotificationServices.js	Main notification service implementation
notification/model.py	Updated to handle sender name
notification/views.py	Updated to handle sender name
notification/serializer.py	Updated to handle sender name

---

AI Code Usage

🤖 Was AI-generated code used in this PR?

• Yes (AI was used to help create skeleton code for NotificationServices.js)
• No

---

Checklist for Reviewers

Things to check before approving this PR:

• Are all API endpoints correctly implemented?
• Is authentication handled properly for all requests?
• Is error handling consistent and useful?
• Does the service export all necessary functions?
• Are HTTP methods (GET, POST, PATCH, DELETE) used appropriately?

---

Next Steps & Future Enhancements

What improvements can be made after merging?

• Notification polling for environments without WebSocket support
• Notification creation methods for user-triggered notifications

---

Final Notes

This service is designed to work hand-in-hand with the WebSocket notification system. While WebSockets handle real-time notification delivery, this service provides methods for managing the notification history and state.

[Jose-Alarcon1]

Inbox Notification System: Frontend-Backend Integration

Frontend Integration of Inbox Notification System

Overview

This PR was a collaborative effort between myself (frontend) and backend ( @ChrisCRL ). Special thanks to Chris for building the NotificationServices.js utility file, which made the backend connection seamless.

This PR implements the frontend integration of the Inbox Notification System, replacing mock data with real backend API calls using Axios, and refining UI styling and component behavior. This allows the inbox to fully interact with the backend notification system, marking and deleting messages in real-time.

Key Features & Changes

• Mapped Backend Format to Frontend Fields
  • Replaced mock data with live backend data.
  • Converted ISO date/time format to human-readable display.
• Set Up Axios Integration
  • Installed and configured Axios.
  • Integrated notification system with the backend API.
• Debugged and Refined Backend Integration
  • Validated API connection with backend responses.
  • Adjusted JSX components to align with live API data.
• UI & Code Cleanup
  • Repositioned "Mark All Read" and "Delete All" action buttons for better UX.
  • Removed unused variables and the deprecated search bar.
  • Deleted redundant "Delete Notification" button and polished CSS layout.
• Backend Support
  • Chris implemented the NotificationServices.js utility file to handle all Axios requests and token management.

Why This Is Needed

This PR is essential for completing the full-stack integration of the Inbox Notification System. It enables users to read, filter, and manage notifications in real time, aligning frontend views with the data structure provided by our Django backend.

Related Issue

Issue #146 - Connect Frontend Inbox to Notification API

Implementation Details

• Frontend fetches all user notifications via Axios in useEffect.
• Mapped backend fields like notification_title and sent_at to match expected frontend props.
• Token-authenticated requests using headers in Axios.
• Added handlers for:
  • markAllAsRead
  • deleteNotification
  • deleteAllNotifications

How to Test This PR

1. Run both frontend and backend servers locally.
2. Log in as a user with valid notifications.
3. Visit /inbox to view the Inbox Notification System.
4. Click notifications to mark as read.
5. Click "Mark All Read" and "Delete All" to test bulk actions.
6. Confirm messages update in UI and backend database.

Files Added/Modified

• Inbox.jsx — Main frontend component logic
• Inbox.css — Scoped styling and layout cleanup

AI Code Usage

Yes 2 Minimal.

Checklist for Reviewers

• Do the buttons trigger correct API actions?
• Is Axios properly configured with authorization headers?
• Are all state changes handled correctly in the UI?
• Is code clean, modular, and readable?

Next Steps & Future Enhancements

• Add polling or WebSocket support for real-time notifications
• Enable search bar and sorting for better UX
• Introduce notification creation (for admin/tutors)

Screenshots:

Note: the reason for the "Failed to load notifications" message is because when the screenshot was taken the backend server was not running.

Flowcharts

Author: Jose Alarcon

[Jose-Alarcon1]

Hello @SameerIssa! Please, when you have a moment, could you please review the frontend portion of this PR? I've completed the integration of the inbox component with the backend notification API. Would appreciate your feedback on the UI logic, interaction flow, and any improvements you think we can make. Thanks!

[SameerIssa]

Frontend-Backend Inbox Notification Integration — Review

Great job on this PR! This is a strong step forward in connecting the frontend inbox UI to the backend notification system, and it’s clear a lot of thought went into both the implementation and the user flow.

What I Liked:

UI Logic & Interaction Flow

• The integration feels intuitive, marking notifications as read and bulk actions like "Mark All Read" and "Delete All" are smooth and well-placed.
• Removing deprecated UI elements (like the unused search bar and redundant delete button) cleaned up the interface nicely. The page feels much more focused now.

Code Quality

• The separation of logic via the NotificationServices.js utility and Axios setup is clean and reusable.
• State updates are handled efficiently, the UI updates immediately in sync with backend responses, which is a good UX practice.
• Scoped CSS in Inbox.css keeps the styling modular and conflict-free — nice touch!

Collaboration

• Great to see the team synergy between frontend and backend. Shoutout to Chris for handling the utility service — it clearly streamlined the frontend logic.

Suggestions for Improvement:

• UX Feedback on Actions: Adding quick visual feedback (e.g., a brief toast or highlight) when bulk actions like "Mark All Read" or "Delete All" complete would reassure the user that the action succeeded.
• Loading States: Consider adding a loading indicator when the notifications are being fetched initially or when batch actions are in progress.
• Pagination or Lazy Loading: If the number of notifications grows large, we may want to consider pagination or lazy loading in future iterations for performance reasons.
• Search Bar Reintroduction: Once the backend supports it, bringing back the search functionality with sorting filters (by type, date, etc.) will make managing notifications much easier.

Reviewed Items:

• Buttons trigger the correct API actions
• Axios properly configured with token headers
• State updates reflect real-time UI behavior
• Code is modular and cleanly structured

---

Overall, this is a great full-stack feature enhancement. It lays the foundation for scalable, real-time communication in the platform, and I’m excited to see future upgrades like polling or WebSocket integration.

Thanks for your hard work on this — well done!

[Jose-Alarcon1]

Thanks so much for the detailed review and approval @SameerIssa, I really appreciate you taking the time to walk through the integration and the frontend logic. I’m glad to hear the flow and cleanup came through clearly!

I totally agree with your suggestions, especially around adding visual feedback for actions and implementing loading states. These improvements (along with search and pagination) are definitely on my radar and will likely be introduced in a future PR. Right now, I’m focused on pushing out an MVP that gets the core functionality working reliably and efficiently.

[cj-ballesteros]

Hey Chris and Jose! — just finished reviewing your PR titled "# Inbox Backend Frontend Link". Here’s my feedback:

---

💡 Suggestions for Improvement

• Notifications set to "system update" can't be found when sorting by any of the available options (Success, Warning, Error, General, Update), only by sorting by "All Types". The sorting works though!
• "No Notifications Found" which appears isn't properly positioned and is touching the margin.
• The buttons look too base css'y for my liking but it's just a nitpick.
• Meta PR change, but the /inbox link is changed, and one needs to use /tutor/inbox instead.

---

🧪 Tested This Feature

I followed the test instructions:

• ✅ Ran frontend and backend to verify the connection works.

• ✅ Created, updated, deleted, and marked notifications as read and verified they worked.

---

🚀 Final Thoughts

Everything else looks great, and I'll be looking at this PR for further reference for my own PR's! :D