Updating the transaction list screen with state and item types

core/designsystem/build.gradle.kts

@@ -23,6 +23,7 @@ dependencies {
     api(libs.androidx.compose.material3)
     api(libs.androidx.compose.runtime)
     api(libs.androidx.compose.runtime.livedata)
+    api(libs.androidx.compose.runtime.tracing)
     api(libs.androidx.compose.ui.tooling.preview)
     api(libs.androidx.compose.ui.util)
     api(libs.androidx.metrics)

core/designsystem/src/main/kotlin/com/naveenapps/expensemanager/core/designsystem/ui/components/IconAndBackgroundView.kt

@@ -11,8 +11,9 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
@@ -76,7 +77,7 @@ private fun IconView(
             modifier = Modifier
                 .size(iconSize)
                 .align(Alignment.Center),
-            painter = painterResource(id = context.getDrawable(icon)),
+            imageVector = ImageVector.vectorResource(id = context.getDrawable(icon)),
             colorFilter = ColorFilter.tint(color = Color.White),
             contentDescription = name,
         )

core/domain/src/main/kotlin/com/naveenapps/expensemanager/core/domain/usecase/budget/GetBudgetsUseCase.kt

@@ -1,6 +1,7 @@
 package com.naveenapps.expensemanager.core.domain.usecase.budget
 
 import com.naveenapps.expensemanager.core.common.R
+import com.naveenapps.expensemanager.core.common.utils.AppCoroutineDispatchers
 import com.naveenapps.expensemanager.core.domain.usecase.settings.currency.GetCurrencyUseCase
 import com.naveenapps.expensemanager.core.domain.usecase.settings.currency.GetFormattedAmountUseCase
 import com.naveenapps.expensemanager.core.domain.usecase.transaction.GetTransactionWithFilterUseCase
@@ -13,6 +14,7 @@ import com.naveenapps.expensemanager.core.model.toTransactionUIModel
 import com.naveenapps.expensemanager.core.repository.BudgetRepository
 import kotlinx.coroutines.flow.Flow
 import kotlinx.coroutines.flow.combine
+import kotlinx.coroutines.flow.flowOn
 import javax.inject.Inject
 
 class GetBudgetsUseCase @Inject constructor(
@@ -21,6 +23,7 @@ class GetBudgetsUseCase @Inject constructor(
     private val getCurrencyUseCase: GetCurrencyUseCase,
     private val getFormattedAmountUseCase: GetFormattedAmountUseCase,
     private val getBudgetTransactionsUseCase: GetBudgetTransactionsUseCase,
+    private val appCoroutineDispatchers: AppCoroutineDispatchers
 ) {
     operator fun invoke(): Flow<List<BudgetUiModel>> {
         return combine(
@@ -53,7 +56,7 @@ class GetBudgetsUseCase @Inject constructor(
                     },
                 )
             }
-        }
+        }.flowOn(appCoroutineDispatchers.computation)
     }
 }
 

feature/category/src/main/kotlin/com/naveenapps/expensemanager/feature/category/details/CategoryDetailScreen.kt

@@ -10,6 +10,8 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Add
 import androidx.compose.material.icons.filled.Close
