Break down large composables in homescreen (#105)

While on that, also fixed flickering height of goal item list when opening search bar. --------- Signed-off-by: starry-shivam <[email protected]>
Pool-Of-Tears · Apr 24, 2024 · c38fe5f · c38fe5f
1 parent 80293d7
commit c38fe5f
Show file tree

Hide file tree

Showing 14 changed files with 482 additions and 5,195 deletions.
diff --git a/README.md b/README.md
@@ -13,7 +13,7 @@
   <img alt="GitHub" src="https://img.shields.io/github/license/Pool-Of-Tears/GreenStash">
   <img alt="GitHub code size in bytes" src="https://img.shields.io/github/languages/code-size/Pool-Of-Tears/GreenStash">
   <a href="https://www.repostatus.org/#active"><img src="https://www.repostatus.org/badges/latest/active.svg" alt="Project Status: Active – The project has reached a stable, usable state and is being actively developed." /></a>
-  <img alt="build-workflow"src="https://github.com/Pool-Of-Tears/GreenStash/actions/workflows/android.yml/badge.svg">
+  <img alt="build-workflow" src="https://github.com/Pool-Of-Tears/GreenStash/actions/workflows/android.yml/badge.svg">
 </p>
 
 ------
@@ -49,10 +49,10 @@
 <h2 align="center">Downloads</h2>
 
 <div align="center">
-<a href="https://play.google.com/store/apps/details?id=com.starry.greenstash"><img alt="Get it on Google Play" src="https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png" height="65"></img></a>
+<a href="https://play.google.com/store/apps/details?id=com.starry.greenstash"><img alt="Get it on Google Play" src="https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png" height="65"></a>
 <a href='https://f-droid.org/packages/com.starry.greenstash/'><img alt='Get it on F-Droid' src='https://fdroid.gitlab.io/artwork/badge/get-it-on.png' height='65'/></a>
 <a href='https://apt.izzysoft.de/fdroid/index/apk/com.starry.greenstash'><img alt='Get it on IzzyOnDroid' src='https://gitlab.com/IzzyOnDroid/repo/-/raw/master/assets/IzzyOnDroid.png' height='65'/></a>
-<a href="https://github.com/Pool-Of-Tears/GreenStash/releases/latest"><img alt="Get it on GitHub" src="https://github.com/machiav3lli/oandbackupx/blob/034b226cea5c1b30eb4f6a6f313e4dadcbb0ece4/badge_github.png" height="65"></img></a>
+<a href="https://github.com/Pool-Of-Tears/GreenStash/releases/latest"><img alt="Get it on GitHub" src="https://github.com/machiav3lli/oandbackupx/blob/034b226cea5c1b30eb4f6a6f313e4dadcbb0ece4/badge_github.png" height="65"></a>
 </div>
 
 ------
@@ -93,6 +93,7 @@ It is easiest to make a translation using the Android Studio XML editor, but you
   - [ViewModel](https://developer.android.com/topic/libraries/architecture/viewmodel) - Stores UI-related data that isn't destroyed on UI changes.
 - [Lottie](https://airbnb.design/lottie) - Lottie is an Android, iOS and React Native library that renders After Effects animations in real time.
 - [Coil](https://coil-kt.github.io/coil/compose) - An image loading library for Android backed by Kotlin Coroutines.
+- [Gson](https://github.com/google/gson) - A Java serialization/deserialization library to convert Java Objects into JSON and back.
 - [Dagger-Hilt](https://dagger.dev/hilt) For [Dependency injection (DI)](https://developer.android.com/training/dependency-injection)
 - [Room database](https://developer.android.com/jetpack/androidx/releases/room) - Persistence library provides an abstraction layer over SQLite to allow for more robust database access while harnessing the full power of SQLite.
 

diff --git a/app/src/main/java/com/starry/greenstash/backup/BackupManager.kt b/app/src/main/java/com/starry/greenstash/backup/BackupManager.kt
@@ -104,7 +104,7 @@ class BackupManager(private val context: Context, private val goalDao: GoalDao)
         )
 
         log("Creating backup json file inside cache directory...")
-        val fileName = "Greenstash-Backup (${LocalDateTime.now()}).json"
+        val fileName = "GreenStash-Backup (${LocalDateTime.now()}).json"
         val file = File(context.cacheDir, fileName)
         file.updateText(jsonString)
         val uri = FileProvider.getUriForFile(context, FILE_PROVIDER_AUTHORITY, file)

diff --git a/app/src/main/java/com/starry/greenstash/ui/screens/dwscreen/composables/DWScreen.kt b/app/src/main/java/com/starry/greenstash/ui/screens/dwscreen/composables/DWScreen.kt
@@ -161,90 +161,25 @@ fun DWScreen(goalId: String, transactionTypeName: String, navController: NavCont
                     .verticalScroll(rememberScrollState(), reverseScrolling = true),
                 horizontalAlignment = Alignment.CenterHorizontally,
             ) {
-                val compositionResult: LottieCompositionResult = rememberLottieComposition(
-                    spec = LottieCompositionSpec.RawRes(
-                        if (transactionType == TransactionType.Deposit) R.raw.dw_deposit_lottie
-                        else R.raw.dw_withdraw_lottie
-                    )
-                )
-                val progressAnimation by animateLottieCompositionAsState(
-                    compositionResult.value,
-                    isPlaying = true,
-                    iterations = 1,
-                    speed = 1f
-                )
-
-                LottieAnimation(
-                    composition = compositionResult.value,
-                    progress = { progressAnimation },
-                    modifier = Modifier
-                        .size(280.dp)
-                        .padding(top = 28.dp),
-                    enableMergePaths = true
-                )
+                // Deposit or Withdraw animation
+                MainDWAnimation(transactionType)
 
                 DateTimeCard(
                     selectedDateTime = selectedDateTime.value,
                     dateTimeStyle = { viewModel.getDateStyle() },
                     onClick = { dateTimeDialogState.show() }
                 )
 
-                OutlinedTextField(
-                    value = viewModel.state.amount,
-                    onValueChange = { newText ->
+                DWInputFields(
+                    amountValue = viewModel.state.amount,
+                    notesValue = viewModel.state.notes,
+                    onAmountChange = { amount ->
                         viewModel.state =
-                            viewModel.state.copy(amount = Utils.getValidatedNumber(newText))
-                    },
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .padding(horizontal = 18.dp, vertical = 4.dp),
-                    label = {
-                        Text(
-                            text = stringResource(id = R.string.transaction_amount),
-                            fontFamily = greenstashFont
-                        )
-                    },
-                    leadingIcon = {
-                        Icon(
-                            imageVector = ImageVector.vectorResource(id = R.drawable.ic_input_amount),
-                            contentDescription = null
-                        )
+                            viewModel.state.copy(amount = Utils.getValidatedNumber(amount))
                     },
-                    colors = OutlinedTextFieldDefaults.colors(
-                        focusedBorderColor = MaterialTheme.colorScheme.primary,
-                        unfocusedBorderColor = MaterialTheme.colorScheme.onBackground,
-                    ),
-                    shape = RoundedCornerShape(14.dp),
-                    singleLine = true,
-                    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
-                )
-
-                OutlinedTextField(
-                    value = viewModel.state.notes,
-                    onValueChange = { newText ->
-                        viewModel.state = viewModel.state.copy(notes = newText)
-                    },
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .padding(horizontal = 18.dp, vertical = 2.dp),
-                    label = {
-                        Text(
-                            text = stringResource(id = R.string.input_additional_notes),
-                            fontFamily = greenstashFont
-                        )
-                    },
-                    leadingIcon = {
-                        Icon(
-                            imageVector = ImageVector.vectorResource(id = R.drawable.ic_input_additional_notes),
-                            contentDescription = null
-                        )
-                    },
-                    colors = OutlinedTextFieldDefaults.colors(
-                        focusedBorderColor = MaterialTheme.colorScheme.primary,
-                        unfocusedBorderColor = MaterialTheme.colorScheme.onBackground,
-                    ),
-                    shape = RoundedCornerShape(14.dp),
-                    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text),
+                    onNotesChange = { notes ->
+                        viewModel.state = viewModel.state.copy(notes = notes)
+                    }
                 )
 
                 Button(
@@ -325,6 +260,105 @@ fun DWScreen(goalId: String, transactionTypeName: String, navController: NavCont
 }
 
 
+@Composable
+private fun MainDWAnimation(transactionType: TransactionType) {
+    val compositionResult: LottieCompositionResult = rememberLottieComposition(
+        spec = LottieCompositionSpec.RawRes(
+            if (transactionType == TransactionType.Deposit) R.raw.dw_deposit_lottie
+            else R.raw.dw_withdraw_lottie
+        )
+    )
+    val progressAnimation by animateLottieCompositionAsState(
+        compositionResult.value,
+        isPlaying = true,
+        iterations = 1,
+        speed = 1f
+    )
+
+    LottieAnimation(
+        composition = compositionResult.value,
+        progress = { progressAnimation },
+        modifier = Modifier
+            .size(280.dp)
+            .padding(top = 28.dp),
+        enableMergePaths = true
+    )
+}
+
+@Composable
+private fun DWInputFields(
+    amountValue: String,
+    notesValue: String,
+    onAmountChange: (String) -> Unit,
+    onNotesChange: (String) -> Unit
+) {
+    OutlinedTextField(
+        value = amountValue,
+        onValueChange = { newText -> onAmountChange(newText) },
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = 18.dp, vertical = 4.dp),
+        label = {
+            Text(
+                text = stringResource(id = R.string.transaction_amount),
+                fontFamily = greenstashFont
+            )
+        },
+        leadingIcon = {
+            Icon(
+                imageVector = ImageVector.vectorResource(id = R.drawable.ic_input_amount),
+                contentDescription = null
+            )
+        },
+        colors = OutlinedTextFieldDefaults.colors(
+            focusedBorderColor = MaterialTheme.colorScheme.primary,
+            unfocusedBorderColor = MaterialTheme.colorScheme.onBackground,
+            focusedContainerColor = MaterialTheme.colorScheme.primaryContainer.copy(
+                alpha = 0.25f
+            ),
+            unfocusedContainerColor = MaterialTheme.colorScheme.primaryContainer.copy(
+                alpha = 0.25f
+            ),
+        ),
+        shape = RoundedCornerShape(14.dp),
+        singleLine = true,
+        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
+    )
+
+    OutlinedTextField(
+        value = notesValue,
+        onValueChange = { newText -> onNotesChange(newText) },
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = 18.dp, vertical = 2.dp),
+        label = {
+            Text(
+                text = stringResource(id = R.string.input_additional_notes),
+                fontFamily = greenstashFont
+            )
+        },
+        leadingIcon = {
+            Icon(
+                imageVector = ImageVector.vectorResource(id = R.drawable.ic_input_additional_notes),
+                contentDescription = null
+            )
+        },
+        colors = OutlinedTextFieldDefaults.colors(
+            focusedBorderColor = MaterialTheme.colorScheme.primary,
+            unfocusedBorderColor = MaterialTheme.colorScheme.onBackground,
+            focusedContainerColor = MaterialTheme.colorScheme.primaryContainer.copy(
+                alpha = 0.25f
+            ),
+            unfocusedContainerColor = MaterialTheme.colorScheme.primaryContainer.copy(
+                alpha = 0.25f
+            ),
+        ),
+        shape = RoundedCornerShape(14.dp),
+        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text),
+    )
+
+}
+
 @Composable
 private fun TransactionAddedAnimation(transactionType: TransactionType) {
     Column(

diff --git a/app/src/main/java/com/starry/greenstash/ui/screens/home/composables/HomeAppBars.kt b/app/src/main/java/com/starry/greenstash/ui/screens/home/composables/HomeAppBars.kt
@@ -28,8 +28,9 @@ package com.starry.greenstash.ui.screens.home.composables
 import androidx.compose.animation.Crossfade
 import androidx.compose.animation.core.tween
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material.icons.Icons
@@ -40,9 +41,9 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
-import androidx.compose.material3.TextField
 import androidx.compose.material3.TextFieldDefaults
 import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
@@ -147,17 +148,15 @@ private fun SearchAppBar(
     onSearchClicked: (String) -> Unit,
 ) {
     Surface(
-        modifier = Modifier
-            .fillMaxWidth()
-            .height(56.dp),
+        modifier = Modifier.fillMaxWidth(),
         color = MaterialTheme.colorScheme.surface
     ) {
-        TextField(modifier = Modifier
-            .fillMaxWidth(),
+        OutlinedTextField(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 14.dp, vertical = 4.dp),
             value = text,
-            onValueChange = {
-                onTextChange(it)
-            },
+            onValueChange = { onTextChange(it) },
             placeholder = {
                 Text(
                     text = stringResource(id = R.string.home_search_label),
@@ -204,9 +203,10 @@ private fun SearchAppBar(
             ),
             colors = TextFieldDefaults.colors(
                 focusedContainerColor = Color.Transparent,
-                unfocusedContainerColor = Color.Transparent,
+                unfocusedContainerColor = MaterialTheme.colorScheme.primaryContainer.copy(0.3f),
                 disabledContainerColor = Color.Transparent,
                 cursorColor = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.8f),
-            ))
+            ),
+            shape = RoundedCornerShape(24.dp))
     }
 }