Fix empty view show logic in paging sample

ImaginativeShohag · Jul 1, 2023 · 7dc18e2 · 7dc18e2
1 parent d50b79d
commit 7dc18e2
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 12 deletions.
diff --git a/...iveworld/whynotcompose/ui/screens/tutorial/datafetchandpaging/DataFetchAndPagingScreen.kt b/...iveworld/whynotcompose/ui/screens/tutorial/datafetchandpaging/DataFetchAndPagingScreen.kt
@@ -33,6 +33,7 @@ import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -47,7 +48,9 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.Button
 import androidx.compose.material.Card
 import androidx.compose.material.Colors
@@ -66,6 +69,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.graphics.Color
@@ -151,7 +155,8 @@ fun DataFetchAndPagingScreenSkeletonPreview() {
                         MockData.dummyGithubRepo
                     )
                 )
-            ).collectAsLazyPagingItems()
+            ).collectAsLazyPagingItems(),
+            searchTFV = remember { mutableStateOf(TextFieldValue("Lorem")) }
         )
     }
 }
@@ -173,7 +178,8 @@ fun DataFetchAndPagingScreenSkeletonPreviewDark() {
                         MockData.dummyGithubRepo
                     )
                 )
-            ).collectAsLazyPagingItems()
+            ).collectAsLazyPagingItems(),
+            searchTFV = remember { mutableStateOf(TextFieldValue("Lorem")) }
         )
     }
 }
@@ -183,7 +189,7 @@ fun DataFetchAndPagingScreenSkeleton(
     showLoadingView: Boolean = false,
     showMessage: Event<String>? = null,
     repos: LazyPagingItems<GithubRepo>,
-    searchTFV: MutableState<TextFieldValue> = remember { mutableStateOf(TextFieldValue()) },
+    searchTFV: MutableState<TextFieldValue>,
     openSearch: Boolean = false,
     goBack: () -> Unit = {},
     setOpenSearch: (Boolean) -> Unit = {},
@@ -249,11 +255,25 @@ fun DataFetchAndPagingScreenSkeleton(
                     contentAlignment = Alignment.Center
                 ) {
                     repos.apply {
-                        EmptyView(
-                            modifier = Modifier,
-                            loadState = loadState,
-                            itemCount = this.itemCount
-                        )
+                        Column(
+                            Modifier.verticalScroll(rememberScrollState())
+                        ) {
+                            EmptyView(
+                                modifier = Modifier,
+                                loadState = loadState,
+                                itemCount = repos.itemCount,
+                                title = if (searchTFV.value.text.isBlank()) {
+                                    "No search keyword!"
+                                } else {
+                                    "Nothing found!"
+                                },
+                                message = if (searchTFV.value.text.isBlank()) {
+                                    "Enter anything to the search field."
+                                } else {
+                                    "No repository found for \"${searchTFV.value.text}\"."
+                                }
+                            )
+                        }
                     }
 
                     LazyColumn(
@@ -354,18 +374,23 @@ fun DataFetchAndPagingScreenSkeleton(
 
                 Box(
                     Modifier
+                        .padding(horizontal = 8.dp)
                         .fillMaxWidth()
                         .height(56.dp)
+                        .shadow(
+                            elevation = 4.dp,
+                            shape = RoundedCornerShape(24.dp, 24.dp, 24.dp, 24.dp)
+                        )
                         .background(
-                            MaterialTheme.colors.primary,
+                            MaterialTheme.colors.surface,
                             RoundedCornerShape(24.dp, 24.dp, 24.dp, 24.dp)
                         )
                 ) {
                     val searchBackgroundColor by animateColorAsState(
                         targetValue = if (searchTFV.value.text.isBlank()) {
                             MaterialTheme.colors.searchErrorInputBackground
                         } else {
-                            MaterialTheme.colors.surface
+                            MaterialTheme.colors.background
                         }
                     )
 
@@ -376,6 +401,11 @@ fun DataFetchAndPagingScreenSkeleton(
                                 color = searchBackgroundColor,
                                 shape = RoundedCornerShape(20.dp)
                             )
+                            .border(
+                                width = 1.dp,
+                                color = MaterialTheme.colors.onSurface.copy(alpha = 0.05f),
+                                shape = RoundedCornerShape(20.dp)
+                            )
                     ) {
                         SearchTextInputField(
                             modifier = Modifier

diff --git a/...world/whynotcompose/ui/screens/tutorial/datafetchandpaging/DataFetchAndPagingViewModel.kt b/...world/whynotcompose/ui/screens/tutorial/datafetchandpaging/DataFetchAndPagingViewModel.kt
@@ -30,6 +30,8 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.ui.text.input.TextFieldValue
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
+import androidx.paging.LoadState
+import androidx.paging.LoadStates
 import androidx.paging.Pager
 import androidx.paging.PagingConfig
 import androidx.paging.PagingData
@@ -44,6 +46,7 @@ import kotlinx.coroutines.flow.StateFlow
 import kotlinx.coroutines.flow.catch
 import kotlinx.coroutines.flow.combine
 import kotlinx.coroutines.flow.emptyFlow
+import kotlinx.coroutines.flow.flowOf
 import kotlinx.coroutines.launch
 import org.imaginativeworld.whynotcompose.base.models.Event
 import org.imaginativeworld.whynotcompose.base.models.github.GithubRepo
@@ -146,7 +149,15 @@ class DataFetchAndPagingViewModel @Inject constructor(
         // --------------------------------
 
         if (query.isNullOrBlank()) {
-            _items.value = emptyFlow()
+            _items.value = flowOf(
+                PagingData.empty(
+                    sourceLoadStates = LoadStates(
+                        refresh = LoadState.NotLoading(true),
+                        prepend = LoadState.NotLoading(true),
+                        append = LoadState.NotLoading(true)
+                    )
+                )
+            )
 
             return
         }

diff --git a/...aginativeworld/whynotcompose/ui/screens/tutorial/datafetchandpaging/elements/EmptyView.kt b/...aginativeworld/whynotcompose/ui/screens/tutorial/datafetchandpaging/elements/EmptyView.kt
@@ -138,7 +138,7 @@ fun EmptyView(
         ) {
             Column(
                 Modifier
-                    .padding(start = 32.dp, end = 32.dp, bottom = 24.dp),
+                    .padding(start = 32.dp, top = 32.dp, end = 32.dp, bottom = 32.dp),
                 horizontalAlignment = Alignment.CenterHorizontally,
                 verticalArrangement = Arrangement.Center
             ) {