gistfile1.txt

var ToolbarSearch = React.createClass({
	render : function() {
		return (
			<form className="navbar-form navbar-center-pos" role="search">
		    	<div className="input-group" id="search-input">
			  		  <span className="input-group-addon " id="basic-addon1"><i className="glyphicon glyphicon-search"></i></span>
			          <input type="text" id="search-control" className="form-control" placeholder="Search" value={this.props.searchText} onChange={this.handleChange} reff="searchTextInput"/>
		        </div>
			</form>	
		);	
	},
	handleChange : function() {
		this.props.onSearch(this.refs.searchTextInput.getDomNode().value);
	}
	
});

var ToolbarAdd = React.createClass({
	render : function() {
		return (
			<ul className="nav navbar-nav navbar-left">	  
				<li><a href="{this.props.href}" id="add-group-popover"><span className="ion ion-plus ion-2x">&nbsp; Add</span></a></li>
			</ul>
		);
    }
});

var Toolbar = React.createClass({ 
	render : function() {
		return (
			<nav className="navbar navbar-toolbar">
				<div className="container-fluid">
					<ToolbarSearch/>
					<ToolbarAdd href='test'/>					
				</div>
			</nav>		
		);	
		
	}
});

var UserItem = React.createClass({
	render : function() {
		return (
			<div className="group-user">
				<img src={this.props.profile_image}></img>
				<p className="name">{this.props.name}</p>							
				<p className="role">{this.props.role.description}</p>
			</div>
		);		
	}
});

var UserInviteItem = React.createClass({
	render : function() {
		return (
			<div className="group-user group-user-invite">
				<img src={this.props.profile_image}></img>
				<p className="name">{this.props.name}</p>							
				<p className="role">{this.props.role.description}</p>
			</div>
		);		
	}
});

var UserAddItem = React.createClass({
	render : function() {
		return (
			<div className="group-user group-user-add">
				<a href="#" onClick={this.handleAdd}>
					<img src="/images/user-add-white-bg.png"></img>
					<p>Invite User</p>
				</a>
			</div>
		);	
	},
	
	handleAdd : function() {
		alert(1);
		console.log(1);
	}
});

var GroupItem = React.createClass({ 
	render : function() {
	
		var logo_html = this.props.logo ? (<div className="logo"><img src={this.props.logo}></img></div>) : ('');
		
		var user_items = this.props.users.map(function(user) {
			return <UserItem       name={user.name} key={user.id} profile_image={user.profile_image} role={user.role}/>			
		});
		
		var user_invites = this.props.invites.map(function(invite) {
			return <UserInviteItem name={invite.name} key={invite.id} profile_image={invite.profile_image} role={invite.role}/>
		});
		
		
		return (
			<div className="col-sm-12">	
				{logo_html}		
				<h3>{this.props.name}</h3>
				<div className="row">
					{user_items}		
					{user_invites}	
					<UserAddItem group-id={this.props.id}/>
				</div>
			</div>
		);		
	}
	
});


var GroupsList = React.createClass({ 
	render : function() {
	
	    groupItems = this.props.items.map(function(group) {
	    	return <GroupItem name={group.name} key={group.id} id={group.id} logo={group.logo} users={group.users} invites={group.invites}/>
	    });
	
	    return (
			<div className="row">	    
			{groupItems}
			</div>
	    );
	}	
});






var UserScreen = React.createClass({
	getInitialState : function() {
		return  { 'searchText' : '' } ;	
	},
	onSearch: function(text) {
		this.setState({ searchText: text });
	},
	render : function() {

		return (
			<div>
				<Toolbar searchText={this.state.searchText} onSearch={this.handleSearch}/>
				<div className="container">
					<GroupsList items={this.props.groups} searchText={this.state.searchText}/>
				</div>
			</div>
		);		
	}
});