Apply versioning to the details screen

Author: skydoves

app/src/main/kotlin/io/getstream/server/driven/compose/navigation/ServerDrivenNavHost.kt

@@ -27,6 +27,7 @@ import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
 import androidx.navigation.toRoute
 import io.getstream.server.driven.core.designsystem.theme.ServerDrivenTheme
+import io.getstream.server.driven.core.model.ScreenUi
 import io.getstream.server.driven.core.navigation.AppComposeNavigator
 import io.getstream.server.driven.core.navigation.ServerDrivenScreen
 import io.getstream.server.driven.feature.details.PostDetails
@@ -53,8 +54,15 @@ fun ServerDrivenNavHost(
   ) {
     composable<ServerDrivenScreen.Timeline> {
       ServerDrivenTimeline(
-        navigateToDetails = { component ->
-          composeNavigator.navigate(ServerDrivenScreen.Details(component))
+        navigateToDetails = { component, version ->
+          composeNavigator.navigate(
+            ServerDrivenScreen.Details(
+              ScreenUi(
+                version = version,
+                components = listOf(component)
+              )
+            )
+          )
         }
       )
     }

core/model/src/main/kotlin/io/getstream/server/driven/core/model/ScreenUi.kt

@@ -16,8 +16,10 @@
 package io.getstream.server.driven.core.model
 
 import androidx.compose.runtime.Immutable
+import kotlinx.serialization.Serializable
 
 @Immutable
+@Serializable
 data class ScreenUi(
   val version: Int,
   val components: List<UiComponent>

core/navigation/src/main/kotlin/io/getstream/server/driven/core/navigation/ServerDrivenScreen.kt

@@ -15,8 +15,8 @@
  */
 package io.getstream.server.driven.core.navigation
 
-import io.getstream.server.driven.core.model.UiComponent
-import io.getstream.server.driven.core.navigation.navtypes.UiComponentNavType
+import io.getstream.server.driven.core.model.ScreenUi
+import io.getstream.server.driven.core.navigation.navtypes.ScreenUiNavType
 import kotlin.reflect.typeOf
 import kotlinx.serialization.Serializable
 
@@ -26,10 +26,10 @@ sealed interface ServerDrivenScreen {
   data object Timeline : ServerDrivenScreen
 
   @Serializable
-  data class Details(val ui: UiComponent) : ServerDrivenScreen {
+  data class Details(val ui: ScreenUi) : ServerDrivenScreen {
 
     companion object {
-      val typeMap = mapOf(typeOf<UiComponent>() to UiComponentNavType)
+      val typeMap = mapOf(typeOf<ScreenUi>() to ScreenUiNavType)
     }
   }
 }

core/navigation/src/main/kotlin/io/getstream/server/driven/core/navigation/navtypes/UiComponentNavType.kt renamed to core/navigation/src/main/kotlin/io/getstream/server/driven/core/navigation/navtypes/ScreenUiNavType.kt

@@ -18,33 +18,33 @@ package io.getstream.server.driven.core.navigation.navtypes
 import android.net.Uri
 import android.os.Bundle
 import androidx.navigation.NavType
-import io.getstream.server.driven.core.model.UiComponent
+import io.getstream.server.driven.core.model.ScreenUi
 import kotlinx.serialization.encodeToString
 import kotlinx.serialization.json.Json
 
-object UiComponentNavType : NavType<UiComponent?>(isNullableAllowed = true) {
+object ScreenUiNavType : NavType<ScreenUi?>(isNullableAllowed = true) {
 
   private val json = Json
 
-  override fun get(bundle: Bundle, key: String): UiComponent? {
+  override fun get(bundle: Bundle, key: String): ScreenUi? {
     val stringValue = bundle.getString(key) ?: return null
-    val component = json.decodeFromString<UiComponent>(stringValue)
+    val component = json.decodeFromString<ScreenUi>(stringValue)
     return component
   }
 
-  override fun put(bundle: Bundle, key: String, value: UiComponent?) {
+  override fun put(bundle: Bundle, key: String, value: ScreenUi?) {
     val stringValue = json.encodeToString(value)
     bundle.putSerializable(key, stringValue)
   }
 
-  override fun serializeAsValue(value: UiComponent?): String {
+  override fun serializeAsValue(value: ScreenUi?): String {
     // Serialized values must always be Uri encoded
     return Uri.encode(Json.encodeToString(value))
   }
 
-  override fun parseValue(value: String): UiComponent? {
+  override fun parseValue(value: String): ScreenUi? {
     // Navigation takes care of decoding the string
     // before passing it to parseValue()
-    return Json.decodeFromString<UiComponent?>(value)
+    return Json.decodeFromString<ScreenUi?>(value)
   }
 }

feature/details/src/main/kotlin/io/getstream/server/driven/feature/details/ServerDrivenDetails.kt

@@ -32,11 +32,11 @@ import io.getstream.server.driven.core.designsystem.consumer.Consume
 import io.getstream.server.driven.core.designsystem.preview.MockUtils.mockTextUi2
 import io.getstream.server.driven.core.designsystem.theme.ServerDrivenTheme
 import io.getstream.server.driven.core.model.ImageUi
-import io.getstream.server.driven.core.model.UiComponent
+import io.getstream.server.driven.core.model.ScreenUi
 
 @Composable
 fun PostDetails(
-  detailsUi: UiComponent
+  detailsUi: ScreenUi
 ) {
   Column(
     modifier = Modifier
@@ -46,18 +46,20 @@ fun PostDetails(
       .verticalScroll(state = rememberScrollState()),
     verticalArrangement = Arrangement.spacedBy(12.dp)
   ) {
-    Box(
-      modifier = Modifier
-        .fillMaxWidth()
-        .height(300.dp)
-    ) {
-      detailsUi.Consume()
-    }
+    detailsUi.components.forEach { component ->
+      Box(
+        modifier = Modifier
+          .fillMaxWidth()
+          .height(300.dp)
+      ) {
+        component.Consume(version = detailsUi.version)
+      }
 
-    if (detailsUi is ImageUi && detailsUi.title.isNotEmpty()) {
-      detailsUi.toTextUi().Consume()
+      if (component is ImageUi && component.title.isNotEmpty()) {
+        component.toTextUi().Consume(version = detailsUi.version)
+      }
     }
 
-    mockTextUi2.Consume()
+    mockTextUi2.Consume(version = detailsUi.version)
   }
 }

feature/timeline/src/main/kotlin/io/getstream/server/driven/feature/timeline/Timeline.kt

@@ -41,7 +41,7 @@ import io.getstream.server.driven.core.model.UiComponent
 @Composable
 fun ServerDrivenTimeline(
   timelineViewModel: TimelineViewModel = hiltViewModel(),
-  navigateToDetails: (UiComponent) -> Unit
+  navigateToDetails: (UiComponent, Int) -> Unit
 ) {
   val timelineUi by timelineViewModel.timelineUi.collectAsStateWithLifecycle()
 
@@ -60,7 +60,7 @@ fun ServerDrivenTimeline(
 @Composable
 private fun ServerDrivenTimelineContent(
   timelineUi: ScreenUi,
-  navigateToDetails: (UiComponent) -> Unit
+  navigateToDetails: (UiComponent, Int) -> Unit
 ) {
   Column(
     modifier = Modifier
@@ -74,7 +74,7 @@ private fun ServerDrivenTimelineContent(
       uiComponent.Consume(
         version = timelineUi.version,
         navigator = { clickedComponent ->
-          navigateToDetails.invoke(clickedComponent)
+          navigateToDetails.invoke(clickedComponent, timelineUi.version)
         }
       )
     }
@@ -94,7 +94,7 @@ private fun ServerDrivenTimelineContentPreview() {
           MockUtils.mockTextUi2
         )
       ),
-      navigateToDetails = {}
+      navigateToDetails = { _, _ -> }
     )
   }
 }