Marty.js dependsOn test

main.jsx

/** @jsx React.DOM */
var _ = require('lodash'),
    React = require('react'),
    Marty = require('marty');

var API = {
    User: Marty.createStateSource({
        type: 'http',
        getAll: function() {
            return this.get('/').then(function(response) {
                SourceActions.receiveUsers([{name:'dan', id:'42'}]);
            });
        }
    }),
    Friend: Marty.createStateSource({
        type: 'http',
        getAll: function() {
            return this.get('/').then(function(response) {
                SourceActions.receiveFriends([0]);
            });
        }
    })
};

var ActionConstants = Marty.createConstants([
    'RECEIVE_USERS',
    'RECEIVE_FRIENDS'
]);

var SourceActions = Marty.createActionCreators({
    receiveUsers: ActionConstants.RECEIVE_USERS(function(users) {
        this.dispatch(users);
    }),
    receiveFriends: ActionConstants.RECEIVE_FRIENDS(function(friends) {
        this.dispatch(friends);
    })
});

var UserStore = Marty.createStore({
    handlers: {
        setUsers: ActionConstants.RECEIVE_USERS
    },
    getInitialState: function() {
        return {};
    },
    setUsers: function(users) {
        this.state.users = users;
        this.hasChanged();
    },
    getByIndex: function(index) {
        return this.state.users[index];
    },
    getAll: function() {
        return this.fetch({
            id: 1,
            locally: function() {
                return this.state.users;
            },
            remotely: function() {
                return API.User.getAll();
            }
        })
    }
});

var FriendStore = Marty.createStore({
    handlers: {
        setFriends: ActionConstants.RECEIVE_FRIENDS
    },
    getInitialState: function() {
        return {};
    },
    setFriends: function(friends) {
        this.state.friends = [];
        for(var i=0; i<friends.length; i++) {
            this.state.friends.push(UserStore.getByIndex(friends[i]));
        }
        this.hasChanged();
    },
    getAll: function() {
        return this.fetch({
            id: 2,
            dependsOn: [UserStore.getAll()],
            locally: function() {
                return this.state.friends;
            },
            remotely: function() {
                return API.Friend.getAll();
            }
        })
    }
});

var FriendState = Marty.createStateMixin({
    listenTo: FriendStore,
    getState: function() {
        return {
            friends: FriendStore.getAll()
        }
    }
});

var App = React.createClass({
    mixins: [FriendState],
    render: function() {
        console.log('app state is', this.state);
        return this.state.friends.when({
            done: function(friends) {
                return <div>first friend: {friends[0].name}</div>
            },
            pending: function() {
                return <div>Loading...</div>
            },
            failed: function() {
                return <div>Sorry, there was an error loading friends!</div>
            }
        });
    }
});

React.render(<App />, document.getElementById('app-container'));

_.extend(window, {
    API: API,
    UserStore: UserStore,
    FriendStore: FriendStore,
    App: App
});