How do you guys are calling the file in between th...

# compose

[Cicero]

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

[hfhbd]

What is its content? Normally I have a Model, ViewModel and UI file, and no Bridge 😄

[Cicero]

Let me paste some content

[Cicero]

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
            }
        }
    }
}

@Composable
fun OrderDetailBridge(navigateBack: () -> Unit, viewModel: OrderDetailViewModel = getViewModel()){
    val order by viewModel.order.observeAsState()
    order?.let { OrderDetailUI(order = it, navigateBack = navigateBack) }
}

@Composable
fun OrderDetailUI(
    navigateBack: () -> Unit,
    order: OrderModel
) {
 
}

[Nicholas Doglio]

I've called the bridge screen, so OrderDetailScreen in this case.

[Cicero]

But does screen describes what this function does?
I'm having a problema calling it screen

[Nicholas Doglio]

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 🤷‍♀️

[Cicero]

I don't really like bridge or screen

[Cicero]

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

[okarm]

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).

data class SettingsPageState(val fooEnabled: Boolean)

// 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, {})
}

[Alex]

I just call it the same and if I call the method without parameters it will call the one with dependency injection