# HG changeset patch
# User Alexandre Segura <mex.zktk@gmail.com>
# Date 1497866166 -7200
# Node ID 4aa24724e5b3f80ad808e87cda320bdc347680ea
# Parent  c20f32e92759925bf26c05b7f346f6afa81c6aa1
Move session form to dedicated component.

diff -r c20f32e92759 -r 4aa24724e5b3 client/src/components/NoteInput.js
--- a/client/src/components/NoteInput.js	Mon Jun 19 11:35:27 2017 +0200
+++ b/client/src/components/NoteInput.js	Mon Jun 19 11:56:06 2017 +0200
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { Form, FormGroup, FormControl, Button, Label, Row, Col, Panel } from 'react-bootstrap';
+import { Form, FormControl, Button, Label, Row, Col, Panel } from 'react-bootstrap';
 import moment from 'moment';
 
 import PropTypes from 'prop-types';
diff -r c20f32e92759 -r 4aa24724e5b3 client/src/components/Session.js
--- a/client/src/components/Session.js	Mon Jun 19 11:35:27 2017 +0200
+++ b/client/src/components/Session.js	Mon Jun 19 11:56:06 2017 +0200
@@ -1,67 +1,21 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { Grid, Row, Col, Panel, FormGroup, ControlLabel, FormControl } from 'react-bootstrap';
+import { Grid, Row, Col } from 'react-bootstrap';
 import '../App.css';
 import Navbar from './Navbar';
 import NoteInput from './NoteInput';
 import NotesList from './NotesList';
+import SessionForm from './SessionForm';
 import * as sessionsActions from '../actions/sessionsActions';
 import * as notesActions from '../actions/notesActions';
-import _ from 'lodash';
 
 class Session extends Component {
 
-  onChange = (e) => {
-    const { name, value } = e.target;
-    const changes = { [name]: value }
-    this.onChangeThrottle(changes);
-  }
-
-  onChangeThrottle = _.debounce((changes) => {
-    this.props.sessionsActions.updateSession(this.props.currentSession, changes);
-  }, 750)
-
   componentDidMount = () => {
     this.props.notesActions.loadNotesBySession({ _id: this.props.match.params.id });
   }
 
-  renderForm() {
-
-    if (!this.props.currentSession) {
-      return (
-        <form></form>
-      )
-    }
-
-    return (
-      <form onSubmit={ e => { e.preventDefault() } }>
-        <FormGroup>
-          <ControlLabel>Title</ControlLabel>
-          <FormControl
-            name="title"
-            defaultValue={ this.props.currentSession.title }
-            onChange={ this.onChange }
-            type="text"
-            placeholder="Enter a title for this session"
-            inputRef={ ref => { this.title = ref; } }
-          />
-        </FormGroup>
-        <FormGroup>
-          <ControlLabel>Description</ControlLabel>
-          <FormControl
-            name="description"
-            componentClass="textarea"
-            defaultValue={ this.props.currentSession.description }
-            onChange={ this.onChange }
-            placeholder="Enter a description for this session"
-            inputRef={ ref => { this.description = ref; } }
-          />
-        </FormGroup>
-      </form>
-    );
-  }
-
   render() {
     return (
       <div>
@@ -70,9 +24,7 @@
           <Grid fluid className="session-notes">
             <Row>
               <Col md={3}>
-                <Panel>
-                  { this.renderForm() }
-                </Panel>
+                <SessionForm session={this.props.currentSession} />
               </Col>
               <Col md={9}>
                 <NotesList notes={this.props.notes} />
diff -r c20f32e92759 -r 4aa24724e5b3 client/src/components/SessionForm.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/SessionForm.js	Mon Jun 19 11:56:06 2017 +0200
@@ -0,0 +1,72 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { Panel, FormGroup, ControlLabel, FormControl } from 'react-bootstrap';
+import '../App.css';
+import * as sessionsActions from '../actions/sessionsActions';
+import _ from 'lodash';
+
+class SessionForm extends Component {
+
+  onChange = (e) => {
+    const { name, value } = e.target;
+    const changes = { [name]: value }
+    this.onChangeThrottle(changes);
+  }
+
+  onChangeThrottle = _.debounce((changes) => {
+    this.props.sessionsActions.updateSession(this.props.currentSession, changes);
+  }, 750)
+
+  render() {
+
+    if (!this.props.currentSession) {
+      return (
+        <form></form>
+      )
+    }
+
+    return (
+      <Panel>
+        <form onSubmit={ e => { e.preventDefault() } }>
+          <FormGroup>
+            <ControlLabel>Title</ControlLabel>
+            <FormControl
+              name="title"
+              defaultValue={ this.props.currentSession.title }
+              onChange={ this.onChange }
+              type="text"
+              placeholder="Enter a title for this session"
+              inputRef={ ref => { this.title = ref; } }
+            />
+          </FormGroup>
+          <FormGroup>
+            <ControlLabel>Description</ControlLabel>
+            <FormControl
+              name="description"
+              componentClass="textarea"
+              defaultValue={ this.props.currentSession.description }
+              onChange={ this.onChange }
+              placeholder="Enter a description for this session"
+              inputRef={ ref => { this.description = ref; } }
+            />
+          </FormGroup>
+        </form>
+      </Panel>
+    );
+  }
+}
+
+function mapStateToProps(state, props) {
+  return {
+    currentSession: props.session,
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    sessionsActions: bindActionCreators(sessionsActions, dispatch),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SessionForm);