Break down composables in Deposit/Withdraw screen

Signed-off-by: starry-shivam <[email protected]>
Pool-Of-Tears · Apr 24, 2024 · a84791f · a84791f
1 parent 29e389c
commit a84791f
Show file tree

Hide file tree

Showing 2 changed files with 113 additions and 78 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/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(