Optional store & Dependent state

[DavidKmn]

Let's say we have a home module (parent vc) inside of which we have a feed of groceries (1st child view controller) in a table view and then a in the bottom right corner a on sale feature (2nd child vc) that hides/shows based on if there are any products in the visible cells in the feed of groceries (from the 1st child vc) that are on sale. So we have the parent vc that contains the product feed feature and the on sale indicator feature. Ideally we would want to have the 2nd child vc to be added to the view hierarchy and then hide/show based when we have any products on sale in the feed (1st child vc). The issue is that we can no longer init the 2nd child vc with any store since this store has a state that is only there when there are products on sale in the feed. Ideally we would want to have the 2nd child vc initialised and just show/hide (e.g. animate the alpha in/out) + update the state based on the items we catch to be on sale in the feed. I can think of a 'dirty' approach to get this working however was interested to see what the others think...

To be more clear I have jotted down a quick example (it can be compiled):

import ComposableArchitecture
import Combine
import UIKit

struct HomeFeatureState: Equatable {
    var feed: FeedFeatureState
    var onSaleIndicator: OnSaleIndicatorState {
        get {
            if let products = feed.products {
                let onSale = products.filter({ $0.isOnSale })
                return .init(
                    firstVisibleProductOnSale: onSale.first,
                    productsOnSaleCount: onSale.count
                )
            }
            
            // what do we do in this case as this does seem weird (althought the logic works)
            return .init(firstVisibleProductOnSale: nil, productsOnSaleCount: 0)
        }
        
        set {
            // this also is a bit strange since the state is just for viewing, should not be modifying (however since we require a WritableKeyPath in pullback we have to provide the setter
        }
    }
}

extension FeedFeatureState {
    var products: [Product]? {
        if case let .loaded(products) = self {
            return products
        }
        return nil
    }
}

enum HomeFeatureAction: Equatable {
    case feed(FeedFeatureAction)
    case onSaleIndicator(OnSaleIndicatorAction)
}

enum FeedFeatureState: Equatable {
    case loading
    case loaded(products: [Product])
}

enum FeedFeatureAction: Equatable {
    case viewDidLoad
    case didScrollToItemAtIndex(Int)
}

struct Product: Equatable {
    let id: Int
    let name: String
    let isOnSale: Bool
}

struct OnSaleIndicatorState: Equatable {
    var firstVisibleProductOnSale: Product?
    var productsOnSaleCount: Int
}

enum OnSaleIndicatorAction: Equatable {
    case viewDidLoad
}

final class HomeFeatureViewController: UIViewController {
    let store: Store<HomeFeatureState, HomeFeatureAction>
    
    init(store: Store<HomeFeatureState, HomeFeatureAction>) {
        self.store = store
        super.init(nibName: nil, bundle: nil)
    }
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        
        let feedVC = FeedFeatureViewController(store: store.scope(state: { $0.feed }, action: { .feed($0) }))
        feedVC.willMove(toParent: self)
        self.addChild(feedVC)
        view.addSubview(feedVC.view)
        feedVC.view.frame = self.view.frame
        feedVC.didMove(toParent: self)
        
        let onSaleIndicatorVC = OnSaleIndicatorFeatureViewController(store: store.scope(state: { $0.onSaleIndicator }, action: { .onSaleIndicator($0) }))
        onSaleIndicatorVC.willMove(toParent: self)
        self.addChild(onSaleIndicatorVC)
        view.addSubview(onSaleIndicatorVC.view)
        onSaleIndicatorVC.view.frame = CGRect.init(x: view.frame.maxX - 200, y: view.frame.maxY - 200, width: 100, height: 100)
        onSaleIndicatorVC.didMove(toParent: self)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

final class FeedFeatureViewController: UIViewController {
    
    let viewStore: ViewStore<FeedFeatureState, FeedFeatureAction>
    
    init(store: Store<FeedFeatureState, FeedFeatureAction>) {
        viewStore = ViewStore(store)
        super.init(nibName: nil, bundle: nil)
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        viewStore.send(.viewDidLoad)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

final class OnSaleIndicatorFeatureViewController: UIViewController {
    
    let viewStore: ViewStore<OnSaleIndicatorState, OnSaleIndicatorAction>
    private var cancellables: Set<AnyCancellable> = .init()
    
    init(store: Store<OnSaleIndicatorState, OnSaleIndicatorAction>) {
        viewStore = ViewStore(store)
        super.init(nibName: nil, bundle: nil)
    }
    
    // not laying these out, just here for example purposes
    private let firstVisibleProductOnSaleLabel = UILabel()
    private let productsOnSaleCountLabel = UILabel()

    override func viewDidLoad() {
        super.viewDidLoad()
        viewStore.publisher.firstVisibleProductOnSale.sink { [weak self] (product) in
            self?.view.isHidden = product == nil // is this the way to go about it?
            self?.firstVisibleProductOnSaleLabel.text = product?.name
        }.store(in: &cancellables)
        
        viewStore.publisher.productsOnSaleCount.sink { [weak self] (count) in
            self?.firstVisibleProductOnSaleLabel.text = "\(count)"
        }.store(in: &cancellables)
        
        viewStore.send(.viewDidLoad)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

[stephencelis]

@DavidKmn store.ifLet is precisely the tool for turning a store of optional state into a store of non-optional state:

swift-composable-architecture/Sources/ComposableArchitecture/UIKit/IfLetUIKit.swift

Line 46 in 68aa3c1

public func ifLet<Wrapped>(

The subscription block emits whenever the state switches from nil to non-nil and vice versa, so you can create or tear down this optional view accordingly.

You can find more example uses in the TicTacToe demo application in this repo.

[DavidKmn]

Hey @stephencelis, Yes I am familiar with ifLet feature. However I don't think this is what is needed. Let me further explain. The issue is not with the presentation/pushing logic of the view controller. The issue is that the OnSaleIndicatorState is dependent on what is currently visible in the FeedFeatureState:

1. When in a loading state there are no on sale items so ideally the OnSaleViewController could be hidden, however I am unclear how to model this. We probably want to add OnSaleIndicatorViewController once and then just toggle its visibility. If so then where and how should this state be passed/translated.
2. After the feed has loaded we need to get updates of scroll events from the feed and check the visible products in the loaded feed, these in turn then need to drive the OnSaleState:
   firstVisibleProductOnSaleName is the name of the first visible product in the feed that is on sale
   productsOnSaleCount is the count of the visible on sale products.

[DavidKmn]

@stephencelis I have updated the example to show what I mean, hopefully this clarifies it.