text: /*
   * HomePage
   *
   * This is the first thing users see of our App, at the '/' route
   */
  
  import React from 'react';
  import Helmet from 'react-helmet';
  import { Link } from 'react-router';
  import { connect } from 'react-redux';
  import { createStructuredSelector } from 'reselect';
  import styled from 'styled-components';
  import { makeSelectRepos, makeSelectLoading, makeSelectError } from 'containers/App/selectors';
  import H2 from 'components/H2';
  import Button from 'components/Button';
  import 'bootstrap/dist/css/bootstrap.css';
  import { loadRepos } from '../App/actions';
  
  const ReactDataGrid = require('react-data-grid');
  
  const EmptyRowsView = React.createClass({
    render() {
      return (<div>Nothing to show</div>);
    }
  });
  
  
  export class HistoryPage extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
    /**
     * when initial state username is not null, submit the form to load repos
     */
    componentDidMount() {
      if (this.props.username && this.props.username.trim().length > 0) {
        this.props.onSubmitForm();
      }
    }
  
    render() {
      const { loading, error, repos } = this.props;
      const reposListProps = {
        loading,
        error,
        repos,
      };
  
      const rows = [];
      
      const columns = [
        { key: 'id', name: 'Title'},
        { key: 'title', name: 'Artist' },
        { key: 'count', name: 'Time', width: 150 }];
  
      const rowGetter = function(i) {
        return rows[i];
      };
  
  
      return (
        <div>
        <h1>Play List</h1>
        <br/>
        <ReactDataGrid
          columns={columns}
          rowGetter={rowGetter}
          rowsCount={rows.length}
          minHeight={400}
          emptyRowsView={EmptyRowsView} />
        </div>
      );
    }
  }
  
  HistoryPage.propTypes = {
    loading: React.PropTypes.bool,
    error: React.PropTypes.oneOfType([
      React.PropTypes.object,
      React.PropTypes.bool,
    ]),
    repos: React.PropTypes.oneOfType([
      React.PropTypes.array,
      React.PropTypes.bool,
    ]),
    onSubmitForm: React.PropTypes.func,
    onChangeUsername: React.PropTypes.func,
  };
  
  export function mapDispatchToProps(dispatch) {
    return {
      onChangeUsername: (evt) => dispatch(changeUsername(evt.target.value)),
      onSubmitForm: (evt) => {
        if (evt !== undefined && evt.preventDefault) evt.preventDefault();
        dispatch(loadRepos());
      },
    };
  }
  
  const mapStateToProps = createStructuredSelector({
    repos: makeSelectRepos(),
    loading: makeSelectLoading(),
    error: makeSelectError(),
  });
  
  // Wrap the component to inject dispatch and state into it
  export default connect(mapStateToProps, mapDispatchToProps)(HistoryPage);
  