http - home integration

// child components
import Banner from './Banner';
import MainView from './MainView';

// modules for a redux-connected react component
import React from 'react';
import {connect} from 'react-redux';

// our http client
import agent from '../../agent';

// extract appName from state
const mapStateToProps = (state) => ({
  appName: state.appName,
});

// put action creators in props
const mapDispatchToProps = dispatch => ({
  // dispatch HOME_PAGE_LOADED with promise for articlelist
  onLoad: payload =>
    dispatch({ type: 'HOME_PAGE_LOADED', payload }),
});

class Home extends React.Component {
  // on mount, dispatch HOME_PAGE_LOADED with promise for all articles
  componentWillMount() {
    this.props.onLoad(agent.Articles.all());
  }

  render() {
    // render a Banner followed by a MainView with a 'Popular Tags' sidebar
    return (
      <div className="home-page">
        <Banner appName={this.props.appName} />
        <div className="container page">
          <div className="row">
            <MainView />
            <div className="col-md-3">
              <div className="sidebar">
                <p>Popular Tags</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

// connect Home to redux and export it
export default connect(mapStateToProps, mapDispatchToProps)(Home);