Disable "Confirm" button conditionally in toolbar of .sheet on adding item

[appfrosch]

I am using the prerelease/1.0 branch.

Consider a list I want to add an item to via a .sheet. I want to enable adding only if a title has been provided, thus disabling the confirm button if item.title is nil.

My problem has to do with scope I guess: I am calling .sheet on the parent, display the child with its viewstore and append a .toolbar to that view. The confirm button of this toolbar should only be active if a title is given for the item.

How can I scope correctly here/find out about that state in the parent?
Any hints on a relevant episode on this would be helpful!

Here's the .sheet modifier for that:

struct ItemListDomainView: View {
    let store: StoreOf<ItemListDomain>
    var body: some View {
        WithViewStore(self.store, observe: { $0 }) { viewStore in
            NavigationStack {
                List {
                     //…               
                }
                //…
                .sheet(
                    store: self.store.scope(
                        state: \.$destination,
                        action: ItemListDomain.Action.destination
                    ),
                    state: /ItemListDomain.Destination.State.addNewItem,
                    action: ItemListDomain.Destination.Action.addNewItem
                ) { addItemViewStore in
                    NavigationStack {
                        ItemDomainView(store: addItemViewStore)
                            .toolbar {
                                ToolbarItem(placement: .cancellationAction) {
                                    Button("Cancel") {
                                        viewStore.send(.addItemCancelButtonTapped)
                                    }
                                }
                                ToolbarItem(placement: .confirmationAction) {
                                    Button("Confirm") {
                                        viewStore.send(.addItemConfirmButtonTapped)
                                    }
                                    .disabled(true)//what needs to go here to conditionally disable the button?
                                }
                            }
                    }
                }
            }
        }
    }
}

And here's a running project for this:

import ComposableArchitecture
import SwiftUI

@main
struct poc_tca_sheet_w_disable_able_confirm_btnApp: App {
    var body: some Scene {
        WindowGroup {
            ItemListDomainView(
                store: .init(
                    initialState: ItemListDomain.State(
                        items: [
                            .init()
                        ]
                    ),
                    reducer: ItemListDomain()
                )
            )
        }
    }
}

struct Item: Equatable, Identifiable {
    let id: UUID
    var title: String
    init(
        id: UUID = .init(),
        title: String = ""
    ) {
        self.id = id
        self.title = title
    }
}

struct ItemListDomain: Reducer {
    struct State: Equatable {
        var items: IdentifiedArrayOf<Item>
        
        @PresentationState
        var destination: Destination.State?
        
        init(
            items: IdentifiedArrayOf<Item> = [],
            destination: Destination.State? = nil
        ) {
            self.items = items
            self.destination = destination
        }
    }
    enum Action: Equatable {
        case destination(PresentationAction<Destination.Action>)
        
        case addItemButtonTapped
        case addItemCancelButtonTapped
        case addItemConfirmButtonTapped
    }
    var body: some ReducerOf<Self> {
        Reduce { state, action in
            switch action {
            case .addItemButtonTapped:
                state.destination = .addNewItem(ItemDomain.State(item: Item()))
                return .none
            case .addItemCancelButtonTapped:
                state.destination = nil
                return .none
            case .addItemConfirmButtonTapped:
                defer { state.destination = nil }
                guard case let .addNewItem(itemDomainState) = state.destination
                else {
                    XCTFail("Cannot add a new bike as `addNewBike` is unexpectedly nil.")
                    return .none
                }
                state.items.insert(itemDomainState.item, at: 0)
                return .none
            case .destination(.dismiss):
                state.destination = nil
                return .none
            case .destination:
                return .none
            }
        }
        .ifLet(\.$destination, action: /Action.destination) { Destination() }
        ._printChanges()
    }
}

extension ItemListDomain {
    struct Destination: Reducer {
        enum State: Equatable {
            case addNewItem(ItemDomain.State)
        }
        enum Action: Equatable {
            case addNewItem(ItemDomain.Action)
        }
        var body: some ReducerOf<Self> {
            Scope(state: /State.addNewItem, action: /Action.addNewItem) { ItemDomain() }
                ._printChanges()
        }
    }
}

