Add navigation

app/build.gradle

@@ -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'

app/src/main/java/dev/lonami/talaria/MainActivity.kt

@@ -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()
                 }
             }
         }

app/src/main/java/dev/lonami/talaria/TalariaApp.kt

@@ -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)
+                })
+            }
+        }
+    }
+}

app/src/main/java/dev/lonami/talaria/ui/DialogScreen.kt

@@ -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 = { })
     }
 }

app/src/main/java/dev/lonami/talaria/ui/LoginScreen.kt

@@ -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 = { })
     }
-}
+}

app/src/main/res/values/strings.xml

@@ -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>