Using StateView and StateKeys

[sahandnayebaziz]

Using StateView and StateKeys

[sahandnayebaziz]

Hey @alexvbush, you're missing a couple of things that are easy to fix.

First, the StateKey that you use in place() should be an enum. You would think "Okay, what things am I going to pass into subviews from where I am now?" and then for each one of those things, make them an option in an enum you come up with. Something like

enum STStashStateViewKey: StateKey {
    case stringForChildView
}

/* the name of this enum can be anything, it does not have to have "STStashStateView" 
anywhere to be used with that view. The convention I have been using is to make a 
new StateKey enum at each view with that view's name at the beginning, give it a case
for each one of the things that particular view will pass to its subviews, and move on. */

Once you have that, you can place() a subview and pass it whatever you want under one of the cases from your new StateKey enum (here, stringForChildView is a case). Then use prop(withValueForKey: StateKey) inside that subview with the same case of your StateKey to use whatever was passed in.

This way, you get Xcode autocomplete on the enums and you have a finite, easy to look at list of all the things one view possibly passes to its subviews.

Something like

enum STStashStateViewKey: StateKey {
    case stringForChildView
}




class STStashStateView: StateView {
    override func render() {

        let labelView1 = place(STStashChildView.self, key: "labelContainerView1") { make in
            make.center.equalTo(self)
        }
        labelView1.prop(forKey: STStashStateViewKey.stringForChildView, is: "I'm the first label")
    }
}

/* now that STStashStateView is using the .stringForChildView case 
of STStashStateViewKey to pass the string "I'm the first label" to labelView1,
labelView1 can grab the string it's expecting with the same key... */




class STStashChildView: StateView {
    override func render() {

        print("rendering STStashChildView")

        let label = UILabel()
        label.text = prop(withValueForKey: STStashStateViewKey.stringForChildView) as? String
        place(label, key: "label") { (make) in
            make.center.equalTo(self)
            make.size.equalTo(self)
        }

    }
}

/* here, STStashChildView expects a string under the same key */

Now to have a couple of subviews and pass some data to one and some to the other, you can use a couple of instances of STStashChildView, give them strings using the key from STStashStateViewKey, and decide which string to actually give them by keeping the strings for each in state, and passing one to one and the other to the other.

The next code sample will also show you how to set initial state. You should use this method because it happens at the right time in init.

class STStashStateView: StateView {

    override func getInitialState() -> [String : Any?] {
        return [
            "stringForFirstChildView": "Hello world",
            "stringForSecondChildView": "Today was a good day"
        ]
    }

    override func render() {

        print("rendering STStashStateView")


        let labelView1 = place(STStashChildView.self, key: "labelContainerView1") { make in
            make.top.equalTo(self)
            make.size.equalTo(200)
        }
        labelView1.prop(forKey: STStashStateViewKey.stringForChildView, isLinkedToKeyInState: "stringForFirstChildView")

        let labelView2 = place(STStashChildView.self, key: "labelContainerView2") { (make) in
            make.bottom.equalTo(self)
            make.size.equalTo(200)
        }
        labelView2.prop(forKey: STStashStateViewKey.stringForChildView, isLinkedToKeyInState: "stringForSecondChildView")
    }

    override func viewWillUpdate(newState: [String : Any?], newProps: [StateViewProp]) {
        print("viewWillUpdate in STStashStateView: \(newProps)")
    }

}

/* now labelView1 will always show whatever is in state here for stringForFirstChildView
and labelView2 will always show whatever is in state here for stringForSecondChildView.
(I also changed the constraints from both being second to top, bottom so they don't overlap */

Now, any time those values change, these views will update.

Also, don't forget to add some constraints when you do something like view.addSubview(stashStateView) because stashStateView may not appear without them.

[sahandnayebaziz]

@alexvbush closing this issue in a couple days if I don't hear from you :)