https://kotlinlang.org logo
#compose
Title
# compose
c

Cicero

11/25/2021, 1:57 PM
How do you guys are calling the file in between the UI and the ViewModel? I'm calling it "Bridge" but even then it feels okish, I feel like there is a name for it, and appropriate term for it that I'm missing. So, ViewUI(parameters from the bridge), ViewBridge(viewModel), ViewModel
h

hfhbd

11/25/2021, 2:00 PM
What is its content? Normally I have a Model, ViewModel and UI file, and no Bridge 😄
👍 1
c

Cicero

11/25/2021, 2:01 PM
Let me paste some content
Copy code
class OrderDetailViewModel(
    private val orderID: String,
    private val userRepository: UserRepository
) : ViewModel() {

    private var _order = MutableLiveData<OrderModel>()
    val order = _order.immutable()

    init {
        viewModelScope.launch {
            userRepository.getOrder(orderID).collect {
                _order.value = it
            }
        }
    }
}
Copy code
@Composable
fun OrderDetailBridge(navigateBack: () -> Unit, viewModel: OrderDetailViewModel = getViewModel()){
    val order by viewModel.order.observeAsState()
    order?.let { OrderDetailUI(order = it, navigateBack = navigateBack) }
}
Copy code
@Composable
fun OrderDetailUI(
    navigateBack: () -> Unit,
    order: OrderModel
) {
 
}
n

Nicholas Doglio

11/25/2021, 3:34 PM
I've called the bridge screen, so
OrderDetailScreen
in this case.
c

Cicero

11/25/2021, 4:05 PM
But does screen describes what this function does? I'm having a problema calling it screen
n

Nicholas Doglio

11/25/2021, 4:15 PM
For me I usually have this as a destination in my navigation graph so for me it acts as a Screen but fair to call it something else like Bridge 🤷‍♀️
c

Cicero

11/25/2021, 4:32 PM
I don't really like bridge or screen
😅 2
I also some times just call it the name of the context like OrderDetail, I believe it's how google exemplified it when they spoke about decoupling the UI from the ViewModel
o

okarm

11/26/2021, 7:48 AM
I call it "Page" since it is a fullscreen application page. User navigates between separate pages. As far as your example goes, I don't see why you would use two separate names for a single thing. What works best for me is to make two overloads, one that takes a
ViewModel
and one that takes the data and actually implements the page UI (by default this overload is even private).
Copy code
data class SettingsPageState(val fooEnabled: Boolean)
Copy code
// File: SettingsPage.kt   ------

@Composable
fun SettingsPage(
  navigateBack: () -> Unit,
  viewModel: SettingsViewModel,
) {
  val state: SettingsPageState by viewModel.state.collectAsState()
  // Extract whatever else from the ViewModel
  SettingsPage(navigateBack, state, viewModel::onFooEnabledChanged)
}

@Composable
private fun SettingsPage(
  onNavigateBack: () -> Unit,  
  state: SettingsPageState,
  onFooEnabledChanged: (Boolean) -> Unit,  
) {
  // TODO Display UI based on the state
}

@Preview
@Composable
private fun SettingsPage_preview() {
  val state = SettingsPageState(fooEnabled = true)

  SettingsPage({}, state, {})
}
1
a

Alex

11/26/2021, 8:30 AM
I just call it the same and if I call the method without parameters it will call the one with dependency injection