import React, {PropTypes} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {
  fetchNote,
  fetchNoteTitles,
  postNote
} from '../actions/note';

const propTypes = {
  fetchNote: PropTypes.func,
  fetchNoteTitles: PropTypes.func,
  note: PropTypes.object,
  postNote: PropTypes.func
};

/**
 * App
 */
export default class App extends React.Component {

  /**
   * fetch notes
   */
  componentDidMount() {
    this.props.fetchNoteTitles();
  }

  /**
   * fetchNotes from post complete
   *
   * @param {Object} nextProps - props
   */
  componentWillReceiveProps(nextProps) {
    if (this.props.note.isPosting && !nextProps.note.isPosting) {
      this.props.fetchNoteTitles();
    }
  }

  /**
   * render
   *
   * @return {ReactElement}
   */
  render() {
    const notes = this.props.note.noteTitles.map(note => {
      return (
        <li
          key={note.id}
          onClick={() => this.props.fetchNote(note.id)}
        >
          <p>{note.title}</p>
        </li>
      );
    });
    return (
      <div className="Wrapper">
        <ul>{notes}</ul>
        <button onClick={this.props.postNote}>Add Post</button>
      </div>
    );
  }
}

App.propTypes = propTypes;

/**
 * map state to props
 *
 * @param {Object} state - state
 * @return {Object}
 */
function mapStateToProps(state) {
  return {note: state.note};
}

/**
 * map dispatch to props
 *
 * @param {Function} dispatch - dispatch
 * @return {Object}
 */
function mapDispachToProps(dispatch) {
  return {
    fetchNote: bindActionCreators(fetchNote, dispatch),
    fetchNoteTitles: bindActionCreators(fetchNoteTitles, dispatch),
    postNote: bindActionCreators(postNote, dispatch)
  };
}

export default connect(mapStateToProps, mapDispachToProps)(App);

@@ -189,16 +189,71 @@
 s/note';
+%0Aimport NoteListView from '../components/NoteListView';
 %0A%0Aconst 
@@ -869,113 +869,48 @@
     
-const notes = this.props.note.noteTitles.map(note =%3E %7B%0A      return (%0A        %3Cli%0A          key=%7Bnote.id%7D
+return (%0A      %3Cdiv className=%22Wrapper%22%3E
 %0A   
@@ -914,17 +914,23 @@
         
- 
+%3Cbutton
  onClick
@@ -935,14 +935,8 @@
 ck=%7B
-() =%3E 
 this
@@ -946,231 +946,143 @@
 ops.
-fetchNote(note.id)%7D%0A        %3E%0A          %3Cp%3E%7Bnote.title%7D%3C/p%3E%0A        %3C/li%3E%0A      );%0A    %7D);%0A    return (%0A      %3Cdiv className=%22Wrapper%22%3E%0A        %3Cul%3E%7Bnotes%7D%3C/ul%3E%0A        %3Cbutton onClick=%7Bthis.props.postNote%7D%3EAdd Post%3C/button
+postNote%7D%3EAdd Post%3C/button%3E%0A        %3CNoteListView%0A          fetchNote=%7Bthis.props.fetchNote%7D%0A          note=%7Bthis.props.note%7D%0A        /
 %3E%0A  

add NoteListView to App Container