How to implement a dynamic section items

[kakhaberikiknadze]

So I've been wondering how to properly implement dynamic section items using TCA.

What I want to achieve is to have a settings view that would render different components like Picker, Toggle etc. dynamically through the view state. I've got a naive working solution using Vanilla SwiftUI Binding and IdentifiedArray (worked without IdentifiedArray as well but it takes less lines with identified one).

Naive working solution (works on iOS and macOS)

struct AudioSettingsReducer: ReducerProtocol {
    struct State: Equatable {
        var title: String
        var sections: IdentifiedArrayOf<Section>
    }
    
    enum Action: Equatable {
        case updateToggleItem(ToggleItem.ID, Bool, Section.ID)
        case updatePickerItem(PickerItem.ID, PickerItem.Option.ID, Section.ID)
    }
    
    var body: some ReducerProtocolOf<Self> {
        Reduce { state, action in
            switch action {
            case let .updateToggleItem(id, isOn, sectionID):
                if var section = state.sections[id: sectionID] {
                    if let item = section.items[id: id] {
                        guard case var .toggle(toggleItem) = item else { return .none }
                        toggleItem.isOn = isOn
                        
                        section.items[id: id] = .toggle(toggleItem)
                        state.sections[id: sectionID] = section
                    }
                }
                return .none
            case let .updatePickerItem(id, selection, sectionID):
                if var section = state.sections[id: sectionID] {
                    if let item = section.items[id: id] {
                        guard case var .picker(pickerItem) = item else { return .none }
                        pickerItem.selectedItem = selection
                        
                        section.items[id: id] = .picker(pickerItem)
                        state.sections[id: sectionID] = section
                    }
                }
                return .none
            }
        }
    }
}

// MARK: - Section

extension AudioSettingsReducer {
    struct Section: Equatable, Identifiable {
        enum ID {
            case general
        }
        
        let id: ID
        var title: String
        var items: IdentifiedArrayOf<Item>
    }
}

// MARK: - Item

extension AudioSettingsReducer {
    enum Item: Equatable, Identifiable {
        case picker(PickerItem)
        case toggle(ToggleItem)
        
        var id: String {
            switch self {
            case let .picker(item):
                return item.id
            case let .toggle(item):
                return item.id
            }
        }
    }
    
    struct PickerItem: Equatable, Identifiable {
        struct Option: Hashable, Identifiable {
            let id: String
            let title: String
        }
        
        let id: String
        var title: String
        var options: [Option]
        var selectedItem: Option.ID
    }
    
    struct ToggleItem: Equatable, Identifiable {
        let id: String
        var title: String
        var isOn: Bool
    }
}

// MARK: - Initial

extension AudioSettingsReducer.State {
    static var initial: Self {
        @Dependency(\.uuid) var uuid
        let options: [AudioSettingsReducer.PickerItem.Option] = [
            .init(id: uuid().uuidString, title: "Option 1"),
            .init(id: uuid().uuidString, title: "Option 2"),
            .init(id: uuid().uuidString, title: "Option 3")
        ]
        return .init(
            title: "Audio settings",
            sections: [
                .init(
                    id: .general,
                    title: "General settings",
                    items: [
                        .picker(
                            .init(
                                id: uuid().uuidString,
                                title: "Audio device",
                                options: options,
                                selectedItem: options.first!.id
                            )
                        ),
                        .toggle(
                            .init(id: uuid().uuidString, title: "Toggle something", isOn: false)
                        )
                    ]
                )
            ]
        )
    }
}

struct AudioSettingsScene: View {
    @ObservedObject private var viewStore: ViewStoreOf<AudioSettingsReducer>
    
    init(store: StoreOf<AudioSettingsReducer>) {
        viewStore = .init(store, observe: { $0 })
    }
    
    var body: some View {
        VStack {
            ForEach(viewStore.sections) { section in
                Section(section.title) {
                    VStack(alignment: .leading) {
                        ForEach(section.items) { sectionItem in
                            item(section: section, sectionItem: sectionItem)
                        }
                    }
                    
                }
            }
        }
        .padding()
    }
    
    @ViewBuilder func item(
        section: AudioSettingsReducer.Section,
        sectionItem: AudioSettingsReducer.Item
    ) -> some View {
        switch sectionItem {
        case let .picker(pickerItem):
            Picker(
                pickerItem.title,
                selection: .init(
                    get: {
                        pickerItem.selectedItem
                    },
                    set: {
                        viewStore.send(
                            .updatePickerItem(pickerItem.id, $0, section.id)
                        )
                    }
                )
            ) {
                ForEach(pickerItem.options) { option in
                    Text(option.title)
                }
            }
        case let .toggle(toggleItem):
            Toggle(
                toggleItem.title,
                isOn: .init(
                    get: { toggleItem.isOn },
                    set: {
                        viewStore.send(
                            .updateToggleItem(toggleItem.id, $0, section.id)
                        )
                    }
                )
            )
        }
    }
}

Screen.Recording.2023-05-27.at.14.20.12.mov