--- a/client/src/components/SessionForm.js	Mon Jul 31 23:18:38 2017 +0200
+++ b/client/src/components/SessionForm.js	Tue Aug 01 12:20:14 2017 +0200
@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { Panel, FormGroup, ControlLabel, FormControl, Button, InputGroup, HelpBlock, Glyphicon } from 'react-bootstrap';
+import { Panel, FormGroup, ControlLabel, FormControl } from 'react-bootstrap';
+import GroupForm from './GroupForm';
 import '../App.css';
 import * as sessionsActions from '../actions/sessionsActions';
 import * as authActions from '../actions/authActions';
@@ -13,18 +14,6 @@
     createGroup: false
   }
 
-  toggleCreateGroup = (e) => {
-    e.preventDefault();
-    const { createGroup } = this.state;
-    this.setState({ createGroup: !createGroup });
-  }
-
-  onClickCreateGroup = (e) => {
-    e.preventDefault();
-    const groupName = this.groupName.value;
-    this.props.sessionsActions.createGroupAndUpdateSession(this.props.currentSession, groupName);
-  }
-
   onChange = (e) => {
     const { name, value } = e.target;
     const changes = { [name]: value }
@@ -36,10 +25,9 @@
   }, 750)
 
   onGroupChange = (e) => {
-    const groupId = parseInt(this.group.value, 10);
-    const group = this.props.groups.find(group => group.id === groupId);
+    const groupName = e.target.value;
 
-    this.props.sessionsActions.updateSession(this.props.currentSession, { group });
+    this.props.sessionsActions.updateSession(this.props.currentSession, { group: groupName });
   }
 
   componentWillUpdate = (nextProps, nextState) => {
@@ -48,48 +36,6 @@
     }
   }
 
-  renderCreateGroup = () => {
-    const { createGroup } = this.props;
-    const hasErrors = true === createGroup.get('error') && createGroup.get('errorMessages').has('name');
-
-    let errors = [];
-    if (hasErrors) {
-      const errorMessages = createGroup.get('errorMessages').toArray();
-      errors = errorMessages.map((message, key) => {
-        return (
-          <HelpBlock key={ key }>{ message }</HelpBlock>
-        )
-      })
-    }
-
-    if (this.state.createGroup) {
-      return (
-        <FormGroup validationState={ hasErrors ? 'error' : null }>
-          <InputGroup>
-            <FormControl
-              type="text"
-              placeholder="Enter a name for your group"
-              inputRef={ ref => { this.groupName = ref; } } />
-            <InputGroup.Button>
-              <Button bsStyle="primary" onClick={ this.onClickCreateGroup }>Create</Button>
-            </InputGroup.Button>
-          </InputGroup>
-          { errors }
-          <hr />
-          <Button onClick={ this.toggleCreateGroup }>Cancel</Button>
-        </FormGroup>
-      )
-    }
-
-    return (
-      <FormGroup>
-        <Button className="pull-right" bsSize="small" onClick={ this.toggleCreateGroup }>
-          <Glyphicon glyph="plus" />  Create a new group
-        </Button>
-      </FormGroup>
-    )
-  }
-
   render() {
 
     if (!this.props.currentSession) {
@@ -109,7 +55,6 @@
               onChange={ this.onChange }
               type="text"
               placeholder="Enter a title"
-              inputRef={ ref => { this.title = ref; } }
             />
           </FormGroup>
           <FormGroup>
@@ -120,7 +65,6 @@
               defaultValue={ this.props.currentSession.description }
               onChange={ this.onChange }
               placeholder="Enter a description"
-              inputRef={ ref => { this.description = ref; } }
             />
           </FormGroup>
           <FormGroup>
@@ -128,17 +72,15 @@
             <FormControl
               name="group"
               componentClass="select"
-              value={ this.props.group ? this.props.group.id : '' }
-              onChange={ this.onGroupChange }
-              inputRef={ ref => { this.group = ref; } }>
-              <option />
+              value={ this.props.group ? this.props.group.get('name') : '' }
+              onChange={ this.onGroupChange }>
               { this.props.groups.map((group, key) =>
-                <option key={ key } value={ group.id }>{ group.name }</option>
+                <option key={ key } value={ group.get('name') }>{ group.get('name') }</option>
               ) }
             </FormControl>
           </FormGroup>
           <FormGroup>
-            { this.renderCreateGroup() }
+            <GroupForm session={this.props.session} />
           </FormGroup>
         </form>
       </Panel>
@@ -149,8 +91,8 @@
 function mapStateToProps(state, props) {
 
   let group;
-  if (props.session && props.session.group) {
-    group = state.groups.find(group => props.session.group.get('id') === group.id)
+  if (props.session && props.session.get('group')) {
+    group = state.get('groups').find(group => props.session.get('group') === group.get('name'))
   }
 
   return {