Merge pull request #303 from joreilly/nested_presenter

CMP adaptive UI udpates + nested circuit presenter

Author: joreilly

androidApp/build.gradle.kts

@@ -113,8 +113,8 @@ dependencies {
     implementation(libs.androidx.compose.ui.tooling)
     implementation(libs.androidx.navigation.compose)
 
-    testImplementation("junit:junit:4.13.2")
-    androidTestImplementation("androidx.test:runner:1.6.2")
+    testImplementation(libs.junit)
+    androidTestImplementation(libs.androidx.runner)
 
     implementation(projects.common)
 }

common/src/commonMain/kotlin/dev/johnoreilly/common/networklist/NetworkListPresenter.kt

@@ -2,14 +2,20 @@ package dev.johnoreilly.common.networklist
 
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import com.slack.circuit.codegen.annotations.CircuitInject
+import com.slack.circuit.retained.rememberRetained
 import com.slack.circuit.runtime.Navigator
 import com.slack.circuit.runtime.presenter.Presenter
 import dev.johnoreilly.common.getCountryName
 import dev.johnoreilly.common.repository.CityBikesRepository
 import dev.johnoreilly.common.screens.NetworkListScreen
 import dev.johnoreilly.common.screens.StationListScreen
+import dev.johnoreilly.common.stationlist.StationListPresenter
 import me.tatarka.inject.annotations.Assisted
 import me.tatarka.inject.annotations.Inject
 import software.amazon.lastmile.kotlin.inject.anvil.AppScope
