var ListItem = React.createClass({
    onSelect : function() {
        this.props.onSelect(this.props.user);
    },
    render : function() {
        return (
            <li onClick={this.onSelect} className={this.props.selected === this.props.user ? "selected" : ""}>
                {this.props.user.firstname} {this.props.user.lastname}
            </li>
        )
    }
});

var List = React.createClass({
    onSelect: function(user) {
        this.props.onSelect(user);
    },
    render : function() {
        return (
            <ul className="list">
                {this.props.users.map(function(user) {
                    return <ListItem user={user} onSelect={this.onSelect} selected={this.props.selected} />
                }, this)}
            </ul>
        );
    }
});

var TabPage = React.createClass({
    render : function() {
        return <div className="tabpage">{this.props.user}</div>
    }
})

var Application = React.createClass({
    getInitialState : function() {
        return { selected : false }
    },
    onSelect : function(user) {
        this.setState({ selected : user});
    },
    render : function() {
        return (
            <div>
                <List users={this.props.users} onSelect={this.onSelect} selected={this.state.selected} />
                <TabPage user={this.state.selected} />
            </div>
        );
    }
});

var users = [];
for(var i = 0; i < 40; i += 1) {
    users.push({
        firstname : faker.name.firstName(),
        lastname : faker.name.lastName(),
        email : faker.internet.email()
    });
}

React.render(
    <Application users={users} />,
    document.body
);