Migration to Jetpack Compose.

[pierredelisle]

See https://developer.android.com/codelabs/jetpack-compose-migration#0 for background information.

Step 1: very simple migration as a first step.
bottom-up approach where we simply migrate the Home screen view subtree that is shown when no devices are currently commissioned to the ecosystem.

Also, some gradle upgrades:

• compileSdk: 33 -> 34
• Gradle plugin: 8.1.0 -> 8.1.1
• Kotlin plugin: 1.9.0 -> 1.9.20
• material: 1.9.0 -> 1.10.0

[tunjid]

Just the minor change about the ViewModel being directly passed to the composable.

[JolandaVerhoef]

LGTM! Could you add me as a reviewer on next PRs so I can check them from a Compose perspective? Happy to answer any questions when they arise :)

[javadude]

LGTM, but should be reviewed by a Compose person to make sure

[pierredelisle]

LGTM! Could you add me as a reviewer on next PRs so I can check them from a Compose perspective? Happy to answer any questions when they arise :)

Thanks Jolanda, will do. As mentioned via chat, it's not clear to me what's missing, but I cannot see the Composable previews in Android Studio. Note that I do have the following in my build.gradle.kts:

    implementation(libs.androidx.compose.ui.tooling.preview)
    debugImplementation(libs.androidx.compose.ui.tooling)

I'm using Giraffe | 2022.3.1 Patch 1.
Thanks for any insight on this.

---

Update:
Filed #183.
We can address that issue in a subsequent PR.

[pierredelisle]

Just the minor change about the ViewModel being directly passed to the composable.

@tunjid I looked at the code you referred to, and the ViewModel does get passed to InterestsRoute.
See InterestsRoute.

@Composable
internal fun InterestsRoute(
    onTopicClick: (String) -> Unit,
    modifier: Modifier = Modifier,
    viewModel: InterestsViewModel = hiltViewModel(),
) {
    val uiState by viewModel.uiState.collectAsStateWithLifecycle()

    InterestsScreen(
        uiState = uiState,
        followTopic = viewModel::followTopic,
        onTopicClick = onTopicClick,
        modifier = modifier,
    )
} 

Not sure how I can get rid of it since in the composable we extract uiState from it.

[tunjid]

@pierredelisle in the interests snippet, there's a parent Composable; the InterestsRoute. Its exists only to get the appropriately scoped ViewModel from hilt. It grabs the ViewModel then extracts the uiState from it before passing it to the actual InterestsScreen Composable.

The InterestsScreen Composable is the actual screen and can be used with the @Preview annotation since its state is easily constructed inline and tested.

Your latest changes seem to already follow this approach. I made a few changes:

• HomeScreen takes the devicesUiModel as an argument. Idiomatically, the HomeScreen is now solely a function of the devicesUiModel.
• Moved logging to a effect of the devicesUiModel changing. If two devicesUiModel changes between compositions, it will be logged. Prior, anything that triggers recomposition would cause a log.

  // This composable is a wrapper composable for extracting data from the ViewModel before passing it to the
  // actual screen composable
 @Composable
  private fun HomeRoute(homeViewModel: HomeViewModel) {
    // Observes values coming from the VM's devicesUiModelLiveData
    val devicesUiModel by homeViewModel.devicesUiModelLiveData.observeAsState()
    HomeScreen(devicesUiModel)
  }

  @Composable
  private fun HomeScreen(devicesUiModel: DeviceUiModel?) {
    val noDevices = devicesUiModel == null || devicesUiModel.devices.isEmpty()
    if (noDevices) {
      NoDevices()
    }

    LaunchedEffect(devicesUiModel) {
        Timber.d("HomeRoute [${devicesUiModel}]")
    }
  }

[javadude]

Build changes look good.

[pierredelisle]

Your latest changes seem to already follow this approach. I made a few changes:

Got it. Thanks for the clarifications! Made the changes.