How to do navigation in a master/detail kind of UI?

[plusmobileapps]

So as I have been playing around with Decompose, its a pretty great framework for abstracting out routing into the common module. I have just noticed in the Todo Example, that when a new component is routed to that the entire screen is replaced.

One common practice in building UI's for larger screens is the master/detail layout like shown below:

So I was curious how something like this could be achieved in Decompose? I could see this being useful in other types of layouts as well if a navigation drawer or bottom nav were used, for example clicking on a different tab in a bottom nav shouldn't necessarily reload the whole bottom nav.

The readme mentions :

A key unit is the Router. It is responsible for managing components, just like FragmentManager.

Which if my understanding is correct, the router only has a couple methods being push and pop and if it were to be like a fragment manager might also need a replace method to achieve something like this? I'm guessing that this might also need some nested routers potentially to achieve something like this?

interface Router<C : Parcelable, out T : Any> {

    val state: Value<RouterState<C, T>>

    fun push(configuration: C)

    fun pop()
}

[arkivanov]

Good question! Do you need to support both kinds of navigation (depending on mobile/desktop build type), or just one of them?

[plusmobileapps]

Thanks for the great example you provided! I think the answer may be both for for the kind of UI I was thinking? The root UI class in compose would be the following so as the user expands the window, it could change the configuration.

@Composable
fun TodoRootUi(component: TodoRoot) {
    WithConstraints {
        if (constraints.maxWidth < with(AmbientDensity.current) { 560.dp.toPx() }) {
            PhoneContent(component)
        } else {
            DesktopContent(component)
        }
    }
}

With that in mind, I was playing around with your example and thought to create a separate router for the multi-pane configuration which could then be used when the constraints change. In order to make this work I created two separate router states for each component.

@Composable
private fun PhoneContent(component: TodoRoot) {
    Children(routerState = component.phoneRouterState, animation = crossfade()) { child, _ ->
        when (child) {
            is Child.Main -> ItemListContent(child.component)
            is Child.EditListItem -> EditListItemContent(child.component)
        }
    }
}

@Composable
private fun DesktopContent(component: TodoRoot) {
    Children(routerState = component.multiPaneRouterState, animation = crossfade()) { child, _ ->
        when (child) {
            is Child.MultiPane -> MultiPaneContent(child.component)
        }
    }
}

Where I finally ended up with something like this.

You can probably see there is some jank in the state between the two which I think could be solved with bloc to bloc communication? Open to other suggestions on achieving that if you have any

[arkivanov]

This is awesome, love it! If you need to support both at the same time, then yes, you need two routers. From ny point of view the UX is already perfect, given this use case is quite rare. Maybe saving state to StateKeeper/InstanceKeeper would help?

[arkivanov]

There can be many ways of implementing this, actually. I'm thinking about the following. The Items component can be always created in the Root component, in the Root's constructor and assigned to a field. Its state can be exposed as normal. And there could be a router with just two configurations: None and Details. In the Root'c Composable you can check the current width and:

• if single pane mode, then display either List or Details
• if multi pane then display List and Details (if there is one)

[plusmobileapps]

Yeah I might be overthinking the use case at this point, guess I'm just curious how flexible decompose is and pretty sure I understand how to achieve that with some of your suggestions. Thanks!

[arkivanov]

I will provide solutions for both.

So first of all let's decompose it. We can create separate components for Items and Details parts.

Items

data class Item(
    val id: String,
    val text: String
)

interface ItemsComponent {
    val models: Value<Model>

    fun onItemClicked(id: String)

    data class Model(
        val items: List<Item>
    )

    sealed class Output {
        data class ItemSelected(val id: String) : Output()
    }
}

class ItemsComponentImpl(
    private val output: (ItemsComponent.Output) -> Unit
) : ItemsComponent {

    override val models: Value<ItemsComponent.Model> =
        MutableValue(
            ItemsComponent.Model(
                items = listOf(
                    Item(id = "id1", text = "Item 1"),
                    Item(id = "id2", text = "Item 2"),
                    Item(id = "id3", text = "Item 3")
                )
            )
        )

    override fun onItemClicked(id: String) {
        output(ItemsComponent.Output.ItemSelected(id = id))
    }
}

@Composable
fun Items(component: ItemsComponent) {
    TODO()
}

Details

interface DetailsComponent {
    val models: Value<Model>

