feat: Course Level Error Handling for Empty States (#12)

* feat: Course Level Error Handling for Empty States - Empty state for Home, Videos, Dates, and Discussion tabs. - Empty state for handouts, and Announcements screen. fixes: LEARNER-10039
edx · Jul 22, 2024 · 19666eb · 19666eb
1 parent d5c3b72
commit 19666eb
Show file tree

Hide file tree

Showing 27 changed files with 592 additions and 331 deletions.
diff --git a/core/src/main/java/org/openedx/core/NoContentScreenType.kt b/core/src/main/java/org/openedx/core/NoContentScreenType.kt
@@ -0,0 +1,31 @@
+package org.openedx.core
+
+enum class NoContentScreenType(
+    val iconResId: Int,
+    val messageResId: Int,
+) {
+    COURSE_OUTLINE(
+        iconResId = R.drawable.core_ic_no_content,
+        messageResId = R.string.core_no_course_content
+    ),
+    COURSE_VIDEOS(
+        iconResId = R.drawable.core_ic_no_videos,
+        messageResId = R.string.core_no_videos
+    ),
+    COURSE_DATES(
+        iconResId = R.drawable.core_ic_no_content,
+        messageResId = R.string.core_no_dates
+    ),
+    COURSE_DISCUSSIONS(
+        iconResId = R.drawable.core_ic_no_content,
+        messageResId = R.string.core_no_discussion
+    ),
+    COURSE_HANDOUTS(
+        iconResId = R.drawable.core_ic_no_handouts,
+        messageResId = R.string.core_no_handouts
+    ),
+    COURSE_ANNOUNCEMENTS(
+        iconResId = R.drawable.core_ic_no_announcements,
+        messageResId = R.string.core_no_announcements
+    )
+}
diff --git a/core/src/main/java/org/openedx/core/ui/ComposeCommon.kt b/core/src/main/java/org/openedx/core/ui/ComposeCommon.kt
@@ -32,12 +32,15 @@ import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.pager.HorizontalPager
 import androidx.compose.foundation.pager.PagerState
 import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.text.ClickableText
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.Button
 import androidx.compose.material.ButtonDefaults
+import androidx.compose.material.CircularProgressIndicator
 import androidx.compose.material.Divider
 import androidx.compose.material.Icon
 import androidx.compose.material.IconButton
@@ -50,6 +53,7 @@ import androidx.compose.material.TextFieldDefaults
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.AccountCircle
 import androidx.compose.material.icons.filled.Close
+import androidx.compose.material.icons.filled.Info
 import androidx.compose.material.icons.filled.ManageAccounts
 import androidx.compose.material.icons.filled.Search
 import androidx.compose.runtime.Composable
@@ -99,11 +103,13 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.TextUnit
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
 import coil.ImageLoader
 import coil.compose.AsyncImage
 import coil.decode.GifDecoder
 import coil.decode.ImageDecoderDecoder
 import kotlinx.coroutines.launch
+import org.openedx.core.NoContentScreenType
 import org.openedx.core.R
 import org.openedx.core.UIMessage
 import org.openedx.core.domain.model.RegistrationField
@@ -1191,6 +1197,41 @@ fun FullScreenErrorView(
     }
 }
 
+@Composable
+fun NoContentScreen(noContentScreenType: NoContentScreenType) {
+    NoContentScreen(
+        message = stringResource(id = noContentScreenType.messageResId),
+        icon = painterResource(id = noContentScreenType.iconResId)
+    )
+}
+
+@Composable
+fun NoContentScreen(message: String, icon: Painter) {
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .verticalScroll(rememberScrollState()),
+        verticalArrangement = Arrangement.Center,
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        Icon(
+            modifier = Modifier.size(80.dp),
+            painter = icon,
+            contentDescription = null,
+            tint = MaterialTheme.appColors.progressBarBackgroundColor,
+        )
+        Spacer(Modifier.height(24.dp))
+        Text(
+            modifier = Modifier.fillMaxWidth(0.8f),
+            text = message,
+            color = MaterialTheme.appColors.textPrimary,
+            style = MaterialTheme.appTypography.bodyMedium,
+            fontWeight = FontWeight.Medium,
+            textAlign = TextAlign.Center
+        )
+    }
+}
+
 @Composable
 fun AuthButtonsPanel(
     onRegisterClick: () -> Unit,
@@ -1278,6 +1319,19 @@ fun RoundTabsBar(
     }
 }
 
