How to pass data between instances of router?

[evjava]

Hi!

Is there a best/recommended way to pass data between instances of router? (instance here is T in Router<C, T>)

Example: I have components A and B (editor of A)

• if B is opened from A(x), I want to edit x to y and then pass it back to A (stack: [A(x)] → [B(x), A(x)] → [B(y), A(x)] → [A(y)])
• if B is opened from other places (i.e. creates new A), I want to edit new to y, close B and create A(y) (stack: [C] → [B(new), C] → [B(y), C] → [A(y), C])

[arkivanov]

Hello! Perhaps, you are looking to pass a result back to a previous component, not just data. If so, I recommend to use the power of usual callbacks passed via constructor. Your component B can accept a callback as follows:

class B(private val onFinished: (SomeResult) -> Unit)

Then the parent component (e.g. Root) can push B into the stack, and when onFinished is called, pop B out of the stack and deliver the result to A.

Please see the related discussion in the "old" parent repository: badoo/Decompose#201

[arkivanov]

Could you please elaborate what components A, B and C display and what is the responsibility of the component B? Also what is "y from xs picked"? Also I didn't quite understand the following case:

is B is called from C, it just open x. (stack: [B] → [B(xs)] → [B(x from xs picked)] → [C(x), B(xs)])

If B is called from C, then why the initial stack is just [B]?

[evjava]

Looks like I'm confused. To clarify the cases, let's consider todoapp from Decompose examples, but with some enchancements:

• N: notes component, there are also
  • date field in notes, notes ordered by date
  • calendar icon in the toolbar
• C: calendar component
• S(n): settings component, there are the setting with some selected note n

Case 1: visit C, pick date d, then N should be opened and scrolled to the nearest to d position.
(stack: [] -> [C] -> [C(d)] -> [N(d), C])

Case 2: visit N, then C, pick date d, then calendar should be closed and old N should be scrolled to d.
(stack: [] -> [N] -> [C, N] -> [C(d), N] -> [N(d)])

Case 3: visit S(n), pick "change selected note", choose in N new note m, then N should be closed and S should update n to m.
(stack: [] -> [S(n)] -> [N, S(n)] -> [N(m), S(n)] -> [S(m)])

(the first item in list is the active component, other are backstacked)

[arkivanov]

Thanks, now it's clear! In this case I suggest the following approach. Just a rough example, hopefully it will shed some light.

interface N {
    fun scrollTo(date: Date)
}

class NComponent(
    initialDate: Date?,
    onNoteSelected: (Note) -> Unit,
    onShowC: () -> Unit,
) : N {
    override fun scrollTo(date: Date) {
    }
}

interface C

class CComponent(onDateSelected: (Date) -> Unit) : C

interface S

class SComponent(note: Note, onChangeSelectedNote: () -> Unit) : S

interface Root {

    sealed interface Child
    class ChildN(val component: N) : Child
    class ChildC(val component: C) : Child
    class ChildS(val component: S) : Child
}

class RootComponent(componentContext: ComponentContext) : ComponentContext by componentContext {

    private val router =
        router<Config, Root.Child>(
            initialConfiguration = Config.N(initialDate = Date()),
            childFactory = ::createChild,
        )

    private fun createChild(config: Config, componentContext: ComponentContext): Root.Child =
        when (config) {
            is Config.N -> Root.ChildN(createN(config))
            is Config.C -> Root.ChildC(createC(config))
            is Config.S -> Root.ChildS(createS(config))
        }

    private fun createN(config: Config.N): N =
        NComponent(
            initialDate = config.initialDate,
            onNoteSelected = { note ->
                if (router.state.value.backStack.any { it.configuration is Config.S }) {
                    // Remove N and S from the top of the stack and push the new S
                    router.navigate { stack ->
                        stack.dropLastWhile { it is Config.N || it is Config.S } + Config.S(note = note)
                    }
                } else {
                    // There is no S in the stack, just push S
                    router.push(Config.S(note = note))
                }
            },
            onShowC = {
                router.push(Config.C)
            }
        )

