Skip to content

Commit

Permalink
improve SavedQuestion Screen
Browse files Browse the repository at this point in the history
  • Loading branch information
AmeerAmjed committed Jul 20, 2023
1 parent 26c08fc commit 11b5e33
Show file tree
Hide file tree
Showing 9 changed files with 169 additions and 106 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import androidx.navigation.compose.composable
import com.pancake.brainburst.ui.screens.gameOver.gameOverRoute
import com.pancake.brainburst.ui.screens.gameScreen.gameScreen
import com.pancake.brainburst.ui.screens.home.homeScreen
import com.pancake.brainburst.ui.screens.savedQuestions.SavedQuestionScreen
import com.pancake.brainburst.ui.screens.savedQuestions.savedQuestionScreen
import com.pancake.brainburst.ui.screens.welecome.WelcomeScreen

@Composable
Expand All @@ -21,7 +21,7 @@ fun BrainNavGraph(navController: NavHostController) {

gameScreen(navController)

composable(BrainDestination.SavedQuestion) { SavedQuestionScreen(navController) }
savedQuestionScreen(navController)

gameOverRoute(navController)
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
package com.pancake.brainburst.ui.screens.composable

import androidx.annotation.StringRes
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.rounded.ArrowBack
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import com.pancake.brainburst.R
import com.pancake.brainburst.ui.screens.home.composable.IconButtonSmall
import com.pancake.brainburst.ui.theme.Type
import com.pancake.brainburst.ui.theme.space16
import com.pancake.brainburst.ui.theme.space4

@Composable
fun AppBar(
modifier: Modifier = Modifier,
@StringRes idTitleStringRes: Int,
onClickBack: (() -> Unit)?,
) {

Row(
modifier = modifier
.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Start
) {

if (onClickBack != null)
IconButtonSmall(
onClick = onClickBack,
iconColor = MaterialTheme.colorScheme.onBackground,
background = MaterialTheme.colorScheme.background,
imageVector = Icons.Rounded.ArrowBack,
)

Spacer(modifier = Modifier.size(space16))
Text(
modifier = Modifier.padding(vertical = space4),
text = stringResource(id = idTitleStringRes),
style = Type.Title,
textAlign = TextAlign.Center
)
}
}


@Preview(showBackground = true)
@Composable
fun AppBarPreview() {
AppBar(
idTitleStringRes = R.string.saved_questions
) {}
}
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.pancake.brainburst.ui.theme.smallIconButton


Expand All @@ -24,13 +23,14 @@ fun IconButtonSmall(
onClick: () -> Unit,
modifier: Modifier = Modifier,
iconColor: Color = MaterialTheme.colorScheme.primary,
background: Color? = null,
imageVector: ImageVector,
) {
IconButton(
onClick = { onClick() },
modifier = modifier
.clip(CircleShape)
.background(iconColor.copy(alpha = 0.2f))
.background(background ?: iconColor.copy(alpha = 0.2f))
.height(smallIconButton)
.width(smallIconButton),
) {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
package com.pancake.brainburst.ui.screens.savedQuestions

import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.navigation.NavController
import androidx.navigation.NavGraphBuilder
import androidx.navigation.NavHostController
Expand All @@ -12,11 +13,8 @@ fun NavController.navigateToSaveScreen() {
navigate(ROUTE)
}

fun NavController.backToHomeScreen() {
popBackStack()
}

fun NavGraphBuilder.savedScreen(navController: NavHostController) {
@OptIn(ExperimentalMaterial3Api::class)
fun NavGraphBuilder.savedQuestionScreen(navController: NavHostController) {
composable(ROUTE) { SavedQuestionScreen(navController) }
}

Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
package com.pancake.brainburst.ui.screens.savedQuestions

import android.util.Log
import androidx.lifecycle.viewModelScope
import com.pancake.brainburst.domain.model.FavoriteQuestionModel
import com.pancake.brainburst.domain.usecase.GetAllSavedQuestionLocalUseCase
Expand Down
Original file line number Diff line number Diff line change
@@ -1,112 +1,83 @@
package com.pancake.brainburst.ui.screens.savedQuestions

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
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.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.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.material3.SheetState
import androidx.compose.material3.rememberModalBottomSheetState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.hilt.navigation.compose.hiltViewModel
import androidx.navigation.NavController
import com.pancake.brainburst.R
import com.pancake.brainburst.domain.model.FavoriteQuestionModel
import com.pancake.brainburst.ui.screens.savedQuestions.bottomSheet.QuestionBottomSheetContent
import com.pancake.brainburst.ui.screens.composable.AppBar
import com.pancake.brainburst.ui.screens.home.backToHomeScreen
import com.pancake.brainburst.ui.screens.savedQuestions.composable.QuestionBottomSheetContent
import com.pancake.brainburst.ui.screens.savedQuestions.composable.ItemSaveQuestionCard
import com.pancake.brainburst.ui.screens.savedQuestions.state.SavedQuestionsUiState
import com.pancake.brainburst.ui.theme.Brand500
import com.pancake.brainburst.ui.theme.LightPrimary
import com.pancake.brainburst.ui.theme.LightWhite500
import com.pancake.brainburst.ui.theme.Type
import com.pancake.brainburst.ui.theme.space16
import com.pancake.brainburst.ui.theme.space24
import com.pancake.brainburst.ui.theme.space4
import com.pancake.brainburst.ui.theme.space8
import com.pancake.brainburst.ui.theme.space80
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.launch

@ExperimentalMaterial3Api
@Composable
fun SavedQuestionScreen(
navController: NavController,
viewModel: SavedQuestionViewModel = hiltViewModel()
) {
val state by viewModel.state.collectAsState()
val coroutineScope = rememberCoroutineScope()
val bottomSheetState = rememberModalBottomSheetState()

SavedQuestionContent(
state = state,
onClickQuestion = viewModel::onClickQuestion,
onClickBack = { navController.backToHomeScreen() }
coroutineScope = coroutineScope,
bottomSheetState = bottomSheetState,
onClickQuestion = { favorite ->
viewModel.onClickQuestion(favorite)
coroutineScope.launch { bottomSheetState.partialExpand() }
},
onClickBack = navController::backToHomeScreen
)
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
private fun SavedQuestionContent(
state: SavedQuestionsUiState,
coroutineScope: CoroutineScope,
bottomSheetState: SheetState,
onClickQuestion: (FavoriteQuestionModel) -> Unit,
onClickBack: () -> Unit
) {
val coroutineScope = rememberCoroutineScope()
val bottomSheetState = rememberModalBottomSheetState()
Column(
modifier = Modifier
.fillMaxSize()
.padding(space16)

LazyColumn(
modifier = Modifier.padding(horizontal = space16),
verticalArrangement = Arrangement.spacedBy(space8),
contentPadding = PaddingValues(vertical = space24)
) {
Row {
Icon(
modifier = Modifier
.padding(space4)
.size(space24)
.clickable(onClick = onClickBack),
imageVector = Icons.Default.ArrowBack,
contentDescription = "back", tint = LightPrimary
)
Spacer(modifier = Modifier.size(space16))
Text(
modifier = Modifier.padding(vertical = space4),
text = "Saved Questions",
style = Type.Title,
textAlign = TextAlign.Center
item {
AppBar(
idTitleStringRes = R.string.saved_questions,
onClickBack = onClickBack,
)
}
LazyColumn(
verticalArrangement = Arrangement.spacedBy(space8),
contentPadding = PaddingValues(vertical = space24)
) {
items(state.questions) {
QuestionCard(
question = it,
onClick = {
coroutineScope.launch { bottomSheetState.partialExpand() }
onClickQuestion(it)
}
)
}
items(state.questions) {
ItemSaveQuestionCard(
question = it,
onClick = {
onClickQuestion(it)
}
)
}
}
QuestionBottomSheetContent(
Expand All @@ -116,34 +87,3 @@ private fun SavedQuestionContent(
)
}

@Composable
private fun QuestionCard(
question: FavoriteQuestionModel,
onClick: () -> Unit
) {
Row(
modifier = Modifier
.fillMaxWidth()
.height(space80)
.clip(RoundedCornerShape(space16))
.background(LightWhite500)
.clickable(onClick = onClick)
.padding(space16),
verticalAlignment = Alignment.CenterVertically
) {
Text(
modifier = Modifier.fillMaxWidth(.88f),
text = question.question,
style = Type.Title,
color = Brand500,
maxLines = 2,
overflow = TextOverflow.Ellipsis
)

Image(
imageVector = ImageVector.vectorResource(id = R.drawable.favorite_star),
contentDescription = "save icon"
)
}

}
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
package com.pancake.brainburst.ui.screens.savedQuestions.bottomSheet
package com.pancake.brainburst.ui.screens.savedQuestions.composable


import androidx.compose.foundation.background
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
package com.pancake.brainburst.ui.screens.savedQuestions.composable

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.text.style.TextOverflow
import com.pancake.brainburst.R
import com.pancake.brainburst.domain.model.FavoriteQuestionModel
import com.pancake.brainburst.ui.theme.Brand500
import com.pancake.brainburst.ui.theme.LightWhite500
import com.pancake.brainburst.ui.theme.Type
import com.pancake.brainburst.ui.theme.space16
import com.pancake.brainburst.ui.theme.space80


@Composable
fun ItemSaveQuestionCard(
question: FavoriteQuestionModel,
onClick: () -> Unit
) {
Row(
modifier = Modifier
.fillMaxWidth()
.height(space80)
.clip(RoundedCornerShape(space16))
.background(LightWhite500)
.clickable(onClick = onClick)
.padding(space16),
verticalAlignment = Alignment.CenterVertically
) {
Text(
modifier = Modifier.fillMaxWidth(.88f),
text = question.question,
style = Type.Title,
color = Brand500,
maxLines = 2,
overflow = TextOverflow.Ellipsis
)

Image(
imageVector = ImageVector.vectorResource(id = R.drawable.favorite_star),
contentDescription = "save icon"
)
}

}
Loading

0 comments on commit 11b5e33

Please sign in to comment.