@@ -19,16 +25,37 @@ import software.amazon.lastmile.kotlin.inject.anvil.AppScope
 class NetworkListPresenter(
     @Assisted private val screen: NetworkListScreen,
     @Assisted private val navigator: Navigator,
-    private val cityBikesRepository: CityBikesRepository
+    private val cityBikesRepository: CityBikesRepository,
 ) : Presenter<NetworkListScreen.State> {
+
     @Composable
     override fun present(): NetworkListScreen.State {
+        val countryName = remember(screen) { getCountryName(screen.countryCode) }
         val groupedNetworkList by cityBikesRepository.groupedNetworkList.collectAsState()
-        val networkList = groupedNetworkList[screen.countryCode]?.sortedBy { it.city } ?: emptyList()
-        val oountryName = getCountryName(screen.countryCode)
-        return NetworkListScreen.State(screen.countryCode, oountryName, networkList) { event ->
+        val networkList by remember {
+            derivedStateOf { groupedNetworkList[screen.countryCode]?.sortedBy { it.city } ?: emptyList() }
+        }
+
+        var selectedNetworkId by rememberRetained { mutableStateOf<String?>(null) }
+
+        val stationListPresenter = remember(selectedNetworkId) {
+            selectedNetworkId?.let { networkId ->
+                StationListPresenter(StationListScreen(networkId), navigator, cityBikesRepository)
+            }
+        }
+
+        val stationListState = stationListPresenter?.present()
+
+        return NetworkListScreen.State(
+            countryCode = screen.countryCode, 
+            countryName = countryName, 
+            networkList = networkList,
+            selectedNetworkId = selectedNetworkId,
+            stationListState = stationListState,
+        ) { event ->
             when (event) {
                 is NetworkListScreen.Event.NetworkClicked -> navigator.goTo(StationListScreen(event.networkId))
+                is NetworkListScreen.Event.SelectNetwork -> selectedNetworkId = event.networkId
                 NetworkListScreen.Event.BackClicked -> navigator.pop()
             }
         }

common/src/commonMain/kotlin/dev/johnoreilly/common/networklist/NetworkListUI.kt

@@ -3,13 +3,17 @@
 package dev.johnoreilly.common.networklist
 
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
+import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
@@ -25,8 +29,11 @@ import androidx.compose.ui.unit.dp
 import com.slack.circuit.codegen.annotations.CircuitInject
 import dev.johnoreilly.common.model.Network
 import dev.johnoreilly.common.screens.NetworkListScreen
+import dev.johnoreilly.common.stationlist.StationListContent
+import dev.johnoreilly.common.ui.AdaptiveLayout
 import software.amazon.lastmile.kotlin.inject.anvil.AppScope
 
+
 @CircuitInject(NetworkListScreen::class, AppScope::class)
 @Composable
 fun NetworkListUi(state: NetworkListScreen.State, modifier: Modifier = Modifier) {
@@ -43,12 +50,82 @@ fun NetworkListUi(state: NetworkListScreen.State, modifier: Modifier = Modifier)
             )
         }
     ) { innerPadding ->
-        LazyColumn(modifier = Modifier.padding(innerPadding)) {
-            items(state.networkList) { network ->
-                NetworkView(network) {
-                    state.eventSink(NetworkListScreen.Event.NetworkClicked(network.id))
+        AdaptiveLayout(
+            modifier = Modifier.fillMaxSize().padding(innerPadding),
+            compactContent = {
+                // Show only network list on narrow screens
+                NetworkList(
+                    networkList = state.networkList,
+                    onNetworkSelected = { networkId ->
+                        state.eventSink(NetworkListScreen.Event.NetworkClicked(networkId))
+                    }
+                )
+            },
+            expandedContent = {
+                // Show network list and station list side by side on wider screens
+                Row(modifier = Modifier.fillMaxSize()) {
+                    // Network list (left side)
+                    NetworkList(
+                        modifier = Modifier.weight(0.4f),
+                        networkList = state.networkList,
+                        onNetworkSelected = { networkId ->
+                            state.eventSink(NetworkListScreen.Event.SelectNetwork(networkId))
+                        }
+                    )
+                    
+                    // Station list (right side)
+                    Box(
+                        modifier = Modifier.weight(0.6f)
+                    ) {
+                        state.stationListState?.let { stationListState ->
+                            // Show actual station list for the selected network
+                            Column(modifier = Modifier.fillMaxSize()) {
+                                Text(
+                                    text = stationListState.networkId,
+                                    style = MaterialTheme.typography.headlineSmall
+                                )
+                                
+                                if (stationListState.isLoadingStations) {
+                                    Box(
+                                        modifier = Modifier.fillMaxSize(),
+                                        contentAlignment = Alignment.Center
+                                    ) {
+                                        CircularProgressIndicator()
+                                    }
+                                } else {
+                                    StationListContent(stationListState.stationList)
+                                }
+                            }
+                        } ?: run {
+                            // Placeholder when no network is selected
+                            Box(
+                                modifier = Modifier.fillMaxSize(),
+                                contentAlignment = Alignment.Center
+                            ) {
+                                Text(
+                                    "Select a network to view stations",
+                                    style = MaterialTheme.typography.bodyLarge
+                                )
+                            }
+                        }
+                    }
                 }
             }
+        )
+    }
+}
+
+@Composable
+fun NetworkList(
+    networkList: List<Network>,
+    onNetworkSelected: (String) -> Unit,
+    modifier: Modifier = Modifier
+) {
+    LazyColumn(modifier = modifier) {
+        items(networkList) { network ->
+            NetworkView(network) {
+                onNetworkSelected(network.id)
+            }
         }
     }
 }

common/src/commonMain/kotlin/dev/johnoreilly/common/screens/Screens.kt

@@ -31,11 +31,14 @@ data class NetworkListScreen(val countryCode: String) : Screen {
         val countryCode: String,
         val countryName: String,
         val networkList: List<Network>,
+        val selectedNetworkId: String? = null,
+        val stationListState: StationListScreen.State?,
         val eventSink: (Event) -> Unit
     ) : CircuitUiState
 
     sealed class Event : CircuitUiEvent {
         data class NetworkClicked(val networkId: String) : Event()
+        data class SelectNetwork(val networkId: String) : Event()
         data object BackClicked : Event()
     }
 }
@@ -45,6 +48,7 @@ data class StationListScreen(val networkId: String) : Screen {
     data class State(
         val networkId: String,
         val stationList: List<Station>,
+        val isLoadingStations: Boolean,
         val eventSink: (Event) -> Unit
     ) : CircuitUiState
 

common/src/commonMain/kotlin/dev/johnoreilly/common/stationlist/StationListPresenter.kt

@@ -1,7 +1,6 @@
 package dev.johnoreilly.common.stationlist
 
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
@@ -23,12 +22,17 @@ class StationListPresenter(
 ) : Presenter<StationListScreen.State> {
     @Composable
     override fun present(): StationListScreen.State {
-        val networkFlow = remember { cityBikesRepository.pollNetworkUpdates(screen.networkId) }
+        val networkFlow = remember(screen) { cityBikesRepository.pollNetworkUpdates(screen.networkId) }
         val stationList by networkFlow.collectAsStateWithLifecycle(emptyList())
-        return StationListScreen.State(screen.networkId, stationList) { event ->
-            when (event) {
-                StationListScreen.Event.BackClicked -> navigator.pop()
-            }
+        return StationListScreen.State(
+            screen.networkId,
+            stationList,
+            stationList.isEmpty()
+        ) {
+            event ->
+                when (event) {
+                    StationListScreen.Event.BackClicked -> navigator.pop()
+                }
         }
     }
 }

common/src/commonMain/kotlin/dev/johnoreilly/common/stationlist/StationListUI.kt

@@ -58,15 +58,22 @@ fun StationListUI(state: StationListScreen.State, modifier: Modifier = Modifier)
             )
         }
     ) { paddingValues ->
-        LazyColumn(Modifier.padding(paddingValues)) {
-            items(state.stationList.sortedBy { it.name }) { station ->
-                StationView(station)
-            }
+        Column(Modifier.padding(paddingValues)) {
+            StationListContent(state.stationList)
         }
     }
 }
 
 
+@Composable
+fun StationListContent(stationList: List<Station>) {
+    LazyColumn {
+        items(stationList.sortedBy { it.name }) { station ->
+            StationView(station)
+        }
+    }
+}
+
 @Composable
 fun StationView(station: Station) {
 

common/src/commonMain/kotlin/dev/johnoreilly/common/ui/WindowSize.kt

@@ -0,0 +1,62 @@
+package dev.johnoreilly.common.ui
+
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+/**
+ * Window size classes for adaptive layouts
+ */
+enum class WindowWidthSizeClass {
+    Compact,
+    Medium,
+    Expanded
+}
+
+/**
+ * Remembers the [WindowWidthSizeClass] based on the window width
+ */
+@Composable
+fun rememberWindowWidthSizeClass(windowWidth: Dp): WindowWidthSizeClass {
+    val windowWidthSizeClass = remember(windowWidth) {
+        when {
+            windowWidth < 600.dp -> WindowWidthSizeClass.Compact
+            windowWidth < 840.dp -> WindowWidthSizeClass.Medium
+            else -> WindowWidthSizeClass.Expanded
+        }
+    }
+    return windowWidthSizeClass
+}
+
+/**
+ * Remembers the [WindowWidthSizeClass] based on the window width in pixels
+ */
+@Composable
+fun rememberWindowWidthSizeClass(windowWidthPx: Int): WindowWidthSizeClass {
+    val density = LocalDensity.current
+    val windowWidth = with(density) { windowWidthPx.toDp() }
+    return rememberWindowWidthSizeClass(windowWidth)
+}
+
+/**
+ * A composable that adapts its content based on the available width
+ */
+@Composable
+fun AdaptiveLayout(
+    modifier: Modifier = Modifier,
+    compactContent: @Composable () -> Unit,
+    expandedContent: @Composable () -> Unit
+) {
+    BoxWithConstraints(modifier = modifier) {
+        val windowWidthSizeClass = rememberWindowWidthSizeClass(maxWidth)
+        
+        when (windowWidthSizeClass) {
+            WindowWidthSizeClass.Compact -> compactContent()
+            WindowWidthSizeClass.Medium, WindowWidthSizeClass.Expanded -> expandedContent()
+        }
+    }
+}

gradle/libs.versions.toml

@@ -2,13 +2,13 @@
 kotlin = "2.2.0"
 ksp = "2.2.0-2.0.2"
 
-androidGradlePlugin = "8.11.1"
+androidGradlePlugin = "8.12.0"
 androidxActivity = "1.10.1"
 androidxComposeBom = "2025.07.00"
 androidxLifecycle = "2.9.2"
-androidxNavigationCompose = "2.9.2"
+androidxNavigationCompose = "2.9.3"
 androidxRoom = "2.7.2"
-circuit = "0.29.1"
+circuit = "0.30.0"
 composeLifecyleRuntime="2.9.1"
 compose-multiplatform = "1.8.2"
 composeAdaptiveLayout = "1.1.2"
@@ -19,8 +19,9 @@ kmpObservableViewModel = "1.0.0-BETA-12"
 kotlin-inject-anvil = "0.1.6"
 kotlininject = "0.8.0"
 kotlinxSerialization = "1.9.0"
-ktor = "3.2.2"
+ktor = "3.2.3"
 okhttp = "5.1.0"
+runner = "1.7.0"
 slf4j = "2.0.17"
 slf4jAndroid = "2.0.17-0"
 sqlite = "2.5.2"
@@ -31,6 +32,7 @@ compileSdk = "36"
 
 
 [libraries]
+androidx-runner = { module = "androidx.test:runner", version.ref = "runner" }
 kotlinx-coroutines = { group = "org.jetbrains.kotlinx", name = "kotlinx-coroutines-core", version.ref = "coroutines" }
 kotlinx-coroutines-test = { group = "org.jetbrains.kotlinx", name = "kotlinx-coroutines-test", version.ref = "coroutines" }
 kotlinx-serialization = { group = "org.jetbrains.kotlinx", name = "kotlinx-serialization-core", version.ref = "kotlinxSerialization" }

gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.13-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-9.0.0-bin.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME