Initial attempt to use Jetpack Navigation in shared KMP code

Author: joreilly

composeApp/build.gradle.kts

@@ -72,6 +72,9 @@ kotlin {
 
             implementation(libs.voyager)
 
+            implementation(libs.androidx.lifecycle.viewmodel.compose)
+            implementation(libs.androidx.navigation.compose)
+
             implementation(libs.kmmViewModel)
 
             implementation(libs.koalaplot)

composeApp/src/commonMain/kotlin/App.kt

@@ -1,20 +1,96 @@
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.CenterAlignedTopAppBar
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.rememberNavController
 import cafe.adriel.voyager.navigator.Navigator
 import dev.johnoreilly.climatetrace.di.commonModule
+import dev.johnoreilly.climatetrace.remote.Country
 import dev.johnoreilly.climatetrace.ui.ClimateTraceScreen
+import dev.johnoreilly.climatetrace.ui.CountryInfoDetailedView
+import dev.johnoreilly.climatetrace.ui.CountryListView
+import dev.johnoreilly.climatetrace.viewmodel.ClimateTraceViewModel
 import org.jetbrains.compose.ui.tooling.preview.Preview
 import org.koin.compose.KoinApplication
+import org.koin.compose.koinInject
 
 
 @Preview
 @Composable
-fun App() {
+fun AppVoyagerNav() {
     KoinApplication(application = {
         modules(commonModule())
     }) {
         MaterialTheme {
             Navigator(screen = ClimateTraceScreen())
         }
     }
-}
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun AppJetpackBav() {
+    KoinApplication(application = {
+        modules(commonModule())
+    }) {
+
+        MaterialTheme {
+            val navController = rememberNavController()
+
+            val viewModel = koinInject<ClimateTraceViewModel>()
+            val countryList = viewModel.countryList.collectAsState()
+            val selectedCountry = viewModel.selectedCountry.collectAsState()
+            val isLoadingCountries by viewModel.isLoadingCountries.collectAsState()
+
+            Scaffold(
+                topBar = {
+                    CenterAlignedTopAppBar(title = {
+                        Text("ClimateTraceKMP")
+                    })
+                }
+            ) { innerPadding ->
+
+                NavHost(
+                    navController = navController,
+                    startDestination = "countryList",
+                    modifier = Modifier.padding(innerPadding)
+                ) {
+
+                    composable(route = "countryList") {
+                        CountryListView(countryList.value, selectedCountry.value, isLoadingCountries) { country ->
+                            navController.navigate("details/${country.name}/${country.alpha3}")
+                        }
+                    }
+                    composable("details/{countryName}/{countryCode}",) { backStackEntry ->
+
+                        val countryName = backStackEntry.arguments?.getString("countryName") ?: ""
+                        val countryCode = backStackEntry.arguments?.getString("countryCode") ?: ""
+                        val country = Country(countryCode, "", countryName, "")
+
+                        val countryEmissionInfo by viewModel.countryEmissionInfo.collectAsState()
+                        val countryAssetEmissions by viewModel.countryAssetEmissions.collectAsState()
+                        val isLoadingCountryDetails by viewModel.isLoadingCountryDetails.collectAsState()
+
+                        LaunchedEffect(country) {
+                            viewModel.fetchCountryDetails(country)
+                        }
+
+                        CountryInfoDetailedView(country, viewModel.year, countryEmissionInfo,
+                            countryAssetEmissions, isLoadingCountryDetails)
+                    }
+                }
+            }
+        }
+    }
+
+}

composeApp/src/desktopMain/kotlin/main.kt

@@ -6,13 +6,13 @@ import androidx.compose.ui.window.application
 
 fun main() = application {
     Window(onCloseRequest = ::exitApplication, title = "ClimateTraceKMP") {
-        App()
+        AppJetpackBav()
     }
 }
 
 @Preview
 @Composable
 fun AppDesktopPreview() {
-    App()
+    AppJetpackBav()
 }
 

composeApp/src/wasmJsMain/kotlin/main.kt

@@ -3,5 +3,5 @@ import androidx.compose.ui.window.CanvasBasedWindow
 
 @OptIn(ExperimentalComposeUiApi::class)
 fun main() {
-    CanvasBasedWindow(canvasElementId = "ComposeTarget") { App() }
+    CanvasBasedWindow(canvasElementId = "ComposeTarget") { AppJetpackBav() }
 }

gradle/libs.versions.toml

@@ -10,9 +10,14 @@ androidx-core-ktx = "1.12.0"
 androidx-espresso-core = "3.5.1"
 androidx-material = "1.11.0"
 androidx-test-junit = "1.1.5"
+
+androidx-navigation = "2.8.0-alpha02"
+androidx-lifecycle = "2.8.0-beta02"
+
+
 compose = "1.6.5"
 compose-compiler = "1.5.11-kt-2.0.0-RC1"
-compose-plugin = "1.6.2"
+compose-plugin = "1.6.10-beta02"
 composeWindowSize = "0.5.0"
 imageLoader = "1.7.8"
 junit = "4.13.2"
@@ -41,6 +46,10 @@ androidx-material = { group = "com.google.android.material", name = "material",
 androidx-constraintlayout = { group = "androidx.constraintlayout", name = "constraintlayout", version.ref = "androidx-constraintlayout" }
 androidx-activity-compose = { module = "androidx.activity:activity-compose", version.ref = "androidx-activityCompose" }
 
+androidx-lifecycle-viewmodel-compose = { module = "org.jetbrains.androidx.lifecycle:lifecycle-viewmodel-compose", version.ref = "androidx-lifecycle" }
+androidx-navigation-compose = { module = "org.jetbrains.androidx.navigation:navigation-compose", version.ref = "androidx-navigation" }
+
+
 compose-ui = { module = "androidx.compose.ui:ui", version.ref = "compose" }
 compose-ui-tooling = { module = "androidx.compose.ui:ui-tooling", version.ref = "compose" }
 compose-ui-tooling-preview = { module = "androidx.compose.ui:ui-tooling-preview", version.ref = "compose" }

local.properties

@@ -4,5 +4,5 @@
 # Location of the SDK. This is only used by Gradle.
 # For customization when using a Version Control System, please read the
 # header note.
-#Sat Apr 13 09:38:39 IST 2024
-sdk.dir=/Users/joreilly/Library/Android/sdk
+#Wed Apr 17 18:40:20 CEST 2024
+sdk.dir=/Users/johnoreilly/Library/Android/sdk