SwiftUI and Jetpack Compose differences
// SwiftUI
struct AutoReplyScreen: View {
let botId: String
let buttonBlockId: String
let counterId: String
@ObservedObject var viewModel: AutoReplyViewModel
@State private var choosePluginBottomSheetPosition: ChoosePluginBottomSheetPosition = .hidden
@State private var showAttributePickerSheet = false
var body: some View {
switch viewModel.autoReplyStateFlow {
case let error as shared.Error: Text(error.error)
case _ as shared.Success:
AutoReplyView(botId: botId,
autoReplyState: viewModel.autoReplyState,
inputState: viewModel.autoReplyInputState,
onAutoReplyEvent: { event in
withAnimation {
switch event {
case _ as e_AutoReplyInput_ChoosePlugin:
choosePluginBottomSheetPosition = .middle
case _ as AddAttributeAutoReplyEvent:
showAttributePickerSheet = true
default:
viewModel.onEvent(event: event)
}
}
})
.bottomSheet(bottomSheetPosition: $choosePluginBottomSheetPosition) {}
.sheet(isPresented: $showAttributePickerSheet) {}
case _ as shared.Loading: Text("Loading ...")
default: EmptyView()
}
}
.onAppear {
viewModel.subscribe()
}
.onDisappear {
viewModel.unsubscribe()
}
}
// Jetpack Compose
@Composable
fun ColumnScope.AutoReplyScreen(
botId: BotId,
buttonBlockId: BlockId,
counterId: CounterId,
pluginEventFlow: Flow,
model: AutoReplyScreenModel = viewModel()
) {
LaunchedEffect(botId, buttonBlockId, counterId) {
counterId.let {
model.init(botId, buttonBlockId, counterId)
}
}
val pluginEvent = pluginEventFlow.collectAsState(null)
launch(pluginEvent.value) { pluginEvent.value?.let { model.onEvent(it) } }
AutoReplyView(
botId,
state = model.autoReply.state.state(),
inputState = model.autoReply.inputState.state(),
onAutoReplyEvent = {
when (it) {
is e_AutoReplyInput_ChoosePlugin -> CFNavigation.choosePlugin()
is AddAttributeAutoReplyEvent -> CFNavigation.updatePlugin(it.card.card)
else -> model.onEvent(it)
}
}
)
}
Here is an example of how hardly noticeable could be the differences in views architecture written with SwiftUI and Jetpack Compose.
2/22/2022