    fun onCloseClicked()

    data class Model(
        val title: String,
        val text: String
    )

    sealed class Output {
        object Finished : Output()
    }
}

class DetailsComponentImpl(
    itemId: String,
    private val output: (DetailsComponent.Output) -> Unit
) : DetailsComponent {

    override val models: Value<DetailsComponent.Model> =
        MutableValue(
            DetailsComponent.Model(
                title = "Item $itemId title",
                text = "Item $itemId text"
            )
        )

    override fun onCloseClicked() {
        output(DetailsComponent.Output.Finished)
    }
}

@Composable
fun Details(component: DetailsComponent) {
    TODO()
}

And now we can aggregate them in a parent component. We can create separate components for multi-pane and single-pane modes.

MultiPane

interface MultiPaneComponent {
    val items: ItemsComponent
    val routerState: Value<RouterState<*, Child>>

    sealed class Child {
        object None : Child()
        data class Details(val component: DetailsComponent) : Child()
    }
}

class MultiPaneComponentImpl(
    context: ComponentContext
) : MultiPaneComponent, ComponentContext by context {

    private val router =
        router<Configuration, MultiPaneComponent.Child>(
            initialConfiguration = Configuration.None,
            handleBackButton = true,
            componentFactory = ::child
        )

    override val items: ItemsComponent = ItemsComponentImpl(output = ::onItemsOutput)
    override val routerState: Value<RouterState<*, MultiPaneComponent.Child>> = router.state

    private fun child(configuration: Configuration, context: ComponentContext): MultiPaneComponent.Child =
        when (configuration) {
            is Configuration.None -> MultiPaneComponent.Child.None

            is Configuration.Details ->
                MultiPaneComponent.Child.Details(
                    DetailsComponentImpl(
                        itemId = configuration.id,
                        output = ::onItemDetailsOutput
                    )
                )
        }

    private fun onItemsOutput(output: ItemsComponent.Output): Unit =
        when (output) {
            is ItemsComponent.Output.ItemSelected -> router.push(Configuration.Details(id = output.id))
        }

    private fun onItemDetailsOutput(output: DetailsComponent.Output): Unit =
        when (output) {
            DetailsComponent.Output.Finished -> TODO()
        }

    private sealed class Configuration : Parcelable {
        @Parcelize
        object None : Configuration()

        @Parcelize
        data class Details(val id: String) : Configuration()
    }
}

@Composable
fun MultiPane(component: MultiPaneComponent) {
    Row {
        Items(component.items)

        Children(component.routerState) { child, _ ->
            when (child) {
                is MultiPaneComponent.Child.None -> Unit
                is MultiPaneComponent.Child.Details -> Details(child.component)
            }.let {}
        }
    }
}

SinglePane

interface SinglePaneComponent {
    val routerState: Value<RouterState<*, Child>>

    sealed class Child {
        data class Items(val component: ItemsComponent) : Child()
        data class Details(val component: DetailsComponent) : Child()
    }
}

class SinglePaneComponentImpl(
    context: ComponentContext
) : SinglePaneComponent, ComponentContext by context {

    private val router =
        router<Configuration, SinglePaneComponent.Child>(
            initialConfiguration = Configuration.Items,
            handleBackButton = true,
            componentFactory = ::child
        )

    override val routerState: Value<RouterState<*, SinglePaneComponent.Child>> = router.state

    private fun child(configuration: Configuration, context: ComponentContext): SinglePaneComponent.Child =
        when (configuration) {
            is Configuration.Items ->
                SinglePaneComponent.Child.Items(
                    ItemsComponentImpl(
                        output = ::onItemsOutput
                    )
                )

            is Configuration.Details ->
                SinglePaneComponent.Child.Details(
                    DetailsComponentImpl(
                        itemId = configuration.id,
                        output = ::onItemDetailsOutput
                    )
                )
        }

    private fun onItemsOutput(output: ItemsComponent.Output): Unit =
        when (output) {
            is ItemsComponent.Output.ItemSelected -> router.push(Configuration.Details(id = output.id))
        }

    private fun onItemDetailsOutput(output: DetailsComponent.Output): Unit =
        when (output) {
            DetailsComponent.Output.Finished -> router.pop()
        }

    private sealed class Configuration : Parcelable {
        @Parcelize
        object Items : Configuration()

        @Parcelize
        data class Details(val id: String) : Configuration()
    }
}

