navigation to product details - not pretty but works

open-telemetry · Jul 30, 2024 · d636d6c · d636d6c
1 parent 5e7c81e
commit d636d6c
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 22 deletions.
diff --git a/demo-app/build.gradle.kts b/demo-app/build.gradle.kts
@@ -65,6 +65,8 @@ dependencies {
     implementation(libs.androidx.navigation.fragment.ktx)
     implementation(libs.androidx.navigation.ui.ktx)
     implementation(libs.opentelemetry.api.incubator)
+    val nav_version = "2.7.7"
+    implementation("androidx.navigation:navigation-compose:$nav_version")
 
     coreLibraryDesugaring(libs.desugarJdkLibs)
 

diff --git a/demo-app/src/main/java/io/opentelemetry/android/demo/ui/shop/ProductCard.kt b/demo-app/src/main/java/io/opentelemetry/android/demo/ui/shop/ProductCard.kt
@@ -24,13 +24,14 @@ import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.navigation.NavController
 import io.opentelemetry.android.demo.TAG
 import io.opentelemetry.android.demo.clients.ImageLoader
 import io.opentelemetry.android.demo.gothamFont
 import io.opentelemetry.android.demo.model.Product
 
 @Composable
-fun ProductCard(product: Product) {
+fun ProductCard(product: Product, navController: NavController) {
     val imageLoader = ImageLoader(LocalContext.current)
     val sourceProductImage = imageLoader.load(product.picture)
     Bitmap.createScaledBitmap(sourceProductImage, 120, 120, false)
@@ -47,7 +48,8 @@ fun ProductCard(product: Product) {
         .wrapContentHeight()
         .padding(20.dp),
         onClick = {
-            Log.d(TAG, "TODO: Implement me!")
+            navController.navigate("prod-details/${product.id}")
+//            Log.d(TAG, "TODO: Implement me!")
         }
     ) {
         Row(modifier = Modifier.fillMaxSize().padding(20.dp)) {

diff --git a/demo-app/src/main/java/io/opentelemetry/android/demo/ui/shop/ProductDetails.kt b/demo-app/src/main/java/io/opentelemetry/android/demo/ui/shop/ProductDetails.kt
@@ -2,6 +2,8 @@ package io.opentelemetry.android.demo.ui.shop
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
@@ -28,6 +30,7 @@ fun ProductDetails(product:Product){
         modifier = Modifier
             .fillMaxSize()
             .padding(16.dp)
+            .verticalScroll(rememberScrollState())
     ) {
         Image(
             bitmap = sourceProductImage.asImageBitmap(),
@@ -72,19 +75,3 @@ fun ProductDetails(product:Product){
         }
     }
 }
-
-@Preview(showBackground = true, widthDp = 320)
-@Composable
-fun ProductDetailsPreview() {
-    val price = PriceUsd("USD", 349, 950000000)
-    val categories = listOf("telescopes")
-    val product = Product("66VCHSJNUP",
-        "Starsense Explorer Refractor Telescope",
-        "The first telescope that uses your smartphone to analyze the night sky and calculate its position in real time. StarSense Explorer is ideal for beginners thanks to the app’s user-friendly interface and detailed tutorials. It’s like having your own personal tour guide of the night sky",
-     "StarsenseExplorer.jpg",
-        price,
-        categories)
-    DemoAppTheme {
-        ProductDetails(product)
-    }
-}
diff --git a/demo-app/src/main/java/io/opentelemetry/android/demo/ui/shop/ProductList.kt b/demo-app/src/main/java/io/opentelemetry/android/demo/ui/shop/ProductList.kt
@@ -9,14 +9,15 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.State
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
+import androidx.navigation.NavController
 import io.opentelemetry.android.demo.model.Product
 
 @Composable
-fun ProductList(products: State<List<Product>>) {
+fun ProductList(products: State<List<Product>>, navController: NavController) {
     LazyColumn(modifier = Modifier.fillMaxSize()) {
         items(products.value.size) { index ->
             Row() {
-                ProductCard(products.value[index])
+                ProductCard(products.value[index], navController = navController)
             }
         }
         item {

diff --git a/demo-app/src/main/java/io/opentelemetry/android/demo/ui/shop/ShopFragment.kt b/demo-app/src/main/java/io/opentelemetry/android/demo/ui/shop/ShopFragment.kt
@@ -17,6 +17,11 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.ComposeView
 import androidx.fragment.app.Fragment
+import androidx.navigation.NavType
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.rememberNavController
+import androidx.navigation.navArgument
 import io.opentelemetry.android.demo.clients.ProductCatalogClient
 import io.opentelemetry.android.demo.theme.DemoAppTheme
 
@@ -34,17 +39,38 @@ class ShopFragment : Fragment() {
 
         return ComposeView(requireContext()).apply {
             setContent {
+
+                val navController = rememberNavController()
+
                 DemoAppTheme {
                     // A surface container using the 'background' color from the theme
                     Surface(
                         modifier = Modifier.fillMaxSize(),
                         color = MaterialTheme.colorScheme.background,
                     ) {
-                        ProductList(productState)
+                        NavHost(navController = navController, startDestination = "prod-list") {
+                            composable("prod-list") {
+                                ProductList(
+                                    products = productState,
+                                    navController = navController
+                                )
+                            }
+                            composable(
+                                "prod-details/{productId}",
+                                arguments = listOf(navArgument("productId") {
+                                    type = NavType.StringType
+                                })
+                            ) { backStackEntry ->
+                                val productId = backStackEntry.arguments?.getString("productId")
+                                val product = products.find { it.id == productId }
+                                product?.let {
+                                    ProductDetails(product = it)
+                                }
+                            }
+                        }
                     }
                 }
             }
         }
     }
-
 }