Migrate to Navigation3

Author: claraf3

JetNews/app/build.gradle.kts

@@ -20,6 +20,7 @@ import org.jetbrains.kotlin.gradle.dsl.JvmTarget
 plugins {
     alias(libs.plugins.android.application)
     alias(libs.plugins.compose)
+    alias(libs.plugins.kotlin.serialization)
 }
 
 android {
@@ -92,6 +93,7 @@ dependencies {
 
     implementation(libs.kotlin.stdlib)
     implementation(libs.kotlinx.coroutines.android)
+    implementation(libs.kotlinx.serialization.core)
 
     implementation(libs.androidx.compose.animation)
     implementation(libs.androidx.compose.foundation.layout)
@@ -116,7 +118,9 @@ dependencies {
     implementation(libs.androidx.lifecycle.livedata.ktx)
     implementation(libs.androidx.lifecycle.viewModelCompose)
     implementation(libs.androidx.lifecycle.runtime.compose)
+    implementation(libs.androidx.lifecycle.viewmodel.navigation3)
     implementation(libs.androidx.navigation.compose)
+    implementation(libs.androidx.navigation3.ui)
     implementation(libs.androidx.window)
 
     androidTestImplementation(libs.junit)

JetNews/app/src/main/java/com/example/jetnews/ui/AppDrawer.kt

@@ -36,13 +36,16 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.navigation3.runtime.NavKey
 import com.example.jetnews.R
+import com.example.jetnews.ui.navigation.Home
+import com.example.jetnews.ui.navigation.Interests
 import com.example.jetnews.ui.theme.JetnewsTheme
 
 @Composable
 fun AppDrawer(
     drawerState: DrawerState,
-    currentRoute: String,
+    currentKey: NavKey,
     navigateToHome: () -> Unit,
     navigateToInterests: () -> Unit,
     closeDrawer: () -> Unit,
@@ -58,7 +61,7 @@ fun AppDrawer(
         NavigationDrawerItem(
             label = { Text(stringResource(id = R.string.home_title)) },
             icon = { Icon(painterResource(R.drawable.ic_home), null) },
-            selected = currentRoute == JetnewsDestinations.HOME_ROUTE,
+            selected = currentKey is Home,
             onClick = {
                 navigateToHome()
                 closeDrawer()
@@ -68,7 +71,7 @@ fun AppDrawer(
         NavigationDrawerItem(
             label = { Text(stringResource(id = R.string.interests_title)) },
             icon = { Icon(painterResource(R.drawable.ic_list_alt), null) },
-            selected = currentRoute == JetnewsDestinations.INTERESTS_ROUTE,
+            selected = currentKey == Interests,
             onClick = {
                 navigateToInterests()
                 closeDrawer()
@@ -102,7 +105,7 @@ fun PreviewAppDrawer() {
     JetnewsTheme {
         AppDrawer(
             drawerState = rememberDrawerState(initialValue = DrawerValue.Open),
-            currentRoute = JetnewsDestinations.HOME_ROUTE,
+            currentKey = Home(),
             navigateToHome = {},
             navigateToInterests = {},
             closeDrawer = { },

JetNews/app/src/main/java/com/example/jetnews/ui/JetnewsApp.kt

@@ -23,40 +23,35 @@ import androidx.compose.material3.ModalNavigationDrawer
 import androidx.compose.material3.rememberDrawerState
 import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
-import androidx.navigation.compose.currentBackStackEntryAsState
-import androidx.navigation.compose.rememberNavController
 import com.example.jetnews.data.AppContainer
 import com.example.jetnews.ui.components.AppNavRail
+import com.example.jetnews.ui.navigation.JetnewsNavDisplay
+import com.example.jetnews.ui.navigation.NavigationState
+import com.example.jetnews.ui.navigation.Navigator
+import com.example.jetnews.ui.navigation.rememberNavigationState
 import com.example.jetnews.ui.theme.JetnewsTheme
 import kotlinx.coroutines.launch
 
 @Composable
 fun JetnewsApp(appContainer: AppContainer, widthSizeClass: WindowWidthSizeClass) {
     JetnewsTheme {
-        val navController = rememberNavController()
-        val navigationActions = remember(navController) {
-            JetnewsNavigationActions(navController)
-        }
-
         val coroutineScope = rememberCoroutineScope()
 
-        val navBackStackEntry by navController.currentBackStackEntryAsState()
-        val currentRoute =
-            navBackStackEntry?.destination?.route ?: JetnewsDestinations.HOME_ROUTE
-
         val isExpandedScreen = widthSizeClass == WindowWidthSizeClass.Expanded
         val sizeAwareDrawerState = rememberSizeAwareDrawerState(isExpandedScreen)
 
+        val navigationState = rememberNavigationState()
+        val navigator = Navigator(navigationState)
+
         ModalNavigationDrawer(
             drawerContent = {
                 AppDrawer(
                     drawerState = sizeAwareDrawerState,
-                    currentRoute = currentRoute,
-                    navigateToHome = navigationActions.navigateToHome,
-                    navigateToInterests = navigationActions.navigateToInterests,
+                    currentKey = navigationState.currentKey,
+                    navigateToHome = navigator::toHome,
+                    navigateToInterests = navigator::toInterests,
                     closeDrawer = { coroutineScope.launch { sizeAwareDrawerState.close() } },
                 )
             },
@@ -67,15 +62,16 @@ fun JetnewsApp(appContainer: AppContainer, widthSizeClass: WindowWidthSizeClass)
             Row {
                 if (isExpandedScreen) {
                     AppNavRail(
-                        currentRoute = currentRoute,
-                        navigateToHome = navigationActions.navigateToHome,
-                        navigateToInterests = navigationActions.navigateToInterests,
+                        currentKey = navigationState.currentKey,
+                        navigateToHome = navigator::toHome,
+                        navigateToInterests = navigator::toInterests,
                     )
                 }
-                JetnewsNavGraph(
+                JetnewsNavDisplay(
+                    navigationState = navigationState,
                     appContainer = appContainer,
+                    onBack = navigator::pop,
                     isExpandedScreen = isExpandedScreen,
-                    navController = navController,
                     openDrawer = { coroutineScope.launch { sizeAwareDrawerState.open() } },
                 )
             }

JetNews/app/src/main/java/com/example/jetnews/ui/JetnewsNavGraph.kt

@@ -30,12 +30,14 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.navigation3.runtime.NavKey
 import com.example.jetnews.R
-import com.example.jetnews.ui.JetnewsDestinations
+import com.example.jetnews.ui.navigation.Home
+import com.example.jetnews.ui.navigation.Interests
 import com.example.jetnews.ui.theme.JetnewsTheme
 
 @Composable
-fun AppNavRail(currentRoute: String, navigateToHome: () -> Unit, navigateToInterests: () -> Unit, modifier: Modifier = Modifier) {
+fun AppNavRail(currentKey: NavKey, navigateToHome: () -> Unit, navigateToInterests: () -> Unit, modifier: Modifier = Modifier) {
     NavigationRail(
         header = {
             Icon(
@@ -49,14 +51,14 @@ fun AppNavRail(currentRoute: String, navigateToHome: () -> Unit, navigateToInter
     ) {
         Spacer(Modifier.weight(1f))
         NavigationRailItem(
-            selected = currentRoute == JetnewsDestinations.HOME_ROUTE,
+            selected = currentKey is Home,
             onClick = navigateToHome,
             icon = { Icon(painterResource(id = R.drawable.ic_home), stringResource(R.string.home_title)) },
             label = { Text(stringResource(R.string.home_title)) },
             alwaysShowLabel = false,
         )
         NavigationRailItem(
-            selected = currentRoute == JetnewsDestinations.INTERESTS_ROUTE,
+            selected = currentKey == Interests,
             onClick = navigateToInterests,
             icon = { Icon(painterResource(id = R.drawable.ic_list_alt), stringResource(R.string.interests_title)) },
             label = { Text(stringResource(R.string.interests_title)) },
@@ -72,7 +74,7 @@ fun AppNavRail(currentRoute: String, navigateToHome: () -> Unit, navigateToInter
 fun PreviewAppNavRail() {
     JetnewsTheme {
         AppNavRail(
-            currentRoute = JetnewsDestinations.HOME_ROUTE,
+            currentKey = Home(),
             navigateToHome = {},
             navigateToInterests = {},
         )