@Composable
fun SinglePane(component: SinglePaneComponent) {
    Children(routerState = component.routerState) { child, _ ->
        when (child) {
            is SinglePaneComponent.Child.Items -> Items(child.component)
            is SinglePaneComponent.Child.Details -> Details(child.component)
        }.let {}
    }
}

[Shahriyar13]

I tried to use this approach, but I have a problem, can you check this please?
It's not change when I change the screen size
And Noting Happening by emitting on item click event

Project

Component

class ProjectComponent(
    componentContext: ComponentContext,
    storeFactory: StoreFactory,
    searchValue: String,
    private val output: (Output) -> Unit,
): ComponentContext by componentContext {

    private val projectSinglePane: (ComponentContext, searchValue: String?, (ProjectSinglePaneComponent.Output) -> Unit) -> ProjectSinglePaneComponent = { childContext, searchValue,  output ->
        ProjectSinglePaneComponent(
            componentContext = childContext,
            storeFactory = storeFactory,
            searchValue = searchValue,
            output = output
        )
    }

    private val projectMultiPane: (ComponentContext, searchValue: String?, (ProjectMultiPaneComponent.Output) -> Unit) -> ProjectMultiPaneComponent = { childContext, searchValue, output ->
        ProjectMultiPaneComponent(
            componentContext = childContext,
            storeFactory = storeFactory,
            searchValue = searchValue,
            output = output
        )
    }

    private val projectStore =
        instanceKeeper.getStore {
            ProjectStoreFactory(
                storeFactory = storeFactory,
            ).create()
        }


    private val navigation = StackNavigation<Config>()

    private val stack =
        childStack(
            source = navigation,
            initialConfiguration = Config.SinglePane(""),
            handleBackButton = false,
            childFactory = ::createChild
        )

    private fun createChild(
        configuration: Config,
        componentContext: ComponentContext
    ): Children =
        when (configuration) {
            is Config.SinglePane -> Children.SinglePane(
                projectSinglePane(
                    componentContext,
                    configuration.searchValue,
                    ::onSinglePaneOutput
                )
            )
            is Config.MultiPane -> Children.MultiPane(
                projectMultiPane(
                    componentContext,
                    configuration.searchValue,
                    ::onMultiPaneOutput
                )
            )
        }

    private fun onMultiPaneOutput(output: ProjectMultiPaneComponent.Output) {
        
    }

    private fun onSinglePaneOutput(output: ProjectSinglePaneComponent.Output) {

    }

    val childStack: Value<ChildStack<*, Children>> = stack

    fun onOutput(output: Output) {
        output(output)
    }
    sealed class Output

    fun onEvent(event: ProjectStore.Intent) {
        projectStore.accept(event)
    }

    sealed class Config : Parcelable {
        @Serializable
        data class SinglePane(val searchValue: String) : Config()

        @Serializable
        data class MultiPane(val searchValue: String) : Config()
    }

    sealed class Children {
        data class SinglePane(val component: ProjectSinglePaneComponent) : Children()
        data class MultiPane(val component: ProjectMultiPaneComponent) : Children()

    }
}

Screen

@Composable
fun ProjectScreen(component: ProjectComponent) {
    ProjectContent(component)
}

Contents

@Composable
internal fun ProjectContent(
    component: ProjectComponent,
) {

    val onEvent: (ProjectStore.Intent) -> Unit = component::onEvent


    BoxWithConstraints {
            Children(
                stack = component.childStack,
                animation = stackAnimation(fade()),
            ) {
                when (val child = it.instance) {
                    is ProjectComponent.Children.SinglePane -> ProjectSinglePaneScreen(child.component)
                    is ProjectComponent.Children.MultiPane -> ProjectMultiPaneScreen(child.component)
                }
            }
        val isMultiPaneRequired = this@BoxWithConstraints.maxWidth > 800.dp

        DisposableEffect(isMultiPaneRequired) {
            onEvent(if (isMultiPaneRequired) ProjectStore.Intent.MultiPane else ProjectStore.Intent.SinglePane)
            onDispose {  }
        }
    }
}

Store

interface ProjectStore: Store<ProjectStore.Intent, ProjectStore.State, Nothing> {

    sealed class Intent {
        data object SinglePane: Intent()
        data object MultiPane: Intent()
    }

    data class State(
        var isMultiPane: Boolean = true,
    )
}

