Implement error handling in chat screen

app/src/main/java/com/necatisozer/wires/ui/chat/ChatScreen.kt

@@ -46,6 +46,7 @@ import androidx.compose.material.LocalContentAlpha
 import androidx.compose.material.LocalContentColor
 import androidx.compose.material.LocalTextStyle
 import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Scaffold
 import androidx.compose.material.Text
 import androidx.compose.material.TopAppBar
 import androidx.compose.material.icons.Icons
@@ -80,6 +81,7 @@ import com.necatisozer.wires.domain.model.Theme.DARK
 import com.necatisozer.wires.domain.model.Theme.LIGHT
 import com.necatisozer.wires.domain.model.User
 import com.necatisozer.wires.domain.model.isDarkTheme
+import com.necatisozer.wires.ui.widget.ErrorContent
 import com.necatisozer.wires.util.compose.BackPressHandler
 import dev.chrisbanes.accompanist.coil.CoilImage
 import dev.chrisbanes.accompanist.insets.navigationBarsWithImePadding
@@ -108,8 +110,9 @@ fun ChatScreen(
 
     BackPressHandler(onBackPressed = popBack)
 
-    Box(modifier) {
-        Column(Modifier.fillMaxSize()) {
+    Scaffold(
+        modifier = modifier,
+        topBar = {
             ChatAppBar(
                 title = viewState.value.user?.nickname.orEmpty(),
                 onBackClick = popBack,
@@ -118,23 +121,30 @@ fun ChatScreen(
                     val theme = if (isDarkTheme) DARK else LIGHT
                     chatViewModel.setTheme(theme)
                 },
-                modifier = Modifier.statusBarsPadding()
-            )
-            Messages(
-                messages = viewState.value.messages,
-                user = viewState.value.user,
-                lazyListState = listState,
-                modifier = Modifier.weight(1f)
-            )
-            MessageInput(
-                onSendClick = {
-                    chatViewModel.sendMessage(it)
-                    scope.launch {
-                        listState.animateScrollToItem(viewState.value.messages.lastIndex)
-                    }
-                },
-                modifier = Modifier.navigationBarsWithImePadding(),
+                modifier = Modifier.statusBarsPadding(),
             )
+        },
+    ) {
+        if (viewState.value.showError) {
+            ErrorContent(Modifier.fillMaxSize())
+        } else {
+            Column(Modifier.fillMaxSize()) {
+                Messages(
+                    messages = viewState.value.messages,
+                    user = viewState.value.user,
+                    listState = listState,
+                    modifier = Modifier.weight(1f),
+                )
+                MessageInput(
+                    onSendClick = {
+                        chatViewModel.sendMessage(it)
+                        scope.launch {
+                            listState.animateScrollToItem(viewState.value.messages.lastIndex)
+                        }
+                    },
+                    modifier = Modifier.navigationBarsWithImePadding(),
+                )
+            }
         }
     }
 }
@@ -194,12 +204,12 @@ fun ChatAppBar(
 fun Messages(
     messages: List<Message>,
     user: User?,
-    lazyListState: LazyListState,
+    listState: LazyListState,
     modifier: Modifier = Modifier,
 ) {
     LazyColumn(
         modifier = modifier,
-        state = lazyListState,
+        state = listState,
     ) {
         itemsIndexed(messages) { index, message ->
             val userOfPreviousMessage = messages.getOrNull(index - 1)?.user

app/src/main/java/com/necatisozer/wires/ui/chat/ChatViewModel.kt

@@ -22,6 +22,7 @@ import com.necatisozer.wires.domain.model.Theme
 import com.necatisozer.wires.domain.repositories.MessagesRepository
 import com.necatisozer.wires.domain.repositories.UserRepository
 import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.catch
 import kotlinx.coroutines.flow.combine
 import kotlinx.coroutines.launch
 import javax.inject.Inject
@@ -42,6 +43,8 @@ class ChatViewModel @Inject constructor(
             messages = messages,
             theme = theme,
         )
+    }.catch {
+        emit(ChatViewState(showError = true))
     }
 
     fun deleteUserAndMessages() = viewModelScope.launch {

app/src/main/java/com/necatisozer/wires/ui/chat/ChatViewState.kt

@@ -24,4 +24,5 @@ data class ChatViewState(
     val user: User? = null,
     val messages: List<Message> = emptyList(),
     val theme: Theme = SYSTEM,
+    val showError: Boolean = false,
 )

app/src/main/java/com/necatisozer/wires/ui/widget/ErrorContent.kt

@@ -0,0 +1,63 @@
+/*
+ * Copyright 2021 Necati Sozer
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package com.necatisozer.wires.ui.widget
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.material.Icon
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Error
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import com.necatisozer.wires.R
+
+@Composable
+fun ErrorContent(
+    modifier: Modifier = Modifier,
+) {
+    Surface(
+        modifier = modifier,
+        color = MaterialTheme.colors.surface,
+        contentColor = MaterialTheme.colors.error,
+    ) {
+        Column(
+            modifier = Modifier.fillMaxWidth(),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center,
+        ) {
+            Icon(
+                imageVector = Icons.Filled.Error,
+                contentDescription = null,
+                modifier = Modifier.size(48.dp)
+            )
+            Spacer(modifier = Modifier.width(16.dp))
+            Text(
+                text = stringResource(R.string.error_message),
+                style = MaterialTheme.typography.h6,
+            )
+        }
+    }
+}

app/src/main/res/values/strings.xml

@@ -8,4 +8,5 @@
     <string name="chat_light_theme_content_description">Light theme</string>
     <string name="chat_avatar_content_description">Avatar</string>
     <string name="chat_type_a_message_placeholder">Type a message</string>
+    <string name="error_message">An error occurred!</string>
 </resources>