+@Composable
+fun CircularProgress() {
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(MaterialTheme.appColors.background)
+            .zIndex(1f),
+        contentAlignment = Alignment.Center
+    ) {
+        CircularProgressIndicator(color = MaterialTheme.appColors.primary)
+    }
+}
+
 @Composable
 private fun RoundTab(
     modifier: Modifier = Modifier,
@@ -1399,3 +1453,14 @@ private fun RoundTabsBarPreview() {
         )
     }
 }
+
+@Preview
+@Composable
+private fun PreviewNoContentScreen() {
+    OpenEdXTheme(darkTheme = true) {
+        NoContentScreen(
+            "No Content available",
+            rememberVectorPainter(image = Icons.Filled.Info)
+        )
+    }
+}
diff --git a/core/src/main/java/org/openedx/core/ui/WebContentScreen.kt b/core/src/main/java/org/openedx/core/ui/WebContentScreen.kt
@@ -6,7 +6,6 @@ import android.net.Uri
 import android.webkit.WebResourceRequest
 import android.webkit.WebView
 import android.webkit.WebViewClient
-import androidx.compose.foundation.background
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -18,7 +17,6 @@ import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.widthIn
-import androidx.compose.material.CircularProgressIndicator
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Scaffold
 import androidx.compose.material.Surface