    private fun createC(config: Config.C): C =
        CComponent(
            onDateSelected = { date ->
                if (router.state.value.backStack.isEmpty()) {
                    // The back stack is empty, just push N
                    router.push(Config.N(initialDate = date))
                } else {
                    // The previous component should be N, pop C and update N 
                    router.pop()
                    (router.activeChild.instance as? Root.ChildN)?.component?.scrollTo(date = date)
                }
            }
        )

    private fun createS(config: Config.S): S =
        SComponent(
            note = config.note,
            onChangeSelectedNote = {
                if (router.state.value.backStack.none { it.configuration is Config.N }) {
                    router.push(Config.N(initialDate = null))
                } else {
                    router.pop()
                }
            },
        )

    sealed interface Config : Parcelable {
        @Parcelize
        data class N(val initialDate: Date?) : Config

        @Parcelize
        object C : Config

        @Parcelize
        data class S(val note: Note) : Config
    }
}

[arkivanov]

Or you can avoid ifs by creating separate configurations for each case.

interface Root {

    sealed interface Child
    class ChildNotes(val component: Notes) : Child
    class ChildCalendar(val component: Calendar) : Child
    class ChildSettings(val component: Settings) : Child
}

class RootComponent(componentContext: ComponentContext) : ComponentContext by componentContext {

    private val router =
        router<Config, Root.Child>(
            initialConfiguration = Config.NotesInitial, // or CalendarInitial, or SettingsInitial
            handleBackButton = true,
            childFactory = ::createChild,
        )

    private fun createChild(config: Config, componentContext: ComponentContext): Root.Child =
        when (config) {
            is Config.CalendarInitial -> Root.ChildCalendar(createCalendarInitial())
            is Config.NotesFromCalendar -> Root.ChildNotes(createNotesFromCalendar(config))
            is Config.NotesInitial -> Root.ChildNotes(createNotesInitial())
            is Config.CalendarFromNotes -> Root.ChildCalendar(createCalendarFromNotes())
            is Config.SettingsInitial -> Root.ChildSettings(createSettingsInitial(config))
            is Config.NotesFromSettings -> Root.ChildNotes(createNotesFromSettings())
        }

    // Case 1
    private fun createCalendarInitial(): Calendar =
        CalendarComponent(
            onDateSelected = { router.push(Config.NotesFromCalendar(initialDate = it)) }
        )
    
    private fun createNotesFromCalendar(config: Config.NotesFromCalendar) = NotesComponent(
        initialDate = config.initialDate,
        onNoteSelected = { /* Maybe do something? */ },
        onShowC = { /* Maybe do something? */ },
    )

    // Case 2
    private fun createNotesInitial() = NotesComponent(
        initialDate = null,
        onNoteSelected = { /* Maybe do something? */ },
        onShowC = { router.push(Config.CalendarFromNotes) },
    )

    private fun createCalendarFromNotes() = CalendarComponent(
        onDateSelected = {
            router.pop()
            (router.state.value.activeChild.instance as? Root.ChildNotes)?.component?.scrollTo(date = it)
        }
    )

    // Case 3
    private fun createSettingsInitial(config: Config.SettingsInitial) = SettingsComponent(
        note = config.note,
        onChangeSelectedNote = { router.push(Config.NotesFromSettings) }
    )

    private fun createNotesFromSettings() = NotesComponent(
        initialDate = null,
        onNoteSelected = { note ->
            router.navigate { listOf(Config.SettingsInitial(note = note)) }
        },
        onShowC = { /* Maybe do something? */ }
    )

    sealed interface Config : Parcelable {
        @Parcelize
        object CalendarInitial : Config

        @Parcelize
        data class NotesFromCalendar(val initialDate: Date?) : Config

        @Parcelize
        object NotesInitial : Config

        @Parcelize
        object CalendarFromNotes : Config

        @Parcelize
        data class SettingsInitial(val note: Note) : Config

        @Parcelize
        object NotesFromSettings : Config
    }
}

[evjava]

Thank you for detailed examples, all clear. I'll continue to use my "target"-based approach, but glad to see that Decompose is flexible enough to support many approaches.