Show Error on Dialog (#358)

gdg-berlin-android · Jul 5, 2024 · e8deb7d · e8deb7d
2 parents 4d46efa + a0a7f63
commit e8deb7d
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 10 deletions.
diff --git a/zeapp/android/build.gradle.kts b/zeapp/android/build.gradle.kts
@@ -191,6 +191,7 @@ dependencies {
     implementation(libs.timber)
     implementation(libs.aboutlibraries.compose)
     implementation(libs.androidx.compose.hilt.navigation)
+    implementation(libs.androidx.lifecycle.runtime.compose.android)
     debugImplementation(libs.androidx.compose.ui.tooling)
     debugImplementation(libs.androidx.compose.ui.test.manifest)
 

diff --git a/zeapp/android/src/main/java/de/berlindroid/zeapp/zeui/ZeNameEditorDialog.kt b/zeapp/android/src/main/java/de/berlindroid/zeapp/zeui/ZeNameEditorDialog.kt
@@ -22,9 +22,12 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.window.DialogProperties
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.ban.autosizetextfield.AutoSizeTextField
 import de.berlindroid.zeapp.R
 import de.berlindroid.zeapp.zebits.composableToBitmap
@@ -33,6 +36,8 @@ import de.berlindroid.zeapp.zemodels.ZeConfiguration
 import de.berlindroid.zeapp.zeui.zepages.NamePage
 import de.berlindroid.zeapp.zeui.zetheme.ZeBlack
 import de.berlindroid.zeapp.zeui.zetheme.ZeWhite
+import de.berlindroid.zeapp.zevm.ZeBadgeErrorUiState
+import kotlinx.coroutines.flow.StateFlow
 
 const val MaxCharacters: Int = 20
 
@@ -49,7 +54,8 @@ fun NameEditorDialog(
     config: ZeConfiguration.Name,
     dismissed: () -> Unit = {},
     accepted: (config: ZeConfiguration.Name) -> Unit,
-    updateMessage: (String) -> Unit,
+    updateMessage: (String, Boolean) -> Unit,
+    errorUiState: StateFlow<ZeBadgeErrorUiState>,
 ) {
     val activity = LocalContext.current as Activity
 
@@ -76,7 +82,7 @@ fun NameEditorDialog(
                     if (image.isBinary()) {
                         accepted(ZeConfiguration.Name(name, contact, image))
                     } else {
-                        updateMessage(activity.resources.getString(R.string.binary_image_needed))
+                        updateMessage(activity.resources.getString(R.string.binary_image_needed), true)
                     }
                 },
             ) {
@@ -146,11 +152,34 @@ fun NameEditorDialog(
                         }
                     },
                 )
+
+                ErrorPlaceHolder(errorUiState)
             }
         },
     )
 }
 