StoreFactory

internal class ProjectStoreFactory(
    private val storeFactory: StoreFactory,
): KoinComponent {
    fun create(): ProjectStore =
        object : ProjectStore, Store<ProjectStore.Intent, ProjectStore.State, Nothing> by storeFactory.create(
            name = ProjectStore::class.simpleName,
            initialState = ProjectStore.State(),
            bootstrapper = SimpleBootstrapper(Unit),
            executorFactory = ::ExecutorImpl,
            reducer = ReducerImpl
        ) {}

    private sealed class Msg {
        data object SinglePane : Msg()
        data object MultiPane : Msg()
    }

    private inner class ExecutorImpl : CoroutineExecutor<ProjectStore.Intent, Unit, ProjectStore.State, Msg, Nothing>(appDispatchers.main) {
        override fun executeAction(action: Unit, getState: () -> ProjectStore.State) {
        }

        override fun executeIntent(intent: ProjectStore.Intent, getState: () -> ProjectStore.State): Unit =
            when (intent) {
                ProjectStore.Intent.MultiPane -> dispatch(Msg.MultiPane)
                ProjectStore.Intent.SinglePane -> dispatch(Msg.SinglePane)
            }
        }

    private object ReducerImpl: Reducer<ProjectStore.State, Msg> {
        override fun ProjectStore.State.reduce(msg: Msg): ProjectStore.State =
            when (msg) {
                Msg.SinglePane -> copy(isMultiPane = false)
                Msg.MultiPane -> copy(isMultiPane = true)
            }
    }
}

Project Multipane

Component

class ProjectMultiPaneComponent(
    componentContext: ComponentContext,
    storeFactory: StoreFactory,
    searchValue: String?,
    private val output: (Output) -> Unit,
): ComponentContext by componentContext {

    private val projectDetails: (ComponentContext, id: Long?, (ProjectDetailsComponent.Output) -> Unit) -> ProjectDetailsComponent = { childContext, id, output ->
        ProjectDetailsComponent(
            componentContext = childContext,
            storeFactory = storeFactory,
            id = id,
            output = output
        )
    }
    
    private val projectStore =
        instanceKeeper.getStore {
            ProjectListStoreFactory(
                storeFactory = storeFactory,
                searchValue = searchValue,
            ).create()
        }

    @OptIn(ExperimentalCoroutinesApi::class)
    val state: StateFlow<ProjectListStore.State> = projectStore.stateFlow

    private val navigation = StackNavigation<Config>()

    private val stack =
        childStack(
            source = navigation,
            initialConfiguration = Config.None,
            handleBackButton = false,
            childFactory = ::createChild
        )

    private fun createChild(
        configuration: Config,
        componentContext: ComponentContext
    ): Children =
        when (configuration) {
            is Config.Details -> Children.Details(
                projectDetails(
                    componentContext,
                    configuration.id,
                    ::onDetailsOutput
                )
            )
            is Config.None -> Children.None
        }

    val childStack: Value<ChildStack<*, Children>> = stack

    fun onEvent(event: ProjectListStore.Intent) {
        projectStore.accept(event)
    }

    fun onOutput(output: Output) {
        output(output)
    }

    fun onNewItemClicked() {
        navigation.push(Config.Details(null))
    }

    fun onItemClicked(id: Long) {
        navigation.push(Config.Details(id))
    }

    sealed class Output {

    }


    private fun onDetailsOutput(output: ProjectDetailsComponent.Output) {

    }

    sealed class Config : Parcelable {
        @Serializable
        data object None : Config()

        @Serializable
        data class Details(val id: Long?) : Config()
    }

    sealed class Children {
        data object None : Children()
        data class Details(val component: ProjectDetailsComponent) : Children()

    }

}

Screen

@Composable
internal fun ProjectMultiPaneScreen(component: ProjectMultiPaneComponent) {

    ProjectMultiPaneContent(
        component = component,
    )

}

Contents

