State based navigation 2

[JaapWijnen]

Recently discussed state based navigation in #1398
I have a slightly more complex example however in which a similar problem is popping up. Hoping to get some tips on how to avoid/fix this!

Quick overview of the structure:

• There's a main view called AListView that contains an array of A.State. The view itself renders a list of ACardViews card state is contained within A.State
• A.State also contains B.State which in turn contains C.State
• the cards display two buttons B and C and a toggle.
• pressing B will navigate you to the corresponding BView
• pressing the C button on the card will navigate you to the BView or CView depending on the state of the cWorks toggle in ACard.State
• When navigated to the BView there's a button that will navigate you to the CView regardless of if ACard.State.cWorks is true.

Problem: When I press the B button I navigate to the BView for that entity of A.State, when I press the "Button to C" I run into the issue that navigation seems to re render/trigger and it ends up in the BView instead of CView.

Help would be very much appreciated! (I suspect the issue is due to the state in the Route Enum changing when showC is set to true this in turn updates AList.State.route which re triggers the navigation link. Not sure how to work around that however!

If anything is unclear please let me know.

Here's some example code:

import SwiftUI
import ComposableArchitecture

@main
struct TestABCApp: App {
    var body: some Scene {
        WindowGroup {
            NavigationView {
                AListView(store: .init(
                    initialState: .init(
                        allA: [
                            .init(
                                id: UUID(),
                                cWorks: false,
                                showCFromB: false,
                                bText: ""
                            ),
                            .init(
                                id: UUID(),
                                cWorks: false,
                                showCFromB: false,
                                bText: ""
                            ),
                            .init(
                                id: UUID(),
                                cWorks: false,
                                showCFromB: false,
                                bText: ""
                            )
                        ],
                        route: .none
                    ),
                    reducer: AList.reducer.debug(),
                    environment: ()
                ))
            }
        }
    }
}

enum Route: Equatable {
    case b(Identified<ACard.State.ID, B.State>)
    case c(Identified<ACard.State.ID, C.State>)
}

enum AList {
    struct State: Equatable {
        var allA: IdentifiedArrayOf<A.State>
        
        var route: Route? {
            didSet {
                guard let route else {
                    return
                }
                switch route {
                case .b(let object):
                    allA[id: object.id]?.b = object.value
                case .c(let object):
                    allA[id: object.id]?.b.cState = object.value
                }
            }
        }
    }
    
    enum Action: Equatable {
        case a(id: A.State.ID, action: A.Action)
        case b(B.Action)
        case c(C.Action)
        case resetRoute
    }

    static let reducer = Reducer<State, Action, Void>.combine(
        A.reducer.forEach(
            state: \AList.State.allA,
            action: /Action.a,
            environment: { _ in }
        ),
        B.reducer
            .pullback(state: \Identified.value, action: .self, environment: { $0 })
            .pullback(state: /Route.b, action: /Action.b, environment: { $0 })
            .pullback(state: \.route, action: .self, environment: { $0 }),
        C.reducer
            .pullback(state: \Identified.value, action: .self, environment: { $0 })
            .pullback(state: /Route.c, action: /Action.c, environment: { $0 })
            .pullback(state: \.route, action: .self, environment: { $0 }),
        Reducer<State, Action, Void> { state, action, _ in
            switch action {
            case .a(id: let id, action: .card(.bButtonTapped)):
                if let thing = state.allA[id: id] {
                    let derp = Identified(thing.b, id: id)
                    state.route = .b(derp)
                }
                return .none
            case .a(id: let id, action: .card(.cButtonTapped)):
                if let thing = state.allA[id: id] {
                    if thing.card.cWorks {
                        let derp = Identified(thing.b.cState, id: id)
                        state.route = .c(derp)
                    } else {
                        let derp = Identified(thing.b, id: id)
                        state.route = .b(derp)
                    }
                }
                return .none
            case .a(id: let id, action: let action):
                return .none
            case .b:
                return .none
            case .c:
                return .none
            case .resetRoute:
                state.route = .none
                return .none
            }
        }
    )
}

struct AListView: View {
    var store: Store<AList.State, AList.Action>
    
    struct ViewState: Equatable {
        var route: Route?
    }
    
    var body: some View {
        WithViewStore(store, observe: { state in ViewState(route: state.route) }) { viewStore in
            List {
                ForEachStore(store.scope(state: \.allA, action: AList.Action.a)) { aStore in
                    ViewACard(store: aStore.scope(state: \.card, action: A.Action.card))
                }
            }.listStyle(.plain)
                .background {
                    IfLetStore(store.scope(state: \.route)) { routeStore in
                        NavigationLink(
                            destination: SwitchStore(routeStore) {
                                CaseLet(
                                    state: /Route.b,
                                    action: AList.Action.b
                                ) { bStore in
                                    ViewB(store: bStore.scope(state: \.value))
                                }
                                CaseLet(
                                    state: /Route.c,
                                    action: AList.Action.c
                                ) { cStore in
                                    ViewC(store: cStore.scope(state: \.value))
                                }
                            },
                            isActive: viewStore.binding(
                                get: { $0.route != .none },
                                send: .resetRoute
                            )
                        ) {
                            EmptyView()
                        }
                    }
                }
        }
    }
}

enum A {
    struct State: Equatable, Identifiable {
        var id: UUID
        var cWorks: Bool
        var showCFromB: Bool
        var bText: String
        
        var b: B.State {
            get {
                .init(
                    id: self.id,
                    showC: self.showCFromB,
                    text: self.bText
                )
            }
            set {
                self.id = newValue.id
                self.showCFromB = newValue.showC
                self.bText = newValue.text
            }
        }
        
        var card: ACard.State {
            get {
                .init(
                    id: self.id,
                    cWorks: self.cWorks
                )
            }
            set {
                self.id = newValue.id
                self.cWorks = newValue.cWorks
            }
        }
    }
    
    enum Action: Equatable {
        case card(ACard.Action)
    }
    
    static let reducer = Reducer<State, Action, Void>.combine(
        ACard.reducer.pullback(
            state: \.card,
            action: /Action.card,
            environment: { _ in }
        ),
        Reducer<State, Action, Void> { state, action, _ in
            switch action {
            case .card:
                return .none
            }
        }
    )
}


enum ACard {
    struct State: Equatable, Identifiable {
        let id: UUID
        var cWorks: Bool
    
        init(
            id: UUID,
            cWorks: Bool
        ) {
            self.id = id
            self.cWorks = cWorks
        }
    }
    
    enum Action: Equatable {
        case cWorks(Bool)
        case bButtonTapped
        case cButtonTapped
    }
    
    static let reducer = Reducer<State, Action, Void>.combine(
        Reducer<State, Action, Void> { state, action, _ in
            switch action {
            case let .cWorks(isWorking):
                state.cWorks = isWorking
                return .none
            case .bButtonTapped:
                return .none
            case .cButtonTapped:
                return .none
            }
        }
    )
}

struct ViewACard: View {
    var store: Store<ACard.State, ACard.Action>
    
    init(store: Store<ACard.State, ACard.Action>) {
        self.store = store
    }
    
    struct ViewState: Equatable {
        var cWorks: Bool
    }
    
    var body: some View {
        WithViewStore(
            store,
            observe: { state in
                ViewState(cWorks: state.cWorks)
            }
        ) { viewStore in
            VStack {
                Text("This is A")
                
                Toggle(isOn: viewStore.binding(get: \.cWorks, send: ACard.Action.cWorks)) {
                    Text("C works")
                }
                
                HStack {
                    Button("B") { viewStore.send(.bButtonTapped) }.buttonStyle(.bordered)
                    Button("C") { viewStore.send(.cButtonTapped) }.buttonStyle(.bordered)
                }
            }
        }
    }
}

enum B {
    struct State: Equatable {
        var id: UUID
        var showC: Bool
        var text: String
        
        init(
            id: UUID,
            showC: Bool,
            text: String
        ) {
            self.id = id
            self.showC = showC
            self.text = text
        }
        
        var cState: C.State {
            get {
                .init(id: self.id)
            }
            set {
                self.id = newValue.id
            }
        }
    }
    
    enum Action: Equatable {
        case cIsActive(Bool)
        case c(C.Action)
        case textChanged(String)
    }
    
    static let reducer = Reducer<State, Action, Void>.combine(
        C.reducer.pullback(state: \.cState, action: /Action.c, environment: { }),
        Reducer<State, Action, Void> { state, action, _ in
            switch action {
            case .c:
                return .none
                
            case let .cIsActive(isActive):
                state.showC = isActive
                return .none
            
            case .textChanged(let newText):
                state.text = newText
                return .none
            }
        }
    )
}

struct ViewB: View {
    var store: Store<B.State, B.Action>
    
    struct ViewState: Equatable {
        var showC: Bool
        var text: String
    }
    
    var body: some View {
        WithViewStore(store, observe: { state in ViewState(showC: state.showC, text: state.text) }) { viewStore in
            VStack {
                Text("This is B")
                TextField("text:", text: viewStore.binding(
                    get: \.text,
                    send: { .textChanged($0) }
                ))
                NavigationLink(
                    destination: ViewC(store: store.scope(
                        state: \.cState,
                        action: B.Action.c
                    )),
                    isActive: viewStore.binding(get: \.showC, send: B.Action.cIsActive),
                    label: { Text("Button to C") }
                )
            }
        }
    }
}

enum C {
    struct State: Equatable {
        var id: UUID
    }
    
    enum Action: Equatable {
        
    }
    
    static let reducer = Reducer<State, Action, Void> { state, action, _ in
        return .none
    }
}

struct ViewC: View {
    var store: Store<C.State, C.Action>
    
    var body: some View {
        WithViewStore(store) { viewStore in
            VStack {
                Text("Hello from C")
                Text("This C belongs to A(\(viewStore.id))")
            }
        }
    }
}