struct ItemListDomainView: View {
    let store: StoreOf<ItemListDomain>
    var body: some View {
        WithViewStore(self.store, observe: { $0 }) { viewStore in
            NavigationStack {
                List {
                    if viewStore.items.isEmpty {
                        Text("There are no items yet…")
                    }
                    ForEach(viewStore.items) { item in
                        VStack(alignment: .leading) {
                            Text(item.id.uuidString)
                                .font(.caption2)
                            Text(item.title)
                        }
                    }
                }
                .toolbar {
                    ToolbarItem(placement: .automatic) {
                        Button {
                            viewStore.send(.addItemButtonTapped)
                        } label: {
                            Label("Add Item", systemImage: "plus")
                        }
                    }
                }
                .sheet(
                    store: self.store.scope(
                        state: \.$destination,
                        action: ItemListDomain.Action.destination
                    ),
                    state: /ItemListDomain.Destination.State.addNewItem,
                    action: ItemListDomain.Destination.Action.addNewItem
                ) { addItemViewStore in
                    NavigationStack {
                        ItemDomainView(store: addItemViewStore)
                            .toolbar {
                                ToolbarItem(placement: .cancellationAction) {
                                    Button("Cancel") {
                                        viewStore.send(.addItemCancelButtonTapped)
                                    }
                                }
                                ToolbarItem(placement: .confirmationAction) {
                                    Button("Confirm") {
                                        viewStore.send(.addItemConfirmButtonTapped)
                                    }
                                    .disabled(true)//what needs to go here to conditionally disable the button?
                                }
                            }
                    }
                }
            }
        }
    }
}

struct Previews: PreviewProvider {
    static var previews: some View {
        ItemListDomainView(
            store: Store(
                initialState: ItemListDomain.State(
                    items: []
                ),
                reducer: ItemListDomain()
            )
        )
        .previewDisplayName("Empty List")
        
        ItemListDomainView(
            store: Store(
                initialState: ItemListDomain.State(
                    items: [.init(title: "Foo"), .init()]
                ),
                reducer: ItemListDomain()
            )
        )
        .previewDisplayName("Non-empty List")
    }
}

struct ItemDomain: Reducer {
    struct State: Equatable {
        @BindingState var item: Item
    }
    enum Action: BindableAction, Equatable {
        case binding(BindingAction<State>)
    }
    var body: some ReducerOf<Self> {
        BindingReducer()
        Reduce { state, action in
            return .none
        }
    }
}

struct ItemDomainView: View {
    let store: StoreOf<ItemDomain>
    var body: some View {
        WithViewStore(self.store, observe: { $0 }) { viewStore in
            Form {
                Text(viewStore.item.id.uuidString)
                    .font(.caption2)
                TextField("New item", text: viewStore.binding(\.$item.title))
            }
        }
    }
}

[mbrandonw]

Hi @appfrosch, the disabled state should be derivable from ItemListDomain, either as a computed property on ItemListDomain.State or additional state.

You will also want to heavily reduce the amount of state you are observing. Right now you are observing everything in ItemListDomainView:

WithViewStore(self.store, observe: { $0 }) { viewStore in

…even though it doesn't seem like you are currently using any of the state. This is not going to be performant and going to become problematic over time. Read our article on this topic to understand how to fix this.

[appfrosch]

That’s awesome, thanks. That was exactly the push in the right direction. Here’s what I came up with:

struct ItemListDomain: Reducer {
    struct State: Equatable {
        //…
        var addingItemIsValid: Bool? {
            if case let .addNewItem(itemState) = destination {
                return itemState.item.title.isEmpty
            }
            return nil
        }
    }
    //…
}

I can the use it like this:

.disabled(viewStore.addingItemIsValid ?? false)

I know that I have so far ignored optimizing state observation, I will really have to educate myself on that.
Thanks for the link, I will look into it.