import {viewFromComponent} from "viewUtilities";

class MyListComponent extends React.Component {
    render() {
        // serialized Backbone collection
        const {items = [] } this.props;
        // do stuff with items
    }
}

class MySingleComponent extends React.component {
    render() {
        // serialized Backbone model, with whatever your real fields are
        const {a, b, c} = this.props;
        // do stuff with fields
    }
}

const MyListView = viewFromComponent(MyListComponent, {
    observe : {
        // Every time one of these events is triggered, the collection will be serialized
        // and the HOC will call this.setState()
        collection : "add remove reset",
    },
    actions : {
        addNewItem(newItem) {
            // This function runs in the context of the HOC generated by viewFromComponent,
            // so `this` is actually the parent of your "real" component.  This gives you
            // access to the model/collection instance to let you mutate them, while keeping
            // your real component unaware of Backbone entirely.
            // Yes, this is sorta-kinda mutating "props" in a way, but it's an incremental
            // step towards turning this into a component callback or Redux action creator.
            this.props.collection.add(newItem);
        }
    }
});

const MySingleView = viewFromComponent(MySingleComponent, {
    observe : {
        model : "change"
    },
    actions : {
        setSomeField(newValue) {
            this.props.model.set("someField", someValue);
        }
    }
}, {staticClassProp : 123}, {id : "myViewId", el : "#divToAttachTo"});

const collectionView = new MyListView({collection : someBackboneCollection});

const modelView = new MySingleView({model : someBackboneModel});