@@ -105,15 +103,7 @@ fun WebContentScreen(
                     color = MaterialTheme.appColors.background
                 ) {
                     if (htmlBody.isNullOrEmpty() && contentUrl.isNullOrEmpty()) {
-                        Box(
-                            modifier = Modifier
-                                .fillMaxSize()
-                                .background(MaterialTheme.appColors.background)
-                                .zIndex(1f),
-                            contentAlignment = Alignment.Center
-                        ) {
-                            CircularProgressIndicator(color = MaterialTheme.appColors.primary)
-                        }
+                        CircularProgress()
                     } else {
                         var webViewAlpha by rememberSaveable { mutableFloatStateOf(0f) }
                         Surface(

diff --git a/core/src/main/res/drawable/core_ic_no_announcements.xml b/core/src/main/res/drawable/core_ic_no_announcements.xml
@@ -0,0 +1,11 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="86dp"
+    android:height="86dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960">
+
+    <path
+        android:fillColor="#ffffff"
+        android:pathData="M720,520v-80h160v80L720,520ZM768,800 L640,704 688,640 816,736 768,800ZM688,320 L640,256 768,160 816,224 688,320ZM200,760v-160h-40q-33,0 -56.5,-23.5T80,520v-80q0,-33 23.5,-56.5T160,360h160l200,-120v480L320,600h-40v160h-80ZM440,578v-196l-98,58L160,440v80h182l98,58ZM560,614v-268q27,24 43.5,58.5T620,480q0,41 -16.5,75.5T560,614ZM300,480Z" />
+
+</vector>
diff --git a/core/src/main/res/drawable/core_ic_no_content.xml b/core/src/main/res/drawable/core_ic_no_content.xml
@@ -0,0 +1,11 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="86dp"
+    android:height="86dp"
+    android:viewportWidth="20"
+    android:viewportHeight="20">
+
+    <path
+        android:fillColor="#ffffff"
+        android:pathData="M10,0C4.48,0 0,4.48 0,10C0,15.52 4.48,20 10,20C15.52,20 20,15.52 20,10C20,4.48 15.52,0 10,0ZM10,11C9.45,11 9,10.55 9,10V6C9,5.45 9.45,5 10,5C10.55,5 11,5.45 11,6V10C11,10.55 10.55,11 10,11ZM11,15H9V13H11V15Z" />
+
+</vector>
diff --git a/core/src/main/res/drawable/core_ic_no_handouts.xml b/core/src/main/res/drawable/core_ic_no_handouts.xml
@@ -0,0 +1,11 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="86dp"
+    android:height="86dp"
+    android:viewportWidth="18"
+    android:viewportHeight="18">
+
+    <path
+        android:fillColor="#ffffff"
+        android:pathData="M16,0H2C0.9,0 0,0.9 0,2V16C0,17.1 0.9,18 2,18H16C17.1,18 18,17.1 18,16V2C18,0.9 17.1,0 16,0ZM10,14H5C4.45,14 4,13.55 4,13C4,12.45 4.45,12 5,12H10C10.55,12 11,12.45 11,13C11,13.55 10.55,14 10,14ZM13,10H5C4.45,10 4,9.55 4,9C4,8.45 4.45,8 5,8H13C13.55,8 14,8.45 14,9C14,9.55 13.55,10 13,10ZM13,6H5C4.45,6 4,5.55 4,5C4,4.45 4.45,4 5,4H13C13.55,4 14,4.45 14,5C14,5.55 13.55,6 13,6Z" />
+
+</vector>
diff --git a/core/src/main/res/drawable/core_ic_no_videos.xml b/core/src/main/res/drawable/core_ic_no_videos.xml
@@ -0,0 +1,11 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="86dp"
+    android:height="58dp"
+    android:viewportWidth="18"
+    android:viewportHeight="12">
+
+    <path
+        android:fillColor="#ffffff"
+        android:pathData="M14,4.5V1C14,0.45 13.55,0 13,0H1C0.45,0 0,0.45 0,1V11C0,11.55 0.45,12 1,12H13C13.55,12 14,11.55 14,11V7.5L16.29,9.79C16.92,10.42 18,9.97 18,9.08V2.91C18,2.02 16.92,1.57 16.29,2.2L14,4.5Z" />
+
+</vector>
diff --git a/core/src/main/res/values/strings.xml b/core/src/main/res/values/strings.xml
@@ -185,6 +185,12 @@
     <string name="core_course_container_nav_discussions">Discussions</string>
     <string name="core_course_container_nav_more">More</string>
     <string name="core_course_container_nav_dates" tools:ignore="MissingTranslation">Dates</string>
+    <string name="core_no_course_content">No course content is currently available.</string>
+    <string name="core_no_videos">There are currently no videos for this course.</string>
+    <string name="core_no_dates">Course dates are currently not available.</string>
+    <string name="core_no_discussion">Unable to load discussions.\n Please try again later.</string>
+    <string name="core_no_handouts">There are currently no handouts for this course.</string>
+    <string name="core_no_announcements">There are currently no announcements for this course.</string>
 
     <!-- IAP -->
     <string name="iap_upgrade_access_course">Upgrade to access more features</string>

diff --git a/course/src/main/java/org/openedx/course/presentation/dates/CourseDatesScreen.kt b/course/src/main/java/org/openedx/course/presentation/dates/CourseDatesScreen.kt
@@ -57,13 +57,13 @@ import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.pluralStringResource
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Devices
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.fragment.app.FragmentManager
+import org.openedx.core.NoContentScreenType
 import org.openedx.core.UIMessage
 import org.openedx.core.data.model.DateType
 import org.openedx.core.domain.model.CourseDateBlock
@@ -75,7 +75,9 @@ import org.openedx.core.presentation.CoreAnalyticsScreen
 import org.openedx.core.presentation.course.CourseViewMode
 import org.openedx.core.presentation.dialog.alert.ActionDialogFragment
 import org.openedx.core.presentation.settings.calendarsync.CalendarSyncUIState
+import org.openedx.core.ui.CircularProgress
 import org.openedx.core.ui.HandleUIMessage
+import org.openedx.core.ui.NoContentScreen
 import org.openedx.core.ui.WindowSize
 import org.openedx.core.ui.WindowType
 import org.openedx.core.ui.displayCutoutForLandscape
@@ -305,22 +307,13 @@ private fun CourseDatesUI(
                             }
                         }
 
-                        DatesUIState.Empty -> {
-                            Box(
-                                modifier = Modifier.fillMaxSize(),
-                                contentAlignment = Alignment.Center
-                            ) {
-                                Text(
-                                    modifier = Modifier.fillMaxWidth(),
-                                    text = stringResource(id = R.string.course_dates_unavailable_message),
-                                    color = MaterialTheme.appColors.textPrimary,
-                                    style = MaterialTheme.appTypography.titleMedium,
-                                    textAlign = TextAlign.Center
-                                )
-                            }
+                        DatesUIState.Error -> {
+                            NoContentScreen(noContentScreenType = NoContentScreenType.COURSE_DATES)
                         }
 
-                        DatesUIState.Loading -> {}
+                        DatesUIState.Loading -> {
+                            CircularProgress()
+                        }
                     }
                 }
             }
