ExitNodePicker: recompose when connection status changes (#410)

Updates tailscale/corp#19122

Signed-off-by: kari-ts <kari@tailscale.com>
pull/411/head
kari-ts 1 month ago committed by GitHub
parent 4fa86dbf03
commit 72f35cd318
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -18,6 +18,9 @@ import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.rememberUpdatedState
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
import androidx.lifecycle.viewmodel.compose.viewModel import androidx.lifecycle.viewmodel.compose.viewModel
@ -40,7 +43,7 @@ fun ExitNodePicker(
nav: ExitNodePickerNav, nav: ExitNodePickerNav,
model: ExitNodePickerViewModel = viewModel(factory = ExitNodePickerViewModelFactory(nav)) model: ExitNodePickerViewModel = viewModel(factory = ExitNodePickerViewModelFactory(nav))
) { ) {
LoadingIndicator.Wrap { LoadingIndicator.Wrap {
Scaffold(topBar = { Header(R.string.choose_exit_node, onBack = nav.onNavigateBackHome) }) { Scaffold(topBar = { Header(R.string.choose_exit_node, onBack = nav.onNavigateBackHome) }) {
innerPadding -> innerPadding ->
val tailnetExitNodes by model.tailnetExitNodes.collectAsState() val tailnetExitNodes by model.tailnetExitNodes.collectAsState()
@ -99,21 +102,23 @@ fun ExitNodeItem(
viewModel: ExitNodePickerViewModel, viewModel: ExitNodePickerViewModel,
node: ExitNodePickerViewModel.ExitNode, node: ExitNodePickerViewModel.ExitNode,
) { ) {
val online by rememberUpdatedState(newValue = node.online)
Box { Box {
var modifier: Modifier = Modifier var modifier: Modifier = Modifier
if (node.online) { if (online) {
modifier = modifier.clickable { viewModel.setExitNode(node) } modifier = modifier.clickable { viewModel.setExitNode(node) }
} }
ListItem( ListItem(
modifier = modifier, modifier = modifier,
colors = colors =
if (node.online) MaterialTheme.colorScheme.listItem if (online) MaterialTheme.colorScheme.listItem
else MaterialTheme.colorScheme.disabledListItem, else MaterialTheme.colorScheme.disabledListItem,
headlineContent = { headlineContent = {
Text(node.city.ifEmpty { node.label }, style = MaterialTheme.typography.bodyMedium) Text(node.city.ifEmpty { node.label }, style = MaterialTheme.typography.bodyMedium)
}, },
supportingContent = { supportingContent = {
if (!node.online) if (!online)
Text(stringResource(R.string.offline), style = MaterialTheme.typography.bodyMedium) Text(stringResource(R.string.offline), style = MaterialTheme.typography.bodyMedium)
}, },
trailingContent = { trailingContent = {

Loading…
Cancel
Save