--- a/client/src/components/Session.js	Mon Jun 12 18:12:38 2017 +0200
+++ b/client/src/components/Session.js	Wed Jun 14 12:28:09 2017 +0200
@@ -1,30 +1,67 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { Grid, Row, Col, Panel, FormGroup, ControlLabel, FormControl, Button } from 'react-bootstrap';
+import { Grid, Row, Col, Panel, FormGroup, ControlLabel, FormControl } from 'react-bootstrap';
 import '../App.css';
 import Navbar from './Navbar';
 import NoteInput from './NoteInput';
 import NotesList from './NotesList';
 import * as sessionsActions from '../actions/sessionsActions';
 import * as notesActions from '../actions/notesActions';
+import _ from 'lodash';
 
 class Session extends Component {
 
-  saveSession = () => {
-    const title = this.title.value;
-    const description = this.description.value;
+  onChange = (e) => {
+    const { name, value } = e.target;
+    const changes = { [name]: value }
+    this.onChangeThrottle(changes);
+  }
 
-    this.props.sessionsActions.updateSession(this.props.currentSession, {
-      title: title,
-      description: description
-    });
-  }
+  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>
+        <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>
@@ -33,27 +70,7 @@
           <Row>
             <Col md={3}>
               <Panel>
-                <form>
-                  <FormGroup>
-                    <ControlLabel>Title</ControlLabel>
-                    <FormControl
-                      type="text"
-                      defaultValue={this.props.currentSession ? this.props.currentSession.title : ''}
-                      placeholder="Enter a title for this session"
-                      inputRef={ref => { this.title = ref; }}
-                    />
-                  </FormGroup>
-                  <FormGroup>
-                    <ControlLabel>Description</ControlLabel>
-                    <FormControl
-                      componentClass="textarea"
-                      defaultValue={this.props.currentSession ? this.props.currentSession.description : ''}
-                      placeholder="Enter a description for this session"
-                      inputRef={ref => { this.description = ref; }}
-                    />
-                  </FormGroup>
-                  <Button bsStyle="primary" onClick={this.saveSession}>Save session</Button>
-                </form>
+                { this.renderForm() }
               </Panel>
             </Col>
             <Col md={9}>
@@ -77,9 +94,9 @@
   const currentSession = sessions.find(session => session._id === sessionId);
 
   return {
-    currentSession: currentSession,
-    sessions: sessions,
-    notes: notes
+    currentSession,
+    sessions,
+    notes,
   };
 }