Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Course Level Error Handling for Empty States #477

Closed

Conversation

shafqat-muneer
Copy link
Contributor

LEARNER-10020: iOS - Course Level Error Handling for Empty States

Portrait Mode:

Light Dark Light Dark
Simulator Screenshot - iPhone 15 - 2024-07-02 at 14 41 25 Simulator Screenshot - iPhone 15 - 2024-07-02 at 14 51 01 Simulator Screenshot - iPhone 15 - 2024-07-02 at 14 42 00 Simulator Screenshot - iPhone 15 - 2024-07-02 at 14 49 45
Simulator Screenshot - iPhone 15 - 2024-07-02 at 14 42 09 Simulator Screenshot - iPhone 15 - 2024-07-02 at 14 50 03 Simulator Screenshot - iPhone 15 - 2024-07-02 at 14 42 22 Simulator Screenshot - iPhone 15 - 2024-07-02 at 14 50 20
Simulator Screenshot - iPhone 15 - 2024-07-02 at 14 42 31 Simulator Screenshot - iPhone 15 - 2024-07-02 at 14 50 26

Landscape Mode:

Light Dark Light Dark
Simulator Screenshot - iPhone 15 - 2024-07-02 at 14 41 28 Simulator Screenshot - iPhone 15 - 2024-07-02 at 14 51 03 Simulator Screenshot - iPhone 15 - 2024-07-02 at 14 42 02 Simulator Screenshot - iPhone 15 - 2024-07-02 at 14 49 58
Simulator Screenshot - iPhone 15 - 2024-07-02 at 14 42 10 Simulator Screenshot - iPhone 15 - 2024-07-02 at 14 50 05 Simulator Screenshot - iPhone 15 - 2024-07-02 at 14 42 24 Simulator Screenshot - iPhone 15 - 2024-07-02 at 14 50 22
Simulator Screenshot - iPhone 15 - 2024-07-02 at 14 42 32 Simulator Screenshot - iPhone 15 - 2024-07-02 at 14 50 27

Copy link
Contributor

@saeedbashir saeedbashir left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be nice if you can show the empty screen for discussions tab as well.
image

{
"images" : [
{
"filename" : "campaign_24dp_FILL0_wght400_GRAD0_opsz24.svg",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you please change the file name as per the asset name?

Comment on lines 17 to 21
case noVideos(error: String, image: SwiftUI.Image)
case noHandouts(error: String, image: SwiftUI.Image)
case noAnnouncements(error: String, image: SwiftUI.Image)
case noCourseDates(error: String, image: SwiftUI.Image)
case noCourseware(error: String, image: SwiftUI.Image)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are passing the same data in all the cases, how about defining a single case for all the cases and use that? Thoughts?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was thinking the same thing, but I opted for this approach to accommodate any future type-specific UI requirements. We can opt for single case for now. Thoughts?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Opting for a single case is good at the moment. We will update it in the future as per the need.

GeometryReader { proxy in
VStack(spacing: 20) {
Spacer()
switch errorType {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems bit odd to use the switch again under a case of the same switch. How about using a single GeometryReader and configure it according to the need.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for pointing that out. I have fixed it.

Comment on lines 58 to 72
GeometryReader { proxy in
VStack {
ScrollView {
DynamicOffsetView(
coordinate: $coordinate,
collapsed: $collapsed,
viewHeight: $viewHeight
)

FullScreenErrorView(
type: .noCourseDates(
error: CourseLocalization.Error.courseDateUnavailable,
image: CoreAssets.information.swiftUIImage
)
)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it possible to configure FullScreenErrorView in a way that we can directly use it like we are using OfflineSnackBarView?

Copy link
Contributor

@rnr rnr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM - only small code-style notes

CoreAssets.noWifi.swiftUIImage
switch errorType {
case .noVideos(error: let error, image: let image),
.noHandouts(error: let error, image: let image),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please remove the extra indentation

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

XCode indenting it like this way.

.padding(.top, 8)
.frame(
maxHeight: .infinity,
alignment: .topLeading)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you please move bracket on new line?

viewModel.router.showHandoutsUpdatesView(
handouts: viewModel.handouts,
announcements: nil,
router: viewModel.router,
cssInjector: viewModel.cssInjector)
cssInjector: viewModel.cssInjector,
type: type)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you please move bracket on new line?

announcements: viewModel.updates,
router: viewModel.router,
cssInjector: viewModel.cssInjector,
type: type)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you please move bracket on new line?

@rnr
Copy link
Contributor

rnr commented Jul 3, 2024

@shafqat-muneer
I discovered this behavior during a PR review - perhaps we want to change it and not show the "blank message" on loading

Screen.Recording.2024-07-02.at.16.01.12.mov

@shafqat-muneer
Copy link
Contributor Author

@shafqat-muneer I discovered this behavior during a PR review - perhaps we want to change it and not show the "blank message" on loading

Screen.Recording.2024-07-02.at.16.01.12.mov

@rnr Thank you for pointing that out. I have fixed it.

@shafqat-muneer
Copy link
Contributor Author

@saeedbashir @rnr Feedback addressed. Ready for another round of review. 🎉

rnr
rnr previously approved these changes Jul 8, 2024
Copy link
Contributor

@rnr rnr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Copy link
Contributor

@saeedbashir saeedbashir left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please update message for discussions screen.

image

Comment on lines 168 to 169
error: DiscussionLocalization.Error.unableToLoadCourseContent,
image: CoreAssets.information.swiftUIImage
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of passing message and icon from everywhere, how about just setting the type and define a method in FullScreenErrorView for message and icon. You can keep a generic type that will take message and icon as in input for future.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The FullScreenErrorView is utilized across various modules, with its implementation located in the Core module to enable application-wide usage. Embedding messages within the full screen would necessitate moving module-specific errors into the core module, which is not ideal. Therefore, I suggest passing the message and icon instead.

@shafqat-muneer
Copy link
Contributor Author

@saeedbashir Feedback addressed 🎉

Copy link
Contributor

@saeedbashir saeedbashir left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍

@shafqat-muneer
Copy link
Contributor Author

@volodymyr-chekyrta Awaiting your final review prior to merging.

@rnr rnr linked an issue Jul 12, 2024 that may be closed by this pull request
@shafqat-muneer
Copy link
Contributor Author

We're closing this PR and moving these changes to our own fork, as they are critical for us. After our release, we hope to find a way to contribute these changes back, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[iOS] Verify and Fix Course Level Empty Screens
3 participants