content: /*
   * HomePage
   *
   * This is the first thing users see of our App, at the '/' route
   */
  
  // colin
  import moment from 'moment';
  
  import React from 'react';
  import { connect } from 'react-redux';
  import { push } from 'react-router-redux';
  import shouldPureComponentUpdate from 'react-pure-render/function';
  
  import { createSelector } from 'reselect';
  
  import {
    selectRepos,
    selectLoading,
    selectError,
  } from 'containers/App/selectors';
  
  import {
    selectUsername,
    selectNoti,
  } from './selectors';
  
  import { changeUsername } from './actions';
  import { loadRepos } from '../App/actions';
  
  import RepoListItem from 'containers/RepoListItem';
  import Button from 'components/Button';
  import H2 from 'components/H2';
  import List from 'components/List';
  import ListItem from 'components/ListItem';
  import LoadingIndicator from 'components/LoadingIndicator';
  import config from 'config';
  
  import styles from './styles.scss';
  
  moment.locale('zh-CN');
  console.log(config.apiRoot);
  
  import Notifications from 'react-notification-system-redux';
  
  const notificationOpts = {
    // uid: 'once-please', // you can specify your own uid if required
    title: 'Hey, it\'s good to see you!',
    message: 'Now you can see how easy it is to use notifications in React!',
    position: 'tr',
    autoDismiss: 0,
    action: {
      label: 'Click me!!',
      callback: () => alert('clicked!')
    }
  };
  
  export class HomePage extends React.Component {
    constructor() {
      super();
  
      this.createNotify = this.createNotify.bind(this);
    }
  
    shouldComponentUpdate = shouldPureComponentUpdate;
  
    /**
     * Changes the route
     *
     * @param  {string} route The route we want to go to
     */
    openRoute = (route) => {
      this.props.changeRoute(route);
    };
  
    /**
     * Changed route to '/features'
     */
    openFeaturesPage = () => {
      this.openRoute('/features');
    };
  
    createNotify() {
      this.props.dispatch(
        Notifications.success(notificationOpts)
      );
    }
  
    render() {
      let mainContent = null;
  
      // Show a loading indicator when we're loading
      if (this.props.loading) {
        mainContent = (<List component={LoadingIndicator} />);
  
      // Show an error if there is one
      } else if (this.props.error !== false) {
        const ErrorComponent = () => (
          <ListItem item={'Something went wrong, please try again!'} />
        );
        mainContent = (<List component={ErrorComponent} />);
  
      // If we're not loading, don't have an error and there are repos, show the repos
      } else if (this.props.repos !== false) {
        mainContent = (<List items={this.props.repos} component={RepoListItem} />);
      }
  
      const {notifications} = this.props;
      //Optional styling
      const style = {
        NotificationItem: { // Override the notification item
          DefaultStyle: { // Applied to every notification, regardless of the notification level
            margin: '10px 5px 2px 1px'
          },
  
          success: { // Applied only to the success notification item
            color: 'red'
          }
        }
      };
  
      return (
        <article>
          <div>
            <section className={`${styles.textSection} ${styles.centered}`}>
              <H2>React.js 项目实践</H2>
              <h6>{moment([2007, 0, 29]).fromNow()}</h6>
              <p>A highly scalable, offline-first foundation with the best DX and a focus on performance and best practices</p>                      
            </section>
            <section className={styles.textSection}>
              <H2>Try me!</H2>
              <form className={styles.usernameForm} onSubmit={this.props.onSubmitForm}>
                <label htmlFor="username">Show Github repositories by
                  <span className={styles.atPrefix}>@</span>
                  <input
                    id="username"
                    className={styles.input}
                    type="text"
                    placeholder="mxstbr"
                    value={this.props.username}
                    onChange={this.props.onChangeUsername}
                  />
                </label>
              </form>
              {mainContent}
            </section>
            <Button handleRoute={this.openFeaturesPage}>Features</Button>
            <button onClick={this.createNotify}>
              点击弹出通知
            </button>
          </div>
          <Notifications notifications={notifications} style={style} />
        </article>
      );
    }
  }
  
  HomePage.propTypes = {
    changeRoute: React.PropTypes.func,
    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,
    username: React.PropTypes.string,
    onChangeUsername: React.PropTypes.func,
    notifications: React.PropTypes.array,
  };
  
  function mapDispatchToProps(dispatch) {
    return {
      onChangeUsername: (evt) => dispatch(changeUsername(evt.target.value)),
      changeRoute: (url) => dispatch(push(url)),
      onSubmitForm: (evt) => {
        evt.preventDefault();
        dispatch(loadRepos());
      },
  
      dispatch,
    };
  }
  
  // Wrap the component to inject dispatch and state into it
  export default connect(createSelector(
    selectRepos(),
    selectUsername(),
    selectLoading(),
    selectError(),
    selectNoti(),
    (repos, username, loading, error, notifications) => ({ repos, username, loading, error, notifications})
  ), mapDispatchToProps)(HomePage);
  