Skip to content

Commit

Permalink
[64] Most Expensive Categories Fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@TiagoDvl
TiagoDvl committed Sep 17, 2023
1 parent 891e50a commit 4eb4f39
Show file tree
Hide file tree
Showing 8 changed files with 146 additions and 70 deletions.
130 changes: 76 additions & 54 deletions ui/src/main/java/br/com/tick/ui/core/TeiraNavigationDrawer.kt
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@
package br.com.tick.ui.core

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.DismissibleDrawerSheet
import androidx.compose.material3.DismissibleNavigationDrawer
import androidx.compose.material3.DrawerState
Expand All @@ -13,13 +19,16 @@ import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import androidx.navigation.NavBackStackEntry
import br.com.tick.ui.NavigationItem
import br.com.tick.ui.R
import br.com.tick.ui.theme.spacing
import br.com.tick.ui.theme.textStyle
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.launch

Expand All @@ -31,7 +40,6 @@ fun TeiraNavigationDrawer(
navigateToRoute: (NavigationItem) -> Unit,
content: @Composable () -> Unit
) {
val coroutineScope = rememberCoroutineScope()

val currentRoute = navBackStackEntry?.destination?.route

Expand All @@ -42,60 +50,73 @@ fun TeiraNavigationDrawer(
drawerContainerColor = MaterialTheme.colorScheme.surface,
drawerContentColor = MaterialTheme.colorScheme.onSurface
) {
Spacer(modifier = Modifier.height(MaterialTheme.spacing.large))
TeiraNavigationDrawerItem(
drawerState = drawerState,
painter = painterResource(id = NavigationItem.Settings.iconResource),
text = stringResource(id = NavigationItem.Settings.titleResource),
coroutineScope = coroutineScope,
isCurrentRoute = currentRoute == NavigationItem.Settings.route
) {
navigateToRoute(NavigationItem.Settings)
}
TeiraNavigationDrawerItem(
drawerState = drawerState,
painter = painterResource(id = NavigationItem.Wallet.iconResource),
text = stringResource(id = NavigationItem.Wallet.titleResource),
coroutineScope = coroutineScope,
isCurrentRoute = currentRoute == NavigationItem.Wallet.route
Column(
modifier = Modifier.fillMaxSize().padding(MaterialTheme.spacing.large),
verticalArrangement = Arrangement.SpaceBetween
) {
navigateToRoute(NavigationItem.Wallet)
Column {
Text(
modifier = Modifier.padding(MaterialTheme.spacing.large),
text = stringResource(id = R.string.app_name),
style = MaterialTheme.textStyle.h1extra,
color = MaterialTheme.colorScheme.tertiary
)
Spacer(modifier = Modifier.height(MaterialTheme.spacing.large))
TeiraNavigationDrawerItem(
drawerState = drawerState,
painter = painterResource(id = NavigationItem.Settings.iconResource),
text = stringResource(id = NavigationItem.Settings.titleResource),
isCurrentRoute = currentRoute == NavigationItem.Settings.route
) {
navigateToRoute(NavigationItem.Settings)
}
TeiraNavigationDrawerItem(
drawerState = drawerState,
painter = painterResource(id = NavigationItem.Wallet.iconResource),
text = stringResource(id = NavigationItem.Wallet.titleResource),
isCurrentRoute = currentRoute == NavigationItem.Wallet.route
) {
navigateToRoute(NavigationItem.Wallet)
}
TeiraNavigationDrawerItem(
drawerState = drawerState,
painter = painterResource(id = NavigationItem.Analysis.iconResource),
text = stringResource(id = NavigationItem.Analysis.titleResource),
isCurrentRoute = currentRoute == NavigationItem.Analysis.route
) {
navigateToRoute(NavigationItem.Analysis)
}
Spacer(
modifier = Modifier
.padding(horizontal = MaterialTheme.spacing.medium, vertical = MaterialTheme.spacing.small)
.fillMaxWidth()
.height(0.5.dp)
.background(MaterialTheme.colorScheme.tertiary)
)
TeiraNavigationDrawerItem(
drawerState = drawerState,
painter = painterResource(id = NavigationItem.History.iconResource),
text = stringResource(id = NavigationItem.History.titleResource),
isCurrentRoute = currentRoute == NavigationItem.History.route
) {
navigateToRoute(NavigationItem.History)
}
TeiraNavigationDrawerItem(
drawerState = drawerState,
painter = painterResource(id = NavigationItem.Expense.iconResource),
text = stringResource(id = NavigationItem.Expense.titleResource),
isCurrentRoute = currentRoute == NavigationItem.Expense.route
) {
navigateToParentRoute(NavigationItem.Expense)
}
}
TeiraNavigationDrawerItem(
drawerState = drawerState,
painter = painterResource(id = R.drawable.ic_clear),
text = stringResource(id = R.string.generic_close),
isCurrentRoute = false
)
}
TeiraNavigationDrawerItem(
drawerState = drawerState,
painter = painterResource(id = NavigationItem.Analysis.iconResource),
text = stringResource(id = NavigationItem.Analysis.titleResource),
coroutineScope = coroutineScope,
isCurrentRoute = currentRoute == NavigationItem.Analysis.route
) {
navigateToRoute(NavigationItem.Analysis)
}
TeiraNavigationDrawerItem(
drawerState = drawerState,
painter = painterResource(id = NavigationItem.History.iconResource),
text = stringResource(id = NavigationItem.History.titleResource),
coroutineScope = coroutineScope,
isCurrentRoute = currentRoute == NavigationItem.History.route
) {
navigateToRoute(NavigationItem.History)
}
TeiraNavigationDrawerItem(
drawerState = drawerState,
painter = painterResource(id = NavigationItem.Expense.iconResource),
text = stringResource(id = NavigationItem.Expense.titleResource),
coroutineScope = coroutineScope,
isCurrentRoute = currentRoute == NavigationItem.Expense.route
) {
navigateToParentRoute(NavigationItem.Expense)
}
Spacer(modifier = Modifier.height(MaterialTheme.spacing.extraLarge))
TeiraNavigationDrawerItem(
drawerState = drawerState,
painter = painterResource(id = R.drawable.ic_clear),
text = stringResource(id = R.string.generic_close),
coroutineScope = coroutineScope,
isCurrentRoute = false
)
}
},
content = content
Expand All @@ -107,10 +128,11 @@ private fun TeiraNavigationDrawerItem(
drawerState: DrawerState,
painter: Painter,
text: String,
coroutineScope: CoroutineScope,
isCurrentRoute: Boolean,
onDrawerItemClick: (() -> Unit)? = null
) {
val coroutineScope = rememberCoroutineScope()

NavigationDrawerItem(
icon = {
Icon(painter = painter, contentDescription = null)
Expand Down
4 changes: 2 additions & 2 deletions ui/src/main/java/br/com/tick/ui/screens/analysis/AnalysisScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,12 @@ fun AnalysisScreen() {
MostExpensiveCategory(
modifier = Modifier
.fillMaxWidth()
.padding(top = MaterialTheme.spacing.large)
.padding(top = MaterialTheme.spacing.small)
)
FinancialHealthComposable(
modifier = Modifier
.fillMaxWidth()
.padding(top = MaterialTheme.spacing.large)
.padding(top = MaterialTheme.spacing.small)
)
}
}
Expand Down
1 change: 1 addition & 0 deletions ui/src/main/java/br/com/tick/ui/screens/analysis/FinancialHealth.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.hilt.navigation.compose.hiltViewModel
import br.com.tick.sdk.domain.CurrencyFormat
import br.com.tick.ui.R
import br.com.tick.ui.core.TeiraNoAvailableDataState
import br.com.tick.ui.screens.analysis.states.FinancialHealth
Expand Down
36 changes: 29 additions & 7 deletions ui/src/main/java/br/com/tick/ui/screens/analysis/MostExpensiveCategory.kt
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
package br.com.tick.ui.screens.analysis

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
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.material3.Card
Expand All @@ -23,8 +27,10 @@ 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 br.com.tick.sdk.domain.CurrencyFormat
import br.com.tick.ui.R
import br.com.tick.ui.core.TeiraNoAvailableDataState
import br.com.tick.ui.extensions.getLabelResource
import br.com.tick.ui.screens.analysis.models.MostExpensiveCategory
import br.com.tick.ui.screens.analysis.states.MostExpensiveCategoriesStates
import br.com.tick.ui.screens.analysis.viewmodels.AnalysisScreenViewModel
Expand All @@ -38,10 +44,11 @@ fun MostExpensiveCategory(
) {
val mostExpensiveCategoriesStates by viewModel.mostExpenseCategoryList
.collectAsState(initial = MostExpensiveCategoriesStates.NoDataAvailable)
val currency by viewModel.currency.collectAsState()

Column(modifier = modifier.fillMaxWidth()) {
when (val state = mostExpensiveCategoriesStates) {
is MostExpensiveCategoriesStates.Full -> MostExpensiveCategoryBody(modifier, state)
is MostExpensiveCategoriesStates.Full -> MostExpensiveCategoryBody(modifier, currency, state)
MostExpensiveCategoriesStates.NoDataAvailable -> TeiraNoAvailableDataState(modifier)
}
}
Expand All @@ -50,6 +57,7 @@ fun MostExpensiveCategory(
@Composable
private fun MostExpensiveCategoryBody(
modifier: Modifier = Modifier,
currencyFormat: CurrencyFormat,
mostExpensiveCategoriesState: MostExpensiveCategoriesStates.Full
) {
Column(modifier = modifier.fillMaxWidth()) {
Expand All @@ -59,17 +67,21 @@ private fun MostExpensiveCategoryBody(
style = MaterialTheme.textStyle.h2
)
Row(
modifier = modifier.fillMaxWidth().padding(top = MaterialTheme.spacing.medium),
modifier = modifier
.fillMaxWidth()
.padding(top = MaterialTheme.spacing.medium),
horizontalArrangement = Arrangement.SpaceEvenly
) {
mostExpensiveCategoriesState.mostExpensiveCategories.forEach { mostExpensiveCategory ->
val categoryCardColor = mostExpensiveCategory.color?.let {
Color(it)
} ?: MaterialTheme.colorScheme.secondary

val currencyLabel = stringResource(id = currencyFormat.getLabelResource())

CategoryCard(
label = mostExpensiveCategory.categoryName,
subLabel = mostExpensiveCategory.amount.toString(),
subLabel = "$currencyLabel${mostExpensiveCategory.amount}",
color = categoryCardColor
)
}
Expand All @@ -83,7 +95,7 @@ fun CategoryCard(modifier: Modifier = Modifier, label: String, subLabel: String,
modifier = modifier
.size(80.dp)
.padding(MaterialTheme.spacing.smallest),
colors = CardDefaults.cardColors(containerColor = color)
colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surface)
) {
Column(
modifier = Modifier.fillMaxSize(),
Expand All @@ -93,15 +105,24 @@ fun CategoryCard(modifier: Modifier = Modifier, label: String, subLabel: String,
Text(
text = label,
style = MaterialTheme.textStyle.h2bold,
color = MaterialTheme.colorScheme.onSecondary,
color = MaterialTheme.colorScheme.onTertiary,
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
Text(
text = subLabel,
style = MaterialTheme.textStyle.h3small,
color = MaterialTheme.colorScheme.onSecondary
style = MaterialTheme.textStyle.h3,
color = MaterialTheme.colorScheme.onTertiary
)
Box(modifier = Modifier.fillMaxSize()) {
Spacer(
modifier = Modifier
.height(6.dp)
.background(color)
.align(Alignment.BottomCenter)
.fillMaxWidth()
)
}
}
}
}
Expand All @@ -110,6 +131,7 @@ fun CategoryCard(modifier: Modifier = Modifier, label: String, subLabel: String,
@Composable
fun MostExpensiveCategoryBodyPreview() {
MostExpensiveCategoryBody(
currencyFormat = CurrencyFormat.EURO,
mostExpensiveCategoriesState = MostExpensiveCategoriesStates.Full(
listOf(MostExpensiveCategory("Test", Color.Red.toArgb(), 56.0))
)
Expand Down
2 changes: 1 addition & 1 deletion ui/src/main/java/br/com/tick/ui/screens/analysis/states/MostExpensiveCategoriesStates.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ sealed class MostExpensiveCategoriesStates {
Full(
mostExpensiveCategories
.sortedByDescending { it.amount }
.take(5)
.take(4)
)
}
}
Expand Down
34 changes: 29 additions & 5 deletions ui/src/main/java/br/com/tick/ui/screens/analysis/viewmodels/AnalysisScreenViewModel.kt
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
package br.com.tick.ui.screens.analysis.viewmodels

import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope
import br.com.tick.sdk.dispatchers.DispatcherProvider
import br.com.tick.sdk.domain.CurrencyFormat
import br.com.tick.sdk.repositories.user.UserRepository
import br.com.tick.ui.screens.analysis.states.AnalysisGraphStates
import br.com.tick.ui.screens.analysis.states.FinancialHealth
import br.com.tick.ui.screens.analysis.states.MostExpensiveCategoriesStates
Expand All @@ -10,15 +13,23 @@ import br.com.tick.ui.screens.analysis.usecases.FetchLastMonthExpenses
import br.com.tick.ui.screens.analysis.usecases.GetMostExpensiveCategories
import dagger.hilt.android.lifecycle.HiltViewModel
import kotlinx.coroutines.flow.Flow
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.SharingStarted
import kotlinx.coroutines.flow.collect
import kotlinx.coroutines.flow.first
import kotlinx.coroutines.flow.flow
import kotlinx.coroutines.flow.flowOn
import kotlinx.coroutines.flow.map
import kotlinx.coroutines.flow.stateIn
import kotlinx.coroutines.launch
import javax.inject.Inject

@HiltViewModel
class AnalysisScreenViewModel @Inject constructor(
private val fetchLastMonthExpenses: FetchLastMonthExpenses,
private val getMostExpensiveCategories: GetMostExpensiveCategories,
private val calculateFinancialHealthSituation: CalculateFinancialHealthSituation,
userRepository: UserRepository,
private val dispatcherProvider: DispatcherProvider
) : ViewModel() {

Expand All @@ -36,10 +47,23 @@ class AnalysisScreenViewModel @Inject constructor(
}
}.flowOn(dispatcherProvider.io())

val financialHealthSituation: Flow<FinancialHealth>
get() = flow {
val currency = userRepository.getUser()
.flowOn(dispatcherProvider.io())
.map { it.currency }
.stateIn(
scope = viewModelScope,
started = SharingStarted.WhileSubscribed(5_000),
initialValue = CurrencyFormat.EURO
)

private val _financialHealthSituation = MutableStateFlow<FinancialHealth>(FinancialHealth.NoDataAvailable)
val financialHealthSituation: Flow<FinancialHealth> = _financialHealthSituation

init {
viewModelScope.launch(dispatcherProvider.io()) {
calculateFinancialHealthSituation().collect {
emit(it)
_financialHealthSituation.emit(it)
}
}.flowOn(dispatcherProvider.io())
}
}
}
}
Loading

0 comments on commit 4eb4f39

Please sign in to comment.