@@ -643,6 +636,26 @@ private fun CourseDateItem(
     }
 }
 
+
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+private fun EmptyCourseDatesScreenPreview() {
+    OpenEdXTheme {
+        CourseDatesUI(
+            windowSize = WindowSize(WindowType.Compact, WindowType.Compact),
+            uiState = DatesUIState.Error,
+            uiMessage = null,
+            isSelfPaced = true,
+            calendarSyncUIState = mockCalendarSyncUIState,
+            onItemClick = {},
+            onPLSBannerViewed = {},
+            onSyncDates = {},
+            onCalendarSyncSwitch = {},
+        )
+    }
+}
+
 @Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
 @Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
 @Composable

diff --git a/course/src/main/java/org/openedx/course/presentation/dates/CourseDatesViewModel.kt b/course/src/main/java/org/openedx/course/presentation/dates/CourseDatesViewModel.kt
@@ -105,17 +105,16 @@ class CourseDatesViewModel(
                 isSelfPaced = courseStructure?.isSelfPaced ?: false
                 val datesResponse = interactor.getCourseDates(courseId = courseId)
                 if (datesResponse.datesSection.isEmpty()) {
-                    _uiState.value = DatesUIState.Empty
+                    _uiState.value = DatesUIState.Error
                 } else {
                     _uiState.value = DatesUIState.Dates(datesResponse)
                     courseBannerType = datesResponse.courseBanner.bannerType
                     checkIfCalendarOutOfDate()
                 }
             } catch (e: Exception) {
+                _uiState.value = DatesUIState.Error
                 if (e.isInternetError()) {
                     _uiMessage.emit(UIMessage.SnackBarMessage(resourceManager.getString(CoreR.string.core_error_no_connection)))
-                } else {
-                    _uiMessage.emit(UIMessage.SnackBarMessage(resourceManager.getString(CoreR.string.core_error_unknown_error)))
                 }
             } finally {
                 courseNotifier.send(CourseLoading(false))

diff --git a/course/src/main/java/org/openedx/course/presentation/dates/DashboardUIState.kt b/course/src/main/java/org/openedx/course/presentation/dates/DashboardUIState.kt
@@ -3,10 +3,7 @@ package org.openedx.course.presentation.dates
 import org.openedx.core.domain.model.CourseDatesResult
 
 sealed class DatesUIState {
-    data class Dates(
-        val courseDatesResult: CourseDatesResult,
-    ) : DatesUIState()
-
-    object Empty : DatesUIState()
-    object Loading : DatesUIState()
+    data class Dates(val courseDatesResult: CourseDatesResult) : DatesUIState()
+    data object Error : DatesUIState()
+    data object Loading : DatesUIState()
 }
diff --git a/course/src/main/java/org/openedx/course/presentation/handouts/HandoutsUIState.kt b/course/src/main/java/org/openedx/course/presentation/handouts/HandoutsUIState.kt
@@ -0,0 +1,7 @@
+package org.openedx.course.presentation.handouts
+
+sealed class HandoutsUIState {
+    data object Loading : HandoutsUIState()
+    data class HTMLContent(val htmlContent: String) : HandoutsUIState()
+    data object Error : HandoutsUIState()
+}