@@ -129,8 +131,8 @@ fun CategoryDetailScreen(
                     textAlign = TextAlign.Center,
                 )
             } else {
-                Column(modifier = Modifier.padding(top = 16.dp)) {
-                    state.transactions.forEach { item ->
+                LazyColumn(modifier = Modifier.padding(top = 16.dp)) {
+                    items(state.transactions, key = { it.id }) { item ->
                         TransactionItem(
                             categoryName = item.categoryName,
                             fromAccountName = item.fromAccountName,
@@ -151,11 +153,14 @@ fun CategoryDetailScreen(
                             transactionType = item.transactionType,
                         )
                     }
-                    Spacer(
-                        modifier = Modifier
-                            .fillMaxWidth()
-                            .padding(36.dp),
-                    )
+
+                    item {
+                        Spacer(
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .padding(36.dp),
+                        )
+                    }
                 }
             }
         }

feature/category/src/main/kotlin/com/naveenapps/expensemanager/feature/category/list/CategoryListScreen.kt

@@ -101,7 +101,7 @@ private fun CategoryListScreenContentView(
                 .fillMaxSize(),
         ) {
             PrimaryTabRow(selectedTabIndex = state.selectedTab.index) {
-                CategoryTabItems.entries.forEach { item ->
+                state.tabs.forEach { item ->
                     Tab(
                         selected = state.selectedTab.categoryType == item.categoryType,
                         onClick = {

feature/transaction/src/main/kotlin/com/naveenapps/expensemanager/feature/transaction/list/TransactionListScreen.kt

@@ -36,14 +36,13 @@ import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
-import com.naveenapps.expensemanager.core.common.utils.UiState
 import com.naveenapps.expensemanager.core.common.utils.fromCompleteDate
 import com.naveenapps.expensemanager.core.common.utils.toCompleteDateWithDate
 import com.naveenapps.expensemanager.core.common.utils.toDate
 import com.naveenapps.expensemanager.core.common.utils.toDay
 import com.naveenapps.expensemanager.core.common.utils.toMonthYear
+import com.naveenapps.expensemanager.core.designsystem.AppPreviewsLightAndDarkMode
 import com.naveenapps.expensemanager.core.designsystem.components.EmptyItem
-import com.naveenapps.expensemanager.core.designsystem.components.LoadingItem
 import com.naveenapps.expensemanager.core.designsystem.ui.components.IconAndBackgroundView
 import com.naveenapps.expensemanager.core.designsystem.ui.components.TopNavigationBar
 import com.naveenapps.expensemanager.core.designsystem.ui.extensions.getDrawable
@@ -64,7 +63,7 @@ fun TransactionListScreen(
     viewModel: TransactionListViewModel = hiltViewModel()
 ) {
 
-    val transactionUiState by viewModel.transactions.collectAsState()
+    val state by viewModel.state.collectAsState()
 
     Scaffold(
         topBar = {
@@ -87,7 +86,7 @@ fun TransactionListScreen(
             modifier = Modifier
                 .fillMaxSize()
                 .padding(top = innerPadding.calculateTopPadding()),
-            transactionGroup = transactionUiState,
+            state = state,
         ) { transaction ->
             viewModel.openCreateScreen(transaction.id)
         }
@@ -96,84 +95,79 @@ fun TransactionListScreen(
 
 @Composable
 private fun TransactionListScreen(
-    transactionGroup: UiState<List<TransactionGroup>>,
+    state: TransactionListState,
     modifier: Modifier = Modifier,
     onItemClick: ((TransactionUiItem) -> Unit)? = null,
 ) {
-    Column(modifier = modifier) {
-        FilterView(
-            modifier = Modifier
-                .fillMaxWidth()
-                .padding(end = 6.dp),
-        )
 
-        when (transactionGroup) {
-            UiState.Empty -> {
+    LazyColumn(modifier = modifier.fillMaxWidth()) {
+        item {
+            FilterView(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(end = 6.dp),
+            )
+        }
+        if (state.transactionListItem.isEmpty()) {
+            item {
                 EmptyItem(
-                    modifier = Modifier.fillMaxSize(),
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .height(400.dp),
                     emptyItemText = stringResource(id = R.string.no_transactions_available),
                     icon = com.naveenapps.expensemanager.core.designsystem.R.drawable.ic_no_transaction
                 )
             }
+        } else {
 
-            UiState.Loading -> {
-                LoadingItem()
-            }
+            items(state.transactionListItem) { transactionListItem ->
+                when (transactionListItem) {
+                    TransactionListItem.Divider -> {
+                        HorizontalDivider(
+                            modifier = Modifier.padding(
+                                top = 8.dp,
+                                bottom = 8.dp
+                            )
+                        )
+                    }
 
-            is UiState.Success -> {
-                LazyColumn {
-                    items(transactionGroup.data) {
-                        TransactionGroupItem(
-                            it,
-                            onItemClick,
+                    is TransactionListItem.HeaderItem -> {
+                        TransactionHeaderItem(
+                            transactionListItem.date,
+                            transactionListItem.amountTextColor,
+                            transactionListItem.totalAmount,
                         )
                     }
-                    item {
-                        Spacer(modifier = Modifier.height(48.dp))
+
+                    is TransactionListItem.TransactionItem -> {
+                        val item = transactionListItem.date
+                        TransactionItem(
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .clickable {
+                                    onItemClick?.invoke(item)
+                                }
+                                .then(ItemSpecModifier),
+                            categoryName = item.categoryName,
+                            categoryColor = item.categoryIcon.backgroundColor,
+                            categoryIcon = item.categoryIcon.name,
+                            amount = item.amount,
+                            date = item.date,
+                            notes = item.notes,
+                            transactionType = item.transactionType,
+                            fromAccountName = item.fromAccountName,
+                            fromAccountIcon = item.fromAccountIcon.name,
+                            fromAccountColor = item.fromAccountIcon.backgroundColor,
+                            toAccountName = item.toAccountName,
+                            toAccountIcon = item.toAccountIcon?.name,
+                            toAccountColor = item.toAccountIcon?.backgroundColor,
+                        )
                     }
                 }
             }
-        }
-    }
-}
-
-@Composable
-fun TransactionGroupItem(
-    transactionGroup: TransactionGroup,
-    onItemClick: ((TransactionUiItem) -> Unit)?,
-    isLastItem: Boolean = false,
-) {
-    Column {
-        TransactionHeaderItem(
-            transactionGroup.date,
-            transactionGroup.amountTextColor,
-            transactionGroup.totalAmount,
-        )
-        transactionGroup.transactions.forEach {
-            TransactionItem(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .clickable {
-                        onItemClick?.invoke(it)
-                    }
-                    .then(ItemSpecModifier),
-                categoryName = it.categoryName,
-                categoryColor = it.categoryIcon.backgroundColor,
-                categoryIcon = it.categoryIcon.name,
-                amount = it.amount,
-                date = it.date,
-                notes = it.notes,
-                transactionType = it.transactionType,
-                fromAccountName = it.fromAccountName,
-                fromAccountIcon = it.fromAccountIcon.name,
-                fromAccountColor = it.fromAccountIcon.backgroundColor,
-                toAccountName = it.toAccountName,
-                toAccountIcon = it.toAccountIcon?.name,
-                toAccountColor = it.toAccountIcon?.backgroundColor,
-            )
-        }
-        if (isLastItem.not()) {
-            HorizontalDivider(modifier = Modifier.padding(top = 8.dp, bottom = 8.dp))
+            item {
+                Spacer(modifier = Modifier.height(48.dp))
+            }
         }
     }
 }
@@ -182,7 +176,7 @@ fun TransactionGroupItem(
 fun TransactionHeaderItem(
     date: String,
     textColor: Int,
-    totalAmount: Amount,
+    totalAmount: String,
 ) {
     Row(
         modifier = Modifier
@@ -214,7 +208,7 @@ fun TransactionHeaderItem(
             modifier = Modifier
                 .padding(start = 16.dp)
                 .align(Alignment.CenterVertically),
-            text = totalAmount.amountString ?: "",
+            text = totalAmount,
             color = colorResource(id = textColor),
             style = MaterialTheme.typography.titleMedium,
         )
@@ -350,7 +344,7 @@ private fun AccountNameWithIcon(
     }
 }
 
-@com.naveenapps.expensemanager.core.designsystem.AppPreviewsLightAndDarkMode
+@AppPreviewsLightAndDarkMode
 @Composable
 fun TransactionUiStatePreview() {
     ExpenseManagerTheme {
@@ -371,34 +365,12 @@ fun TransactionUiStatePreview() {
     }
 }
 
-@Preview
-@Composable
-fun TransactionItemPreview() {
-    ExpenseManagerTheme {
-        TransactionGroupItem(
-            getTransactionUiState(),
-            {},
-        )
-    }
-}
-
-@Preview
-@Composable
-fun TransactionListItemLoadingStatePreview() {
-    ExpenseManagerTheme {
-        TransactionListScreen(
-            transactionGroup = UiState.Loading,
-            modifier = Modifier.fillMaxSize(),
-        )
-    }
-}
-
 @Preview
 @Composable
 fun TransactionListItemEmptyStatePreview() {
     ExpenseManagerTheme {
         TransactionListScreen(
-            transactionGroup = UiState.Success(emptyList()),
+            state = TransactionListState(emptyList()),
             modifier = Modifier.fillMaxSize(),
         )
     }
@@ -439,14 +411,12 @@ private fun getTransactionUiState() = TransactionGroup(
     },
 )
 
-@Preview
+@AppPreviewsLightAndDarkMode
 @Composable
 fun TransactionListItemSuccessStatePreview() {
     ExpenseManagerTheme {
         TransactionListScreen(
-            transactionGroup = UiState.Success(
-                DUMMY_DATA,
-            ),
+            state = TransactionListState(DUMMY_DATA.convertGroupToTransactionListItems()),
             modifier = Modifier.fillMaxSize(),
         )
     }

feature/transaction/src/main/kotlin/com/naveenapps/expensemanager/feature/transaction/list/TransactionListState.kt

@@ -0,0 +1,5 @@
+package com.naveenapps.expensemanager.feature.transaction.list
+
+data class TransactionListState(
+    val transactionListItem: List<TransactionListItem>
+)