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

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

/**
 * NoteScene Container
 */
export default class NoteScene extends React.Component {

  componentDidMount() {
    this.props.fetchNote(this.props.routeParams.id);
  }

  componentWillReceiveProps(nextProps) {
    if (!nextProps.note) {
      this.props.fetchNote(nextProps.routeParams.id);
    }
  }

  /**
   * render
   *
   * @return {ReactElement}
   */
  render() {
    if (!this.props.note) {
      return <div><p>Loading...</p></div>;
    }
    return (
      <div className="NoteView">
        <Link to="/"><p>Back</p></Link>
        <p>{`Note:${this.props.note.id}`}</p>
        <p>{this.props.note.body}</p>
      </div>
    );
  }
}

NoteScene.propTypes = propTypes;

/**
 * map state to props
 *
 * @param {Object} state - state
 * @param {Object} props - own props
 * @return {Object}
 */
function mapStateToProps(state, props) {
  return {note: state.note.notes[props.routeParams.id]};
}

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

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

@@ -9,21 +9,8 @@
 eact
-, %7BPropTypes%7D
  fro
@@ -111,16 +111,27 @@
 rt %7BLink
+, PropTypes
 %7D from '
@@ -153,16 +153,28 @@
 import %7B
+deleteNote, 
 fetchNot
@@ -211,21 +211,113 @@
 nst 
-propTypes = %7B
+contextTypes = %7B%0A  history: PropTypes.history%0A%7D;%0A%0Aconst propTypes = %7B%0A  deleteNote: React.PropTypes.func,
 %0A  f
@@ -322,24 +322,30 @@
  fetchNote: 
+React.
 PropTypes.fu
@@ -356,16 +356,22 @@
   note: 
+React.
 PropType
@@ -395,16 +395,22 @@
 Params: 
+React.
 PropType
@@ -422,16 +422,17 @@
 ect%0A%7D;%0A%0A
+%0A
 /**%0A * N
@@ -805,24 +805,44 @@
     
-if (!this.props.
+const %7Bnote%7D = this.props;%0A    if (!
 note
@@ -1000,27 +1000,16 @@
 %60Note:$%7B
-this.props.
 note.id%7D
@@ -1031,60 +1031,292 @@
 %3Cp%3E%7B
-this.props.note.body%7D%3C/p%3E%0A      %3C/div%3E%0A    );%0A  %7D%0A%7D%0A
+note.body%7D%3C/p%3E%0A        %3Cbutton onClick=%7B() =%3E %7B%0A          this.props.deleteNote(note.id);%0A          this.context.history.pushState(null, '/');%0A        %7D%7D%0A        %3E%0A          %3CLink to=%22/%22%3EDelete%3C/Link%3E%0A        %3C/button%3E%0A      %3C/div%3E%0A    );%0A  %7D%0A%7D%0A%0ANoteScene.contextTypes = contextTypes;
 %0ANot
@@ -1716,16 +1716,79 @@
 return %7B
+%0A    deleteNote: bindActionCreators(deleteNote, dispatch),%0A    
 fetchNot
@@ -1829,16 +1829,19 @@
 ispatch)
+%0A  
 %7D;%0A%7D%0A%0Aex

add delete note action