@OptIn(ExperimentalMaterial3Api::class)
@Composable
internal fun ProjectMultiPaneContent(
    component: ProjectMultiPaneComponent,
) {

    val state by component.state.collectAsState()
    val onEvent: (ProjectListStore.Intent) -> Unit = component::onEvent
    val onOutput: (ProjectMultiPaneComponent.Output) -> Unit = component::onOutput

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text(text = "m Projects") },
                colors = TopAppBarDefaults.largeTopAppBarColors(
                    containerColor = MaterialTheme.colorScheme.background
                ),
                actions = {
                    IconButton(onClick = {
                        component.onNewItemClicked()
                    }) {
                        Icon(Icons.Default.Add, "Add New one")
                    }
                }
            )
        },
        modifier = Modifier.padding(LocalSafeArea.current)
    ) { paddingValue ->
        Box(
            modifier = Modifier.padding(paddingValue)
        ) {
            state.error?.let { error ->
                Box(
                    contentAlignment = Alignment.Center,
                    modifier = Modifier.fillMaxSize()
                ) {
                    Text(text = error)
                }
            }

            Row {
                PagingVerticalGrid(
                    content = { item: Project ->
                        ProjectItem(
                            project = item,
                            onClick = {
                                component.onItemClicked(item.id!!)
                            },
                        )
                    },
                    itemList = state.projectList,
                    isLoading = !state.isLastPageLoaded,
                    loadMoreItems = {
                        if (state.projectList.isEmpty()) return@PagingVerticalGrid
                        val nextPage = state.page + 1
                        onEvent(ProjectListStore.Intent.LoadProjectListByPage(page = nextPage))
                    },
                    loadContent = {
                        ProjectLoadingItem(
                            alpha = it
                        )
                    },
                    modifier = Modifier.fillMaxHeight().weight(1F)
                )

                Children(
                    component.childStack
                ) {
                    when (val child = it.configuration) {
                        is ProjectMultiPaneComponent.Children.Details -> ProjectDetailsScreen(child.component)
                        ProjectMultiPaneComponent.Children.None -> Unit
                    }
                }
            }
        }
    }
}

Singlepane

Component

class ProjectSinglePaneComponent(
    componentContext: ComponentContext,
    storeFactory: StoreFactory,
    searchValue: String?,
    private val output: (Output) -> Unit,
): ComponentContext by componentContext {

    private val projectList: (ComponentContext, searchValue: String?, (ProjectListComponent.Output) -> Unit) -> ProjectListComponent = { childContext, searchValue, output ->
        ProjectListComponent(
            componentContext = childContext,
            storeFactory = storeFactory,
            searchValue = searchValue,
            output = output
        )
    }
    
    private val projectDetails: (ComponentContext, id: Long?, (ProjectDetailsComponent.Output) -> Unit) -> ProjectDetailsComponent = { childContext, id, output ->
        ProjectDetailsComponent(
            componentContext = childContext,
            storeFactory = storeFactory,
            id = id,
            output = output
        )
    }
    
    private val projectStore =
        instanceKeeper.getStore {
            ProjectListStoreFactory(
                storeFactory = storeFactory,
                searchValue = searchValue,
            ).create()
        }

    @OptIn(ExperimentalCoroutinesApi::class)
    val state: StateFlow<ProjectListStore.State> = projectStore.stateFlow

    private val navigation = StackNavigation<Config>()

    private val stack =
        childStack(
            source = navigation,
            initialConfiguration = Config.List(""),
            handleBackButton = false,
            childFactory = ::createChild
        )

    private fun createChild(
        configuration: Config,
        componentContext: ComponentContext
    ): Children =
        when (configuration) {
            is Config.Details -> Children.Details(
                projectDetails(
                    componentContext,
                    configuration.id,
                    ::onDetailsOutput
                )
            )
            is Config.List -> Children.List(
                projectList(
                    componentContext,
                    configuration.searchValue,
                    ::onListOutput
                )
            )
        }

    val childStack: Value<ChildStack<*, Children>> = stack

    fun onEvent(event: ProjectListStore.Intent) {
        projectStore.accept(event)
    }

    fun onOutput(output: Output) {
        output(output)
    }
    sealed class Output {
    }

    private fun onListOutput(output: ProjectListComponent.Output) {
        when(output) {
            is ProjectListComponent.Output.NavigateToDetails -> navigation.bringToFront(Config.Details(output.id))
        }
    }

    private fun onDetailsOutput(output: ProjectDetailsComponent.Output) {

    }

    sealed class Config : Parcelable {
        @Serializable
        data class List(val searchValue: String) : Config()

        @Serializable
        data class Details(val id: Long?) : Config()
    }

    sealed class Children {
        data class List(val component: ProjectListComponent) : Children()
        data class Details(val component: ProjectDetailsComponent) : Children()

    }


}

