Ft(#84): Fetch Trainee Notifications

[munezeromicha]

What does this PR do?

This PR implements the functionality to fetch trainee notifications from the database using GraphQL queries and mutations. It enables real-time updates for notifications and allows trainees to mark notifications as read, improving user experience and data efficiency.

Description of Task to be completed

• Fetch Trainee Notifications: Created a GET_TRAINEE_NOTIFICATIONS GraphQL query to retrieve notifications specific to trainees. This query includes fields such as id, message, createdAt, read status, and sender information.

• Mark Notifications as Read: Implemented a MARK_NOTIFICATION_AS_READ mutation to allow trainees to mark notifications as read. This mutation updates the notification’s read status in the database.

• Real-Time Notifications: Added a TRAINEE_NOTIFICATION_SUBSCRIPTION subscription for real-time notification updates. When a new notification is sent to a trainee, it is immediately pushed to their UI.

• Frontend Integration: Integrated the GraphQL query, mutation, and subscription with the frontend to display notifications dynamically, handle real-time updates, and manage unread notification counts. Enhanced UI components to show notifications efficiently and updated styling where needed.

How should this be manually tested?

• Setup: Ensure the backend server with GraphQL support is running and accessible.

Fetch Notifications:

• Log in as a trainee and navigate to the notifications page.
• Verify that notifications are fetched and displayed correctly from the database.

Mark as Read:

• Click on an unread notification to mark it as read.
• Confirm that the notification’s read status updates in the database, and the unread count in the UI decreases accordingly.

Error Handling:

Test with no internet connection and observe that appropriate error messages are displayed.

Screenshots:

[pacifiquemboni]

This is Good work @munezeromicha but there is some issues i found

• Closing icon is not closing notificatin instead notifications are disappearing
• I dont think that we have select all option on the design even on web
• Icons to remove specific notification is not working
• notification are not being marked as read whether clicking on cetain notification or using Mark all as read button

Those issues might be happening on my end, if there are working on your end let me know

[ncutixavier]

Please refer to this design to improve user experience

[pacifiquemboni]

Good work @munezeromicha, it is working well