Singlepane/Multipane - Master/Details Decompose MVI

[Shahriyar13]

I tried to use Master/Details 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]

That's too much code to evaluate. It would be nice if you could upload a reproducer project instead.

It's not change when I change the screen size

As far as I can see, you are not using your ProjectState state that contains the isMultiPane flag. This might be the issue.

Hard to say, but this might because you are changing the state (Msg.NavigateToProjectDetails -> copy(projectId = msg.id)) instead of just pushing the required configuration to the stack. Most likely you don't need a Store for this.

Please check how are you working with your Stores. You have to use states somehow (e.g subscribe and do something).

[Shahriyar13]

https://github.com/Shahriyar13/Kara_EasyProject_CMP

in code -> shared/src/commonMain/kotlin/app/duss/easyproject/presentation/ui/project

in UI: Main Screen Menu -> Project

[Shahriyar13]

I've been working on a project and have encountered some challenges. Considering your expertise, I was wondering if you could spare a moment to provide some guidance and assistance. I am going to use this as my future base project, so any suggestions will help me a lot, Your insights would be highly valuable in making improvements. Thank you in advance for your time. The most challenging things are use navigation as you can see in root component and Main component, and then have a Multipane in it, and implementing a TabView each tab have a unique component in this project which use side menu as a main module. Best regards.

root -> landing (Splash)
     -> login
     -> main (side menu) -> dashboard
                         -> databaseComponent (Tabview/BottomNavigationBar not implemented yet) -> 5 child
                         -> projects (Multipane)
                         ...

[arkivanov]

Thanks for the answers! Have you checked the Multi-Pane sample?

[Shahriyar13]

Yes, at first, I got this idea exactly from the link you mentioned. However, You used:

private val navigation = SimpleNavigation<(NavigationState) -> NavigationState>()

In the project I am working on, we mostly use Store/StoreFactory and StackNavigation:

    private val navigation = StackNavigation<Config>()

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

I encountered a problem because I couldn't succeed in finding a way to compare the differences.
And I find most common between mine project and the code you wrote in badoo decompose discussion.

[arkivanov]

Yes, I can see that your implementation is way different from the sample I linked. The reason why children (Generic Navigation) is used instead of childStack is because when modes are switching the List child should keep it's state (not recreated). So in the linked example, the List child (ArticleListComponent) is always created, and the Details child (ArticleDetailsComponent) is created when the an item is clicked. The UI just displays the two components either one on top of another, or side by side.

I would recommend you following the same approach. What do you think? After that I could help with some specific issues.

[Shahriyar13]

OK I will try again, but can you help me how I replace these with something else?:

import com.badoo.reaktive.disposable.scope.DisposableScope
import com.badoo.reaktive.observable.map
import com.badoo.reaktive.observable.notNull
import com.badoo.reaktive.subject.behavior.BehaviorSubject

I don't want to use reaktive libs

[arkivanov]

You can try using MutableStateFlow and collect it on Dispatchers.Main.immediate instead.