Screen

@Composable
internal fun ProjectSinglePaneScreen(component: ProjectSinglePaneComponent) {

    ProjectSinglePaneContent(component)

}

Contents

@OptIn(ExperimentalMaterial3Api::class)
@Composable
internal fun ProjectSinglePaneContent(
    component: ProjectSinglePaneComponent,
) {

    val onEvent: (ProjectListStore.Intent) -> Unit = component::onEvent

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text(text = "Projects s") },
                colors = TopAppBarDefaults.largeTopAppBarColors(
                    containerColor = MaterialTheme.colorScheme.background
                ),
                actions = {
                    IconButton(onClick = {
                        onEvent(ProjectListStore.Intent.AddNew)
                    }) {
                        Icon(Icons.Default.Add, "Add New one")
                    }
                }
            )
        },
        modifier = Modifier.padding(LocalSafeArea.current)
    ) { paddingValue ->

       Children(
                modifier = Modifier.padding(paddingValue),
                stack = component.childStack,
                animation = stackAnimation(fade()),
            ) {
                when (val child = it.instance) {
                    is ProjectSinglePaneComponent.Children.Details -> ProjectDetailsScreen(child.component)
                    is ProjectSinglePaneComponent.Children.List -> ProjectListScreen(child.component)
                }
            }
        }

}

Project List

Component

class ProjectListComponent(
    componentContext: ComponentContext,
    storeFactory: StoreFactory,
    searchValue: String?,
    private val output: (Output) -> Unit,
): ComponentContext by componentContext {

    private val projectListStore =
        instanceKeeper.getStore {
            ProjectListStoreFactory(
                storeFactory = storeFactory,
                searchValue = searchValue,
            ).create()
        }

    @OptIn(ExperimentalCoroutinesApi::class)
    val state: StateFlow<ProjectListStore.State> = projectListStore.stateFlow

    fun onEvent(event: ProjectListStore.Intent) {
        projectListStore.accept(event)
    }

    fun onOutput(output: Output) {
        output(output)
    }
    sealed class Output {
        data class NavigateToDetails(val id: Long?) : Output()
    }


}

Store

interface ProjectListStore: Store<ProjectListStore.Intent, ProjectListStore.State, Nothing> {

    sealed class Intent {
        data class LoadProjectListByPage(val page: Long): Intent()
        data class UpdateSearchValue(val searchValue: String): Intent()
        data object AddNew: Intent()
        data class Details(val id: Long): Intent()
    }

    data class State(
        var page: Long = 0,
        var projectId: Long? = null,
        val isLoading: Boolean = false,
        val isLastPageLoaded: Boolean = false,
        val error: String? = null,
        val projectList: List<Project> = emptyList(),
        val searchValue: String = "",
    )
}

StoreFactory

