Add loading, empty data message and include state

jeluchu · Oct 24, 2023 · c107408 · c107408
1 parent 1158ffa
commit c107408
Show file tree

Hide file tree

Showing 8 changed files with 131 additions and 259 deletions.
diff --git a/app/src/main/java/com/jeluchu/wastickersonline/core/ui/composables/EmptyInfo.kt b/app/src/main/java/com/jeluchu/wastickersonline/core/ui/composables/EmptyInfo.kt
@@ -0,0 +1,45 @@
+package com.jeluchu.wastickersonline.core.ui.composables
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.jeluchu.jchucomponents.ktx.compose.toStringRes
+import com.jeluchu.wastickersonline.R
+import com.jeluchu.wastickersonline.core.ui.theme.darkness
+
+@Composable
+fun EmptyInfo() = Box(modifier = Modifier.fillMaxSize()) {
+    Column(
+        modifier = Modifier
+            .align(Alignment.Center)
+            .padding(horizontal = 50.dp),
+        verticalArrangement = Arrangement.spacedBy(5.dp)
+    ) {
+        Text(
+            modifier = Modifier.fillMaxWidth(),
+            text = R.string.emptyInfoTitle.toStringRes(),
+            textAlign =  TextAlign.Center,
+            fontWeight = FontWeight.Bold,
+            fontSize = 24.sp,
+            color = darkness
+        )
+        Text(
+            text = R.string.emptyInfoDescription.toStringRes(),
+            color = darkness.copy(.6f),
+            textAlign =  TextAlign.Center,
+            lineHeight = 20.sp,
+            fontSize = 16.sp
+        )
+    }
+}
diff --git a/app/src/main/java/com/jeluchu/wastickersonline/features/sticker/view/DashboardView.kt b/app/src/main/java/com/jeluchu/wastickersonline/features/sticker/view/DashboardView.kt
@@ -7,14 +7,11 @@ import androidx.compose.animation.expandVertically
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.animation.shrinkVertically
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.lazy.items
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Close
 import androidx.compose.material.icons.filled.Search
@@ -23,7 +20,6 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.Scaffold
-import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextFieldDefaults
 import androidx.compose.material3.TopAppBarDefaults
@@ -33,13 +29,11 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.input.nestedscroll.NestedScrollConnection
 import androidx.compose.ui.input.nestedscroll.NestedScrollSource
 import androidx.compose.ui.input.nestedscroll.nestedScroll
-import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.platform.UriHandler
@@ -54,25 +48,21 @@ import com.jeluchu.jchucomponents.ktx.compose.toImageVector
 import com.jeluchu.jchucomponents.ktx.compose.toStringRes
 import com.jeluchu.jchucomponents.ktx.strings.empty
 import com.jeluchu.jchucomponents.ui.accompanist.systemui.SystemStatusBarColors
-import com.jeluchu.jchucomponents.ui.animations.lists.Animations
-import com.jeluchu.jchucomponents.ui.animations.lists.animateItem
 import com.jeluchu.jchucomponents.ui.composables.button.FloatingButton
 import com.jeluchu.jchucomponents.ui.composables.button.FloatingButtonSettings
 import com.jeluchu.jchucomponents.ui.composables.column.ScrollableColumn
-import com.jeluchu.jchucomponents.ui.composables.images.NetworkImage
+import com.jeluchu.jchucomponents.ui.composables.loaders.CircularLoading
 import com.jeluchu.jchucomponents.ui.extensions.modifier.cornerRadius
-import com.jeluchu.jchucomponents.ui.extensions.modifier.noRippleClickable
 import com.jeluchu.jchucomponents.ui.foundation.icon.IconLink
-import com.jeluchu.jchucomponents.ui.foundation.lists.ListRow
 import com.jeluchu.jchucomponents.ui.runtime.remember.rememberMutableStateOf
 import com.jeluchu.wastickersonline.R
 import com.jeluchu.wastickersonline.core.extensions.search
+import com.jeluchu.wastickersonline.core.ui.composables.EmptyInfo
 import com.jeluchu.wastickersonline.core.ui.composables.SearchTextField
 import com.jeluchu.wastickersonline.core.ui.theme.darkGreen
 import com.jeluchu.wastickersonline.core.ui.theme.darkness
 import com.jeluchu.wastickersonline.core.ui.theme.milky
 import com.jeluchu.wastickersonline.core.ui.theme.primary
-import com.jeluchu.wastickersonline.core.ui.theme.secondary
 import com.jeluchu.wastickersonline.features.sticker.models.StickerPack
 import com.jeluchu.wastickersonline.features.sticker.viewmodel.StickersViewModel
 
