forked from Lonami/Talaria
Add navigation
This commit is contained in:
parent
ae7aa10748
commit
fee6c52606
|
@ -54,6 +54,7 @@ dependencies {
|
|||
implementation "androidx.compose.ui:ui:$compose_ui_version"
|
||||
implementation "androidx.compose.ui:ui-tooling-preview:$compose_ui_version"
|
||||
implementation 'androidx.compose.material:material:1.2.1'
|
||||
implementation "androidx.navigation:navigation-compose:2.5.2"
|
||||
testImplementation 'junit:junit:4.13.2'
|
||||
androidTestImplementation 'androidx.test.ext:junit:1.1.3'
|
||||
androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
|
||||
|
|
|
@ -7,7 +7,6 @@ import androidx.compose.foundation.layout.fillMaxSize
|
|||
import androidx.compose.material.MaterialTheme
|
||||
import androidx.compose.material.Surface
|
||||
import androidx.compose.ui.Modifier
|
||||
import dev.lonami.talaria.ui.LoginScreen
|
||||
import dev.lonami.talaria.ui.theme.TalariaTheme
|
||||
|
||||
class MainActivity : ComponentActivity() {
|
||||
|
@ -20,7 +19,7 @@ class MainActivity : ComponentActivity() {
|
|||
modifier = Modifier.fillMaxSize(),
|
||||
color = MaterialTheme.colors.background
|
||||
) {
|
||||
LoginScreen()
|
||||
TalariaApp()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -0,0 +1,79 @@
|
|||
package dev.lonami.talaria
|
||||
|
||||
import androidx.annotation.StringRes
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.material.*
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.filled.ArrowBack
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.getValue
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.res.stringResource
|
||||
import androidx.navigation.compose.NavHost
|
||||
import androidx.navigation.compose.composable
|
||||
import androidx.navigation.compose.currentBackStackEntryAsState
|
||||
import androidx.navigation.compose.rememberNavController
|
||||
import dev.lonami.talaria.ui.ChatScreen
|
||||
import dev.lonami.talaria.ui.DialogScreen
|
||||
import dev.lonami.talaria.ui.LoginScreen
|
||||
|
||||
enum class TalariaScreen(@StringRes val title: Int) {
|
||||
Login(title = R.string.app_name),
|
||||
Dialog(title = R.string.dialog),
|
||||
Chat(title = R.string.chat),
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun TalariaAppBar(currentScreen: TalariaScreen, canNavigateBack: Boolean, navigateUp: () -> Unit) {
|
||||
TopAppBar(
|
||||
title = { Text(stringResource(currentScreen.title)) },
|
||||
navigationIcon = {
|
||||
if (canNavigateBack) {
|
||||
IconButton(onClick = navigateUp) {
|
||||
Icon(
|
||||
imageVector = Icons.Filled.ArrowBack,
|
||||
contentDescription = stringResource(R.string.back_button)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun TalariaApp() {
|
||||
val navController = rememberNavController()
|
||||
val backStackEntry by navController.currentBackStackEntryAsState()
|
||||
val currentScreen =
|
||||
TalariaScreen.valueOf(backStackEntry?.destination?.route ?: TalariaScreen.Login.name)
|
||||
|
||||
Scaffold(
|
||||
topBar = {
|
||||
TalariaAppBar(
|
||||
currentScreen,
|
||||
canNavigateBack = navController.previousBackStackEntry != null,
|
||||
navigateUp = { navController.navigateUp() }
|
||||
)
|
||||
}
|
||||
) { innerPadding ->
|
||||
NavHost(
|
||||
navController = navController,
|
||||
startDestination = TalariaScreen.Dialog.name,
|
||||
Modifier.padding(innerPadding)
|
||||
) {
|
||||
composable(route = TalariaScreen.Dialog.name) {
|
||||
DialogScreen(onDialogSelected = {
|
||||
navController.navigate(TalariaScreen.Chat.name)
|
||||
})
|
||||
}
|
||||
composable(route = TalariaScreen.Chat.name) {
|
||||
ChatScreen()
|
||||
}
|
||||
composable(route = TalariaScreen.Login.name) {
|
||||
LoginScreen(onConfirmOtp = {
|
||||
navController.navigate(TalariaScreen.Dialog.name)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,6 +1,7 @@
|
|||
package dev.lonami.talaria.ui
|
||||
|
||||
import androidx.compose.foundation.Image
|
||||
import androidx.compose.foundation.clickable
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
|
@ -24,11 +25,12 @@ import dev.lonami.talaria.model.Dialog
|
|||
import dev.lonami.talaria.ui.theme.TalariaTheme
|
||||
|
||||
@Composable
|
||||
fun DialogCard(dialog: Dialog) {
|
||||
fun DialogCard(dialog: Dialog, onDialogSelected: () -> Unit) {
|
||||
Card(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(8.dp, 16.dp)
|
||||
.clickable(onClick = onDialogSelected)
|
||||
) {
|
||||
Row {
|
||||
Image(
|
||||
|
@ -45,22 +47,26 @@ fun DialogCard(dialog: Dialog) {
|
|||
}
|
||||
|
||||
@Composable
|
||||
fun DialogList(dialogs: List<Dialog>) {
|
||||
fun DialogList(dialogs: List<Dialog>, onDialogSelected: (Int) -> Unit) {
|
||||
LazyColumn {
|
||||
items(dialogs.size) { DialogCard(dialogs[it]) }
|
||||
items(dialogs.size) {
|
||||
DialogCard(dialogs[it], onDialogSelected = {
|
||||
onDialogSelected(it)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun DialogScreen(dialogViewModel: DialogViewModel = viewModel()) {
|
||||
fun DialogScreen(onDialogSelected: (Int) -> Unit, dialogViewModel: DialogViewModel = viewModel()) {
|
||||
val dialogUiState by dialogViewModel.uiState.collectAsState()
|
||||
DialogList(dialogUiState.dialogs)
|
||||
DialogList(dialogUiState.dialogs, onDialogSelected = onDialogSelected)
|
||||
}
|
||||
|
||||
@Preview
|
||||
@Composable
|
||||
fun DialogPreview() {
|
||||
TalariaTheme {
|
||||
DialogScreen()
|
||||
DialogScreen(onDialogSelected = { })
|
||||
}
|
||||
}
|
||||
|
|
|
@ -85,7 +85,7 @@ fun OtpInput(otp: String, onOtpChanged: (String) -> Unit, onConfirmOtp: () -> Un
|
|||
}
|
||||
|
||||
@Composable
|
||||
fun LoginScreen() {
|
||||
fun LoginScreen(onConfirmOtp: () -> Unit) {
|
||||
var stage by remember { mutableStateOf(LoginStage.ASK_PHONE) }
|
||||
var phone by remember { mutableStateOf("") }
|
||||
var otp by remember { mutableStateOf("") }
|
||||
|
@ -110,9 +110,11 @@ fun LoginScreen() {
|
|||
phone,
|
||||
onPhoneChanged = { phone = it },
|
||||
onSendCode = { stage = LoginStage.ASK_CODE })
|
||||
LoginStage.ASK_CODE -> OtpInput(otp, onOtpChanged = { otp = it }, onConfirmOtp = {
|
||||
|
||||
})
|
||||
LoginStage.ASK_CODE -> OtpInput(
|
||||
otp,
|
||||
onOtpChanged = { otp = it },
|
||||
onConfirmOtp = onConfirmOtp
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -121,6 +123,6 @@ fun LoginScreen() {
|
|||
@Composable
|
||||
fun LoginPreview() {
|
||||
TalariaTheme {
|
||||
LoginScreen()
|
||||
LoginScreen(onConfirmOtp = { })
|
||||
}
|
||||
}
|
|
@ -12,4 +12,7 @@
|
|||
<string name="profile_photo">Profile Picture</string>
|
||||
<string name="write_message">Write a message…</string>
|
||||
<string name="send_message">Send</string>
|
||||
<string name="back_button">Back</string>
|
||||
<string name="dialog">All chats</string>
|
||||
<string name="chat">Messages</string>
|
||||
</resources>
|
||||
|
|
Loading…
Reference in New Issue