internal class ProjectListStoreFactory(
    private val storeFactory: StoreFactory,
    private val searchValue: String?,
): KoinComponent {

    private val projectRepository by inject<ProjectRepository>()

    fun create(): ProjectListStore =
        object : ProjectListStore, Store<ProjectListStore.Intent, ProjectListStore.State, Nothing> by storeFactory.create(
            name = ProjectListStore::class.simpleName,
            initialState = ProjectListStore.State(),
            bootstrapper = SimpleBootstrapper(Unit),
            executorFactory = ::ExecutorImpl,
            reducer = ReducerImpl
        ) {}

    private sealed class Msg {
        data object AddNewProject : Msg()
        data class NavigateToProjectDetails(val id: Long) : Msg()
        data object ProjectDetailsDone : Msg()
        data object ProjectListLoading : Msg()
        data class ProjectListLoaded(val projectList: List<Project>) : Msg()
        data class ProjectListFailed(val error: String?) : Msg()
        data class SearchValueUpdated(val searchValue: String) : Msg()
        data object LastPageLoaded : Msg()
    }

    private inner class ExecutorImpl : CoroutineExecutor<ProjectListStore.Intent, Unit, ProjectListStore.State, Msg, Nothing>(
        appDispatchers.main) {
        override fun executeAction(action: Unit, getState: () -> ProjectListStore.State) {
            loadProjectListByPage(page = 0)
        }

        override fun executeIntent(intent: ProjectListStore.Intent, getState: () -> ProjectListStore.State): Unit =
            when (intent) {
                is ProjectListStore.Intent.LoadProjectListByPage -> loadProjectListByPage(intent.page, getState().isLastPageLoaded)
                is ProjectListStore.Intent.UpdateSearchValue -> dispatch(Msg.SearchValueUpdated(intent.searchValue))
                ProjectListStore.Intent.AddNew -> dispatch(Msg.AddNewProject)
                is ProjectListStore.Intent.Details -> dispatch(Msg.NavigateToProjectDetails(intent.id))
            }

        private var loadProjectListByPageJob: Job? = null
        private fun loadProjectListByPage(
            page: Long,
            isLastPageLoaded: Boolean = false
        ) {
            if (loadProjectListByPageJob?.isActive == true) return
            if (isLastPageLoaded) return

            loadProjectListByPageJob = scope.launch {
                dispatch(Msg.ProjectListLoading)

                projectRepository
                    .getProjectList(page)
                    .onSuccess { list ->
                        if (list.isEmpty()) {
                            dispatch(Msg.LastPageLoaded)
                        } else {
                            dispatch(Msg.ProjectListLoaded(list))
                        }
                    }
                    .onFailure { e ->
                        dispatch(Msg.ProjectListFailed(e.message))
                    }
            }
        }
    }

    private object ReducerImpl: Reducer<ProjectListStore.State, Msg> {
        override fun ProjectListStore.State.reduce(msg: Msg): ProjectListStore.State =
            when (msg) {
                is Msg.ProjectListLoading -> copy(isLoading = true)
                is Msg.ProjectListLoaded -> ProjectListStore.State(projectList = projectList + msg.projectList)
                is Msg.ProjectListFailed -> copy(error = msg.error)
                is Msg.SearchValueUpdated -> copy(searchValue = msg.searchValue)
                Msg.LastPageLoaded -> copy(isLastPageLoaded = true)
                Msg.AddNewProject -> copy(projectId = -1)
                is Msg.NavigateToProjectDetails -> copy(projectId = msg.id)
                is Msg.ProjectDetailsDone -> copy(projectId = null)
            }
    }
}

Screen

@Composable
internal fun ProjectListScreen(component: ProjectListComponent) {

    val state by component.state.collectAsState()

    ProjectListContent(
        state = state,
        onEvent = component::onEvent,
        onOutput = component::onOutput,
    )

}

Contents

@Composable
internal fun ProjectListContent(
    state: ProjectListStore.State,
    onEvent: (ProjectListStore.Intent) -> Unit,
    onOutput: (ProjectListComponent.Output) -> Unit,
) {
    PagingVerticalGrid(
        content = { item: Project ->
            ProjectItem(
                project = item,
                onClick = {
                    onEvent(ProjectListStore.Intent.Details(item.id!!))
                },
            )
        },
        itemList = state.projectList,
        isLoading = !state.isLastPageLoaded,
        loadMoreItems = {
            if (state.projectList.isEmpty()) return@PagingVerticalGrid
            val nextPage = state.page + 1
            onEvent(ProjectListStore.Intent.LoadProjectListByPage(page = nextPage))
        },
        loadContent = {
            ProjectLoadingItem(alpha = it)
        }
    )
}

Project Details

Component

class ProjectDetailsComponent(
    componentContext: ComponentContext,
    storeFactory: StoreFactory,
    id: Long?,
    private val output: (Output) -> Unit
): ComponentContext by componentContext {

    private val detailsStore =
        instanceKeeper.getStore {
            ProjectDetailsStoreFactory(
                storeFactory = storeFactory,
                projectId = id,
            ).create()
        }

    @OptIn(ExperimentalCoroutinesApi::class)
    val state: StateFlow<ProjectDetailsStore.State> = detailsStore.stateFlow

    fun onEvent(event: ProjectDetailsStore.Intent) {
        detailsStore.accept(event)
    }

    fun onOutput(output: Output) {
        output(output)
    }

    sealed class Output {
        data object NavigateBack : Output()
    }

}

Project Details

Component

