content: import React from 'react';
  import { connect } from 'react-redux';
  import MenuPage from '../shared/MenuPage';
  import TemplatesGrid from '../shared/templates/TemplatesGrid';
  import SearchBar from '../shared/SearchBar';
  import NoData from '../shared/NoData';
  import Loader from 'react-loader';
  import { getTemplatesRequest, deleteTemplateRequest } from '../../actions/dashboardActions';
  import { addFlashMessage } from '../../actions/flashMessagesActions';
  import PropTypes from 'prop-types';
  
  class SurveyTemplates extends React.Component {
    constructor() {
      super();
      this.state = {
        items: [],
        term: '',
        isLoaded: false
      };
      this.onCreateNewTemplate = this.onCreateNewTemplate.bind(this);
      this.filterData = this.filterData.bind(this);
    }
  
    componentDidMount() {
      this.populateData();
    }
  
    componentWillReceiveProps(nextProps) {
      this.setState({
        items: nextProps.templates
      });
    }
  
    populateData() {
      this.props.getTemplatesRequest()
        .then(() => {
          this.initialData = this.props.templates;
          this.setState({
            items: this.initialData,
            isLoaded: true
          });
        })
        .catch(err => {
          this.props.addFlashMessage({
            type: 'warning',
            text: `${err.response.data.error}`
          });
        });
    }
  
    filterData(config) {
      this.setState({ items: config.data, term: config.term });
    }
  
    onCreateNewTemplate() {
      this.context.router.history.push('/new', true);
    }
  
    render() {
      const { term, items, isLoaded } = this.state;
      const { addFlashMessage, deleteTemplateRequest } = this.props;
  
      return (
        <div className="container-fluid">
          <div className="row">
            <aside className="col-md-3">
              <MenuPage />
            </aside>
            <section className="col-md-9">
              <div className="panel panel-default">
                <div className="panel-heading grey">
                  <h3 className="panel-title">Survey Templates</h3>
                </div>
                <div className="panel-body">
                  <div className="row">
                    <div className="col-md-4">
                      <button
                        onClick={this.onCreateNewTemplate}
                        className="btn btn-success btn-sm"
                      >
                        Create New Template
                      </button>
                    </div>
                    <div className="col-md-4 col-md-offset-4">
                      <SearchBar
                        userSearch={false}
                        term={term}
                        data={this.initialData}
                        update={this.filterData}
                      />
                    </div>
                  </div>
                  <br />
  
                  <Loader color="#a9a9a9" loaded={isLoaded}>
                    {items.length === 0 && <NoData />}
                    <TemplatesGrid
                      dataSet={items}
                      deleteTemplateRequest={deleteTemplateRequest}
                      addFlashMessage={addFlashMessage}
                    />
                  </Loader>
                </div>
              </div>
            </section>
          </div>
        </div>
      );
    }
  }
  
  SurveyTemplates.propTypes = {
    templates: PropTypes.array,
    getTemplatesRequest: PropTypes.func.isRequired,
    deleteTemplateRequest: PropTypes.func.isRequired,
    addFlashMessage: PropTypes.func.isRequired
  };
  
  SurveyTemplates.contextTypes = {
    router: PropTypes.object.isRequired
  };
  
  function mapStateToProps(state) {
    return {
      templates: state.templates.templates
    };
  }
  
  export default connect(mapStateToProps, { getTemplatesRequest, addFlashMessage, deleteTemplateRequest })(SurveyTemplates);
  