[#617] Migrate sample-compose to navigation 3

Author: eeeeaa

sample-compose/app/build.gradle.kts

@@ -3,6 +3,7 @@ plugins {
     alias(libs.plugins.compose.compiler)
     alias(libs.plugins.kotlin.android)
     alias(libs.plugins.kotlin.parcelize)
+    alias(libs.plugins.kotlin.serialization)
     alias(libs.plugins.ksp)
     alias(libs.plugins.hilt)
     alias(libs.plugins.kover)
@@ -133,6 +134,7 @@ dependencies {
 
     implementation(libs.kotlin.stdlib)
     implementation(libs.kotlinx.coroutines.core)
+    implementation(libs.kotlinx.serialization.json)
 
     debugImplementation(libs.chucker)
     releaseImplementation(libs.chucker.noOp)

sample-compose/app/src/androidTest/java/co/nimblehq/sample/compose/ui/screens/main/home/HomeScreenTest.kt

@@ -13,7 +13,7 @@ import co.nimblehq.sample.compose.domain.usecase.IsFirstTimeLaunchPreferencesUse
 import co.nimblehq.sample.compose.domain.usecase.UpdateFirstTimeLaunchPreferencesUseCase
 import co.nimblehq.sample.compose.test.MockUtil
 import co.nimblehq.sample.compose.test.TestDispatchersProvider
-import co.nimblehq.sample.compose.ui.base.BaseDestination
+import androidx.navigation3.runtime.NavKey
 import co.nimblehq.sample.compose.ui.screens.MainActivity
 import co.nimblehq.sample.compose.ui.screens.main.MainDestination
 import co.nimblehq.sample.compose.ui.theme.ComposeTheme
@@ -43,7 +43,7 @@ class HomeScreenTest {
     private val mockUpdateFirstTimeLaunchPreferencesUseCase: UpdateFirstTimeLaunchPreferencesUseCase = mockk()
 
     private lateinit var viewModel: HomeViewModel
-    private var expectedDestination: BaseDestination? = null
+    private var expectedDestination: NavKey? = null
 
     @Before
     fun setUp() {
@@ -74,7 +74,7 @@ class HomeScreenTest {
     fun when_clicking_on_a_list_item__it_navigates_to_Second_screen() = initComposable {
         onNodeWithText("1").performClick()
 
-        assertEquals(expectedDestination, MainDestination.Second)
+        assertEquals((expectedDestination as? MainDestination.Second)?.id, "1")
     }
 
     private fun initComposable(

sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/AppDestination.kt

@@ -1,10 +1,10 @@
 package co.nimblehq.sample.compose.ui
 
-import co.nimblehq.sample.compose.ui.base.BaseDestination
+import androidx.navigation3.runtime.NavKey
+import kotlinx.serialization.Serializable
 
-sealed class AppDestination {
+sealed interface AppDestination : NavKey {
 
-    object RootNavGraph : BaseDestination("rootNavGraph")
-
-    object MainNavGraph : BaseDestination("mainNavGraph")
+    @Serializable
+    data object MainNavGraph : AppDestination
 }

sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/AppNavGraph.kt

@@ -1,63 +1,45 @@
 package co.nimblehq.sample.compose.ui
 
 import androidx.compose.runtime.Composable
-import androidx.navigation.NavBackStackEntry
-import androidx.navigation.NavGraphBuilder
-import androidx.navigation.NavHostController
-import androidx.navigation.compose.NavHost
-import androidx.navigation.compose.composable
-import androidx.navigation.navDeepLink
-import co.nimblehq.sample.compose.ui.base.BaseDestination
-import co.nimblehq.sample.compose.ui.screens.main.mainNavGraph
+import androidx.navigation3.runtime.NavEntry
+import androidx.navigation3.runtime.rememberSaveableStateHolderNavEntryDecorator
+import androidx.navigation3.ui.NavDisplay
+import co.nimblehq.sample.compose.ui.navigation.Navigator
+import co.nimblehq.sample.compose.ui.navigation.NavigationState
+import co.nimblehq.sample.compose.ui.screens.main.MainDestination
+import co.nimblehq.sample.compose.ui.screens.main.home.HomeScreen
+import co.nimblehq.sample.compose.ui.screens.main.second.SecondScreen
+import co.nimblehq.sample.compose.ui.screens.main.third.ThirdScreen
 
 @Composable
 fun AppNavGraph(
-    navController: NavHostController,
+    navigationState: NavigationState<MainDestination>,
+    navigator: Navigator<MainDestination>,
 ) {
-    NavHost(
-        navController = navController,
-        route = AppDestination.RootNavGraph.route,
-        startDestination = AppDestination.MainNavGraph.destination
-    ) {
-        mainNavGraph(navController = navController)
-    }
-}
-
-fun NavGraphBuilder.composable(
-    destination: BaseDestination,
-    content: @Composable (NavBackStackEntry) -> Unit,
-) {
-    composable(
-        route = destination.route,
-        arguments = destination.arguments,
-        deepLinks = destination.deepLinks.map {
-            navDeepLink {
-                uriPattern = it
-            }
-        },
-        content = content
-    )
-}
-
-/**
- * Navigate to provided [BaseDestination] with a Pair of key value String and Data [parcel]
- * Caution to use this method. This method use savedStateHandle to store the Parcelable data.
- * When previousBackstackEntry is popped out from navigation stack, savedStateHandle will return null and cannot retrieve data.
- * eg.Login -> Home, the Login screen will be popped from the back-stack on logging in successfully.
- */
-fun NavHostController.navigate(destination: BaseDestination, parcel: Pair<String, Any?>? = null) {
-    when (destination) {
-        is BaseDestination.Up -> {
-            destination.results.forEach { (key, value) ->
-                previousBackStackEntry?.savedStateHandle?.set(key, value)
+    NavDisplay(
+        backStack = navigationState.backStack,
+        onBack = { navigator.goBack() },
+        entryDecorators = listOf(rememberSaveableStateHolderNavEntryDecorator()),
+        entryProvider = { key ->
+            when (key) {
+                is MainDestination.Home -> NavEntry(key) {
+                    HomeScreen(
+                        navigator = { destination -> navigator.navigate(destination as MainDestination) }
+                    )
+                }
+                is MainDestination.Second -> NavEntry(key) {
+                    SecondScreen(
+                        navigator = { navigator.goBack() },
+                        id = key.id
+                    )
+                }
+                is MainDestination.Third -> NavEntry(key) {
+                    ThirdScreen(
+                        navigator = {},
+                        model = key.model
+                    )
+                }
             }
-            navigateUp()
         }
-        else -> {
-            parcel?.let { (key, value) ->
-                currentBackStackEntry?.savedStateHandle?.set(key, value)
-            }
-            navigate(route = destination.destination)
-        }
-    }
+    )
 }

sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/base/BaseDestination.kt

@@ -2,6 +2,7 @@ package co.nimblehq.sample.compose.ui.base
 
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
+import androidx.navigation3.runtime.NavKey
 import kotlinx.coroutines.*
 import kotlinx.coroutines.flow.*
 import kotlin.coroutines.CoroutineContext
@@ -18,7 +19,7 @@ abstract class BaseViewModel : ViewModel() {
     protected val _error = MutableSharedFlow<Throwable>()
     val error = _error.asSharedFlow()
 
-    protected val _navigator = MutableSharedFlow<BaseDestination>()
+    protected val _navigator = MutableSharedFlow<NavKey>()
     val navigator = _navigator.asSharedFlow()
 
     /**

sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/base/BaseViewModel.kt

@@ -3,7 +3,9 @@ package co.nimblehq.sample.compose.ui.models
 import android.os.Parcelable
 import co.nimblehq.sample.compose.domain.models.Model
 import kotlinx.parcelize.Parcelize
+import kotlinx.serialization.Serializable
 
+@Serializable
 @Parcelize
 data class UiModel(
     val id: String,

sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/models/UiModel.kt

@@ -0,0 +1,30 @@
+package co.nimblehq.sample.compose.ui.navigation
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateListOf
+import androidx.compose.runtime.remember
+import androidx.navigation3.runtime.NavKey
+
+/**
+ * Remember a [NavigationState].
+ * Note: Navigation3's NavDisplay handles state restoration internally,
+ * so we don't need to use rememberSaveable here.
+ */
+@Composable
+fun <T : NavKey> rememberNavigationState(
+    startDestination: T,
+): NavigationState<T> = remember {
+    NavigationState(startDestination)
+}
+
+/**
+ * Holds the navigation state including the back stack.
+ */
+class NavigationState<T : NavKey>(
+    startDestination: T,
+) {
+    val backStack = mutableStateListOf(startDestination)
+
+    val currentDestination: T
+        get() = backStack.last()
+}

sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/navigation/NavigationState.kt

@@ -0,0 +1,44 @@
+package co.nimblehq.sample.compose.ui.navigation
+
+import androidx.navigation3.runtime.NavKey
+
+/**
+ * Navigator class to handle navigation actions.
+ */
+class Navigator<T : NavKey>(
+    private val navigationState: NavigationState<T>,
+) {
+    /**
+     * Navigate to a destination.
+     */
+    fun navigate(destination: T) {
+        navigationState.backStack.add(destination)
+    }
+
+    /**
+     * Navigate back. Returns true if navigation was successful.
+     */
+    fun goBack(): Boolean {
+        return if (navigationState.backStack.size > 1) {
+            navigationState.backStack.removeLast()
+            true
+        } else {
+            false
+        }
+    }
+
+    /**
+     * Pop back stack up to the specified destination (inclusive or exclusive).
+     */
+    fun popBackTo(destination: T, inclusive: Boolean = false) {
+        val index = navigationState.backStack.lastIndexOf(destination)
+        if (index != -1) {
+            val removeCount = navigationState.backStack.size - index - if (inclusive) 0 else 1
+            repeat(removeCount) {
+                if (navigationState.backStack.size > 1) {
+                    navigationState.backStack.removeLast()
+                }
+            }
+        }
+    }
+}

sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/navigation/Navigator.kt

@@ -3,8 +3,10 @@ package co.nimblehq.sample.compose.ui.screens
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
-import androidx.navigation.compose.rememberNavController
 import co.nimblehq.sample.compose.ui.AppNavGraph
+import co.nimblehq.sample.compose.ui.navigation.Navigator
+import co.nimblehq.sample.compose.ui.navigation.rememberNavigationState
+import co.nimblehq.sample.compose.ui.screens.main.MainDestination
 import co.nimblehq.sample.compose.ui.theme.ComposeTheme
 import dagger.hilt.android.AndroidEntryPoint
 
@@ -15,7 +17,12 @@ class MainActivity : ComponentActivity() {
         super.onCreate(savedInstanceState)
         setContent {
             ComposeTheme {
-                AppNavGraph(navController = rememberNavController())
+                val navigationState = rememberNavigationState<MainDestination>(MainDestination.Home)
+                val navigator = Navigator(navigationState)
+                AppNavGraph(
+                    navigationState = navigationState,
+                    navigator = navigator
+                )
             }
         }
     }