@@ -109,6 +99,7 @@ private fun DashboardView(
     onRateClick: () -> Unit,
 ) {
     val search = rememberMutableStateOf(String.empty())
+    val stickers = state.data.search(query = search.value, param = { it.name })
     var isSearchActive by rememberMutableStateOf(false)
     val isVisible = rememberMutableStateOf(true)
     val nestedScrollConnection = remember {
@@ -158,7 +149,7 @@ private fun DashboardView(
             FloatingButton(
                 isVisible = isVisible.value,
                 floatButton = FloatingButtonSettings(
-                    icon = R.drawable.ic_deco_search,
+                    icon = if (isSearchActive) R.drawable.ic_deco_close else R.drawable.ic_deco_search,
                     tint = milky,
                     background = darkGreen
                 ),
@@ -211,7 +202,7 @@ private fun DashboardView(
                             focusedSupportingTextColor = milky,
                             unfocusedSupportingTextColor = milky,
                             disabledSupportingTextColor = milky,
-                            errorSupportingTextColor= milky,
+                            errorSupportingTextColor = milky,
                             focusedContainerColor = darkness.copy(.6f),
                             unfocusedContainerColor = darkness.copy(.6f),
                             focusedIndicatorColor = Color.Transparent,
@@ -249,45 +240,20 @@ private fun DashboardView(
                 }
             }
 
-            ScrollableColumn {
-                state.data.search(query = search.value, param = { it.name }).forEach {
-                    Column(
-                        modifier = Modifier.noRippleClickable { onStickerClick(it) }
-                    ) {
-                        Surface(
-                            modifier = Modifier.padding(horizontal = 15.dp),
-                            shape = 10.cornerRadius(),
-                            color = darkGreen.copy(.2f),
-                            contentColor = darkness.copy(.7f)
-                        ) {
-                            Text(
-                                modifier = Modifier.padding(5.dp),
-                                text = it.name,
-                                fontWeight = FontWeight.Bold
+            when {
+                state.isLoading -> CircularLoading(isShow = true, colorLoading = darkness)
+                stickers.isEmpty() && !state.isLoading -> EmptyInfo()
+                else -> {
+                    ScrollableColumn {
+                        stickers.forEach { pack ->
+                            StickerPackItem(
+                                stickerPack = pack,
+                                onClick = onStickerClick
                             )
                         }
-
-                        ListRow(
-                            contentPadding = PaddingValues(15.dp),
-                            horizontalArrangement = Arrangement.spacedBy(5.dp),
-                        ) {
-                            items(it.stickers, key = { it }) { sticker ->
-                                NetworkImage(
-                                    modifier = Modifier
-                                        .size(90.dp)
-                                        .animateItem(Animations.Scale)
-                                        .clip(10.cornerRadius())
-                                        .background(secondary),
-                                    url = sticker.imageFile,
-                                    contentScale = ContentScale.FillBounds
-                                )
-                            }
-                        }
                     }
                 }
             }
         }
-
-
     }
 }
diff --git a/app/src/main/java/com/jeluchu/wastickersonline/features/sticker/view/StickerPackItem.kt b/app/src/main/java/com/jeluchu/wastickersonline/features/sticker/view/StickerPackItem.kt
@@ -0,0 +1,65 @@
+package com.jeluchu.wastickersonline.features.sticker.view
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.lazy.items
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import com.jeluchu.jchucomponents.ui.animations.lists.Animations
+import com.jeluchu.jchucomponents.ui.animations.lists.animateItem
+import com.jeluchu.jchucomponents.ui.composables.images.NetworkImage
+import com.jeluchu.jchucomponents.ui.extensions.modifier.cornerRadius
+import com.jeluchu.jchucomponents.ui.extensions.modifier.noRippleClickable
+import com.jeluchu.jchucomponents.ui.foundation.lists.ListRow
+import com.jeluchu.wastickersonline.core.ui.theme.darkGreen
+import com.jeluchu.wastickersonline.core.ui.theme.darkness
+import com.jeluchu.wastickersonline.core.ui.theme.secondary
+import com.jeluchu.wastickersonline.features.sticker.models.StickerPack
+
+@Composable
+fun StickerPackItem(
+    stickerPack: StickerPack,
+    onClick: (StickerPack) -> Unit
+) = Column(
+    modifier = Modifier.noRippleClickable { onClick(stickerPack) }
+) {
+    Surface(
+        modifier = Modifier.padding(horizontal = 15.dp),
+        shape = 10.cornerRadius(),
+        color = darkGreen.copy(.2f),
+        contentColor = darkness.copy(.7f)
+    ) {
+        Text(
+            modifier = Modifier.padding(5.dp),
+            text = stickerPack.name,
+            fontWeight = FontWeight.Bold
+        )
+    }
+
+    ListRow(
+        contentPadding = PaddingValues(15.dp),
+        horizontalArrangement = Arrangement.spacedBy(5.dp),
+    ) {
+        items(stickerPack.stickers, key = { it }) { sticker ->
+            NetworkImage(
+                modifier = Modifier
+                    .size(90.dp)
+                    .animateItem(Animations.Scale)
+                    .clip(10.cornerRadius())
+                    .background(secondary),
+                url = sticker.imageFile,
+                contentScale = ContentScale.FillBounds
+            )
+        }
+    }
+}
diff --git a/app/src/main/res/drawable/ic_deco_close.xml b/app/src/main/res/drawable/ic_deco_close.xml
@@ -0,0 +1,5 @@
+<vector android:height="24dp" android:viewportHeight="320.59"
+    android:viewportWidth="320.59" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#FF000000" android:pathData="m30.39,318.58c-7.86,0.46 -15.59,-2.16 -21.56,-7.29 -11.77,-11.84 -11.77,-30.97 0,-42.82l257.81,-257.81c12.25,-11.46 31.46,-10.82 42.92,1.42 10.36,11.07 10.97,28.09 1.41,39.88l-259.33,259.33c-5.89,5.06 -13.5,7.67 -21.26,7.29z"/>
+    <path android:fillColor="#FF000000" android:pathData="m287.9,318.58c-7.97,-0.03 -15.6,-3.2 -21.26,-8.81l-257.81,-257.81c-10.91,-12.74 -9.43,-31.91 3.31,-42.82 11.37,-9.74 28.14,-9.74 39.5,0l259.33,257.81c12.24,11.46 12.88,30.68 1.41,42.92 -0.46,0.49 -0.93,0.96 -1.41,1.41 -6.35,5.52 -14.71,8.16 -23.08,7.29z"/>
+</vector>