chore: Notifications Inbox Screen Implementation #113

shafqat-muneer · 2025-01-09T09:06:55Z

LEARNER-10288: Notifications Inbox Screen Implementation

Description:

We need to implement a Notifications screen in the edX mobile app. This screen will display notifications fetched from the notifications table, allowing learners to stay updated on relevant discussions and interactions.

Design cases:

Empty screen when there are no notifications to show {It will be covered in separate ticket}
Distinguishable read and unread notifications
Grouping based on how recent the notification is (i.e. today/recent, last week, older)?

Design UI for the notifications screen. Main components include:

Icon for notification type (Discussions, Learning Reminder, Promotion) {Currently, just Discussions notifications implemented, so we are just showing discussions icon}
Ability to distinguish read and unread notifications (Unread indicator)
Course Name
Time elapsed
Group notifications based on recency (Today/Recent, This Week, Older)
Ability to mark all notifications as read {It's dependent on this PR. API integrated there. We will handle this point in separate PR}

Tasks:
Notifications Screen UI:

We need to design and implement the layout for the Notifications screen which is the list view for displaying individual notifications. Ensure the UI is user-friendly, visually aligned with the app’s design standards, and optimized for different screen sizes.
The UI will include notification groups based on recency. The following is the logic to be implemented for these groups:
- Recent: within the last 24 hours
- This Week: greater than 24 hours but not more than 7 day old
- Older: more than 7 day old
The notifications also show the time elapsed on each notification since it was received. We need the time elapse to be human-readable similar to the dates tab. i.e. 5 minutes, 2 days, 1 week, 1 month, etc.
Icons on notifications depend on the notification category.

Acceptance Criteria:

A functional Notifications screen is implemented, displaying notifications from the notifications table in an organized list.

Screenshots:

Light Mode	Dark Mode

Demo:

Light Mode	Dark Mode
Simulator.Screen.Recording.-.iPhone.16.-.2025-01-09.at.13.16.16.mp4	Simulator.Screen.Recording.-.iPhone.16.-.2025-01-09.at.13.16.32.mp4

Figma:

Mobile Notifications UI Screen

rnr · 2025-01-09T14:16:53Z

@shafqat-muneer I don't have access to the ticket and I don't know what the task is exactly. Could you briefly describe what this "implementation" is supposed to do? Just show a list of notifications, or maybe open/redirect notifications, edit/delete notifications in the list, make them read/unread, have a pool-to-refresh feature, etc.
Thank you

rnr · 2025-01-09T14:50:30Z

I think the Notifications Lists should respect readable content size on iPad as other lists do.

Settings for example:

rnr · 2025-01-09T13:27:32Z

Notifications/Notifications/Presentation/NotificationsInbox/NotificationsInboxView.swift

+                    }
+                    .padding(.horizontal, isHorizontal ? 48 : 0)
+                } else {
+                    // Handle empty or error screens


@shafqat-muneer Needs to implement Empty state here

and error/offline too I think

rnr · 2025-01-09T13:28:07Z

Notifications/Notifications/Presentation/NotificationsInbox/NotificationsInboxView.swift

+    }
+}
+
+struct SingleNotificationView: View {


@shafqat-muneer Maybe it should be a separate View file with the Preview?

rnr · 2025-01-09T13:51:18Z

Notifications/Notifications/Presentation/NotificationsInbox/NotificationsInboxViewModel.swift

+    var router: NotificationsRouter
+    var errorMessage: String? {
+        didSet {
+            withAnimation {


We are trying to avoid to use withAnimation inside view models. openedx#277
Please move to view. Thank you

rnr · 2025-01-09T14:40:49Z

Notifications/Notifications/Data/Network/NotificationsEndpoint.swift

+                .get
+        case .getAllNotifications:
+                .get


please fix indentations here

rnr · 2025-01-09T14:59:01Z

Notifications/Notifications/Presentation/AttributedText/AttributedText.swift

@@ -0,0 +1,73 @@
+import SwiftUI


@shafqat-muneer How about move AttributedText and parser to other Base Views in Core target? It looks like reusable.

And also why didn't add this as dependency to this target? As I see it's from here https://github.com/Iaenhaall/AttributedText ?
Or you made some changes with this AttributedText?

What problems do you see compared to just using NSAttributedString(AttributedString) to parse html?

rnr · 2025-01-09T15:19:55Z

Notifications/Notifications/Presentation/NotificationsInbox/NotificationsInboxView.swift

+                        .offset(y: 10)
+
+                        .padding(.leading, isHorizontal ? 48 : 10)
+                        .accessibilityIdentifier("back_button")


This accessibilityIdentifier is already inside BackNavigationButton`

rnr · 2025-01-09T15:42:18Z

Notifications/Notifications/Presentation/NotificationsInbox/NotificationsInboxViewModel.swift

+}
+
+public enum NotificationGroup: String, CaseIterable {
+    case recent = "Recent"


Shouldn't we place these in Localization?

mta452 · 2025-01-09T10:42:04Z

OpenEdX.xcodeproj/project.pbxproj

 			outputFileListPaths = (
 			);
 			outputPaths = (
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "\"${BUILD_DIR%Build/*}/SourcePackages/artifacts/fullstory-swift-package-ios/fullstory/tools/FullStoryCommandLine\" \"${CONFIGURATION_BUILD_DIR}/${WRAPPER_NAME}\"\n";
+			shellScript = "#\"${BUILD_DIR%Build/*}/SourcePackages/artifacts/fullstory-swift-package-ios/fullstory/tools/FullStoryCommandLine\" \"${CONFIGURATION_BUILD_DIR}/${WRAPPER_NAME}\"\n";


Are these changes intentionally committed?

mta452 · 2025-01-09T14:19:09Z

Notifications/Notifications/Presentation/AttributedText/AttributedText.swift

+     .padding()
+ ```
+ */
+public struct AttributedText: View {


Have we considered implementing it based on the built in HTML support of NSAttributedString as a simple solution?

mta452 · 2025-01-09T14:20:07Z

Notifications/Notifications/Presentation/AttributedText/HTML2TextParser.swift

+    }
+
+    /// Starts the text parsing process. The results of this method will be placed in the `formattedText` variable.
+    internal func parse() {


Have we considered implementing this logic based on XMLParser instead of writing our own?

mta452 · 2025-01-10T06:09:48Z

Notifications/Notifications/Presentation/NotificationsInbox/NotificationsInboxViewModel.swift

+            if totalPages > 1 {
+                if index == flatNotifications.count - 3 {
+                    if totalPages != 1 {
+                        if nextPage <= totalPages {


This can be simplified to a single condition without nesting.

shafqat-muneer · 2025-01-10T07:54:20Z

@shafqat-muneer I don't have access to the ticket and I don't know what the task is exactly. Could you briefly describe what this "implementation" is supposed to do? Just show a list of notifications, or maybe open/redirect notifications, edit/delete notifications in the list, make them read/unread, have a pool-to-refresh feature, etc. Thank you

@rnr I’ve updated the ticket details.

chore: Notifications Inbox Screen Implementation

fa0dac1

shafqat-muneer requested review from rnr and mta452 January 9, 2025 09:06

rnr reviewed Jan 9, 2025

View reviewed changes

mta452 reviewed Jan 10, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: Notifications Inbox Screen Implementation #113

chore: Notifications Inbox Screen Implementation #113

shafqat-muneer commented Jan 9, 2025 •

edited

Loading

rnr commented Jan 9, 2025 •

edited

Loading

rnr commented Jan 9, 2025

rnr Jan 9, 2025

rnr Jan 9, 2025

rnr Jan 9, 2025

rnr Jan 9, 2025

rnr Jan 9, 2025

rnr Jan 9, 2025

rnr Jan 9, 2025

rnr Jan 9, 2025

rnr Jan 9, 2025

rnr Jan 9, 2025

mta452 Jan 9, 2025

mta452 Jan 9, 2025

mta452 Jan 9, 2025

mta452 Jan 10, 2025

shafqat-muneer commented Jan 10, 2025

chore: Notifications Inbox Screen Implementation #113

Are you sure you want to change the base?

chore: Notifications Inbox Screen Implementation #113

Conversation

shafqat-muneer commented Jan 9, 2025 • edited Loading

Description:

Acceptance Criteria:

Screenshots:

Demo:

Figma:

rnr commented Jan 9, 2025 • edited Loading

rnr commented Jan 9, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shafqat-muneer commented Jan 10, 2025

shafqat-muneer commented Jan 9, 2025 •

edited

Loading

rnr commented Jan 9, 2025 •

edited

Loading