text: import React, { Component } from 'react';
  import {connect} from 'react-redux';
  import { bindActionCreators } from 'redux';
  
  
  import Drawer from 'react-md/lib/Drawers';
  import Toolbar from 'react-md/lib/Toolbars';
  import Button from 'react-md/lib/Buttons';
  import Avatar from 'react-md/lib/Avatars';
  import ListItem from 'react-md/lib/Lists/ListItem';
  import List from 'react-md/lib/Lists/List';
  import FontIcon from 'react-md/lib/FontIcons';
  //import {toggleSave} from '../actions/ToolbarActions';
  
  import cx from 'classnames';
  import {NAME as examplesName, selector, actionCreators as exampleActions} from 'features/examples';
  import {actionCreators as repoActions} from 'features/repos/actions';
  
  import {contextTypes} from 'utils/ReactDecorators';
  import {TOOLBAR_HEIGHT} from 'constants/ViewConstants';
  
  const LoadIcon = () => <FontIcon>cloud_download</FontIcon>;
  
  @connect(selector, (dispatch) => {
    return{
       actions: {
       			...bindActionCreators(exampleActions, dispatch), 
                	fetchExamples: bindActionCreators(repoActions.fetchExamples, dispatch),
                	fetchExample :  bindActionCreators(repoActions.fetchExample, dispatch),
   	
    	}
    }
  })
  @contextTypes({ store: React.PropTypes.object })
  export default class ExampleManager extends Component {
  	
  	constructor(props){
  		super(props);
  		this._load = this._load.bind(this);
  	} 
  	
  	componentDidMount(){
  		this.props.actions.fetchExamples();
  	}
  
  	render(){
  		const {examples, visible} = this.props;
  		const close = <Button icon onClick={this.props.actions.toggleVisible}>close</Button>;
  		let dialogue = null;
  
  		const _examples = examples.map((example)=>{
  			const avatar = <Avatar src={example.icon}  role="presentation" />
  			return <ListItem onClick={this._load.bind(null, example.name, example.username)} key={example.name}
  						leftAvatar={avatar}
  				        rightIcon={<LoadIcon />}
  				        primaryText={example.name}
  				        secondaryText={example.description || "no description provided"}
  				      />
  					
  		});
  
  		const header = (
        		<Toolbar
        			colored
        			title={`databox app examples`}
          		actions={close}
          		className="md-divider-border md-divider-border--bottom"
          		style={{background:"#303030"}}
        		/>
      	);
  
  
  		return  <div>
  					<Drawer 
  							position="right" 
  							header={header}
  							visible={visible}
  							onVisibilityToggle={()=>{}}
  				           >
  				            <div style={{height: `calc(100vh - ${TOOLBAR_HEIGHT}px)`, overflowY:'auto'}}>
  				            <List style={{width:"100%"}}>
  	          					{_examples}
  	          				</List>
  	          				</div>
  	        		</Drawer>
  	        	</div>
  	}
  
  	_load(name, username){
  		this.props.actions.fetchExample(name, username);
  	}
  }