+@Composable
+private fun ErrorPlaceHolder(errorUiState: StateFlow<ZeBadgeErrorUiState>) {
+    when (val viewState = errorUiState.collectAsStateWithLifecycle().value) {
+        is ZeBadgeErrorUiState.ShowError -> {
+            Text(
+                text = "Error: ${viewState.message}",
+                style = TextStyle(color = Color.Red),
+            )
+        }
+
+        is ZeBadgeErrorUiState.ShowLocalisedError -> {
+            Text(
+                text = "Error: ${stringResource(id = viewState.messageResId)}",
+                style = TextStyle(color = Color.Red),
+            )
+        }
+
+        else -> return
+    }
+}
+
 @Composable
 fun ClearIcon(isEmpty: Boolean, modifier: Modifier = Modifier, onClick: () -> Unit) {
     if (!isEmpty) {

diff --git a/zeapp/android/src/main/java/de/berlindroid/zeapp/zeui/zehome/SelectedEditor.kt b/zeapp/android/src/main/java/de/berlindroid/zeapp/zeui/zehome/SelectedEditor.kt
@@ -39,12 +39,18 @@ internal fun SelectedEditor(
         Timber.e("Slot: This slot '${editor.slot}' is not supposed to be editable.")
     } else {
         when (val config = editor.config) {
-            is ZeConfiguration.Name -> NameEditorDialog(
-                config = config,
-                dismissed = { vm.slotConfigured(editor.slot, null) },
-                accepted = { newConfig -> vm.slotConfigured(editor.slot, newConfig) },
-                updateMessage = vm::showMessage,
-            )
+            is ZeConfiguration.Name -> {
+                NameEditorDialog(
+                    config = config,
+                    dismissed = {
+                        vm.clearErrorState()
+                        vm.slotConfigured(editor.slot, null)
+                    },
+                    accepted = { newConfig -> vm.slotConfigured(editor.slot, newConfig) },
+                    updateMessage = vm::showMessage,
+                    errorUiState = vm.errorUiState,
+                )
+            }
 
             is ZeConfiguration.Picture -> PictureEditorDialog(
                 dismissed = { vm.slotConfigured(null, null) },

diff --git a/zeapp/android/src/main/java/de/berlindroid/zeapp/zevm/ZeBadgeViewModel.kt b/zeapp/android/src/main/java/de/berlindroid/zeapp/zevm/ZeBadgeViewModel.kt
@@ -1,6 +1,7 @@
 package de.berlindroid.zeapp.zevm
 
 import android.graphics.Bitmap
+import androidx.annotation.StringRes
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.setValue
@@ -52,6 +53,9 @@ class ZeBadgeViewModel @Inject constructor(
     private val _uiState: MutableStateFlow<ZeBadgeUiState> = MutableStateFlow(getInitialUIState())
     val uiState: StateFlow<ZeBadgeUiState> = _uiState.asStateFlow()
 
+    private val _errorUiState: MutableStateFlow<ZeBadgeErrorUiState> = MutableStateFlow(ZeBadgeErrorUiState.Initial)
+    val errorUiState: StateFlow<ZeBadgeErrorUiState> = _errorUiState.asStateFlow()
+
     // See if disappearing message is ongoing
     private var hideMessageJob: Job? = null
     private var messageProgressJob: Job? = null
@@ -76,13 +80,22 @@ class ZeBadgeViewModel @Inject constructor(
 
     fun showMessage(
         message: String,
+        showAsError: Boolean = false,
         duration: Long = MESSAGE_DISPLAY_DURATION,
     ) {
         _uiState.update {
             it.copy(message = it.message + message)
         }
 
         scheduleMessageDisappearance(duration)
+
+        if (showAsError) {
+            emitSnackBarAction(message = message)
+        }
+    }
+
+    private fun emitSnackBarAction(message: String) {
+        _errorUiState.value = ZeBadgeErrorUiState.ShowError(message)
     }
 
     private fun scheduleMessageDisappearance(
@@ -213,7 +226,7 @@ class ZeBadgeViewModel @Inject constructor(
                 slot,
                 slots[slot]!!,
             )
-            newCurrentSlotEditor?.let { currentSlotEditor ->
+            newCurrentSlotEditor.let { currentSlotEditor ->
                 _uiState.update {
                     it.copy(currentSlotEditor = currentSlotEditor)
                 }
@@ -528,6 +541,10 @@ class ZeBadgeViewModel @Inject constructor(
             slots = emptyMap(),
             currentBadgeConfig = null,
         )
+
+    fun clearErrorState() {
+        _errorUiState.value = ZeBadgeErrorUiState.ClearError
+    }
 }
 
 data class ZeBadgeUiState(
@@ -539,4 +556,14 @@ data class ZeBadgeUiState(
     val currentBadgeConfig: Map<String, Any?>?,
 )
 
+sealed class ZeBadgeErrorUiState {
+    data object Initial : ZeBadgeErrorUiState()
+
+    data class ShowLocalisedError(@StringRes val messageResId: Int) : ZeBadgeErrorUiState()
+
+    data class ShowError(val message: String) : ZeBadgeErrorUiState()
+
+    data object ClearError : ZeBadgeErrorUiState()
+}
+
 // ¹ https://www.reddit.com/r/ProgrammerHumor/comments/27yykv/indent_hadouken/
diff --git a/zeapp/android/src/main/res/values/strings.xml b/zeapp/android/src/main/res/values/strings.xml
@@ -31,7 +31,7 @@
     <string name="qr_code_phone">Phone</string>
     <string name="your_name_here" tools:ignore="MissingTranslation">Your Name Here</string>
     <string name="contact_me_here" tools:ignore="MissingTranslation">Contact Me Here</string>
-    <string name="binary_image_needed" tools:ignore="MissingTranslation">Binary image needed. Press one of the buttons below the image.</string>
+    <string name="binary_image_needed" tools:ignore="MissingTranslation">Binary image needed.</string>
     <string name="add_your_phrase_here" tools:ignore="MissingTranslation">Add your phrase here</string>
     <string name="random_phrase" tools:ignore="MissingTranslation">Random Phrase</string>
     <string name="unicorn_at_an_android_conference_in_isometric_view" tools:ignore="MissingTranslation">Unicorn at an android conference in isometric view.</string>

diff --git a/zeapp/gradle/libs.versions.toml b/zeapp/gradle/libs.versions.toml
@@ -47,6 +47,7 @@ espresso = "3.6.1"
 compose-ui-core = "1.6.8"
 compose-ui-junit = "1.6.8"
 compose-ui-manifest = "1.6.8"
+lifecycleRuntimeComposeAndroid = "2.8.3"
 
 [plugins]
 android-application = { id = "com.android.application", version.ref = "android-gradle-plugin" }
@@ -120,6 +121,7 @@ androidx-ktx = { group = "androidx.test", name = "core-ktx", version.ref = "andr
 compose-ui-core = { module = "androidx.compose.ui:ui-test", version.ref = "compose-ui-core" }
 compose-ui-junit = { module = "androidx.compose.ui:ui-test-junit4", version.ref = "compose-ui-junit" }
 compose-ui-manifest = { module = "androidx.compose.ui:ui-test-manifest", version.ref = "compose-ui-manifest" }
+androidx-lifecycle-runtime-compose-android = { group = "androidx.lifecycle", name = "lifecycle-runtime-compose-android", version.ref = "lifecycleRuntimeComposeAndroid" }
 
 [bundles]
 screeshottest-android = [