class ProjectDetailsComponent(
    componentContext: ComponentContext,
    storeFactory: StoreFactory,
    id: Long?,
    private val output: (Output) -> Unit
): ComponentContext by componentContext {

    private val detailsStore =
        instanceKeeper.getStore {
            ProjectDetailsStoreFactory(
                storeFactory = storeFactory,
                projectId = id,
            ).create()
        }

    @OptIn(ExperimentalCoroutinesApi::class)
    val state: StateFlow<ProjectDetailsStore.State> = detailsStore.stateFlow

    fun onEvent(event: ProjectDetailsStore.Intent) {
        detailsStore.accept(event)
    }

    fun onOutput(output: Output) {
        output(output)
    }

    sealed class Output {
        data object NavigateBack : Output()
    }

}

Store

interface ProjectDetailsStore: Store<ProjectDetailsStore.Intent, ProjectDetailsStore.State, Nothing> {

    sealed class Intent {
        data class UpdateFavoriteState(val isFavorite: Boolean): Intent()
    }

    data class State(
        val isLoading: Boolean = false,
        val error: String? = null,
        val projectInfo: Project? = null
    )

}

StoreFactory

internal class ProjectDetailsStoreFactory(
    private val storeFactory: StoreFactory,
    private val projectId: Long?
): KoinComponent {
    private val projectRepository by inject<ProjectRepository>()

    fun create(): ProjectDetailsStore =
        object : ProjectDetailsStore, Store<ProjectDetailsStore.Intent, ProjectDetailsStore.State, Nothing> by storeFactory.create(
            name = ProjectDetailsStore::class.simpleName,
            initialState = ProjectDetailsStore.State(),
            bootstrapper = SimpleBootstrapper(Unit),
            executorFactory = ::ExecutorImpl,
            reducer = ReducerImpl
        ) {}

    private sealed class Msg {
        data object InfoLoading : Msg()
        data class InfoLoaded(val project: Project) : Msg()
        data class InfoFailed(val error: String?) : Msg()
        data class FavoriteStateUpdated(val isFavorite: Boolean) : Msg()
    }

    private inner class ExecutorImpl : CoroutineExecutor<ProjectDetailsStore.Intent, Unit, ProjectDetailsStore.State, Msg, Nothing>(appDispatchers.main) {
        override fun executeAction(action: Unit, getState: () -> ProjectDetailsStore.State) {
            loadProjectById(projectId)
        }

        override fun executeIntent(intent: ProjectDetailsStore.Intent, getState: () -> ProjectDetailsStore.State): Unit =
            when (intent) {
                is ProjectDetailsStore.Intent.UpdateFavoriteState -> toggleFavorite(projectId, intent.isFavorite)
            }

        private var loadProjectByIdJob: Job? = null
        private fun loadProjectById(id: Long?) {
            if (loadProjectByIdJob?.isActive == true) return

            loadProjectByIdJob = scope.launch {
                dispatch(Msg.InfoLoading)

                projectRepository
                    .getProjectById(id)
                    .onSuccess { project ->
                        dispatch(Msg.InfoLoaded(project))
                    }
                    .onFailure { e ->
                        dispatch(Msg.InfoFailed(e.message))
                    }
            }
        }

        private var toggleFavoriteJob: Job? = null
        private fun toggleFavorite(id: Long?, isFavorite: Boolean) {
            if (toggleFavoriteJob?.isActive == true) return

            toggleFavoriteJob = scope.launch {
//                repository.updateFavoriteState(
//                    name = name,
//                    isFavorite = isFavorite,
//                )

                dispatch(Msg.FavoriteStateUpdated(isFavorite))
            }
        }
    }

    private object ReducerImpl: Reducer<ProjectDetailsStore.State, Msg> {
        override fun ProjectDetailsStore.State.reduce(msg: Msg): ProjectDetailsStore.State =
            when (msg) {
                is Msg.InfoLoading -> ProjectDetailsStore.State(isLoading = true)
                is Msg.InfoLoaded -> ProjectDetailsStore.State(projectInfo = msg.project)
                is Msg.InfoFailed -> ProjectDetailsStore.State(error = msg.error)
                is Msg.FavoriteStateUpdated -> copy(projectInfo = projectInfo?.copy())
            }
    }

}

Screen

@Composable
internal fun ProjectDetailsScreen(component: ProjectDetailsComponent, modifier: Modifier = Modifier) {

    val state by component.state.collectAsState()

    DetailsContent(
        state = state,
        onEvent = component::onEvent,
        onOutput = component::onOutput,
        modifier = modifier,
    )

}

Contents

//TODO

[arkivanov]

This repository is old and not maintained. Please raise your question here: https://github.com/arkivanov/Decompose/discussions.