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

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

        return (
            <ul className="list">{users}</ul>
        );
    }
});

var App = React.createClass({
    getInitialState : function() {
        return { selected : null }
    },
    onSelectListItem: function(user) {
        this.setState({selected: user === this.state.selected ? null : user});
    },
    render: function() {
        return (
            <div>
                <List selected={this.state.selected}
                    users={this.props.users}
                    onSelectItem={this.onSelectListItem} />
                <Details selected={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(
    <App users={users} />,
    document.body
);