diff -r 57d63a248f0d -r 4e9e755cef51 client/src/components/CreateSession.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/CreateSession.js	Fri Aug 31 15:15:29 2018 +0200
@@ -0,0 +1,219 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import Modal from 'react-modal';
+import uuidV1 from 'uuid/v1';
+import '../App.css';
+import * as sessionsActions from '../actions/sessionsActions';
+import * as authActions from '../actions/authActions';
+// import _ from 'lodash';
+import './CreateSession.css';
+
+class CreateSession extends Component {
+    state = {
+      createGroup: false,
+      protocolOpen: false,
+      // protocol:null
+    }
+
+  componentWillMount() {
+    Modal.setAppElement('body');
+  }
+
+
+  openSessionModal = () => {
+    this.setState({modalIsOpen: true});
+    let groupName = null;
+    // let protocol = null;
+    if(this.props.currentGroup) {
+      groupName = this.props.currentGroup.get('name');
+      // protocol = this.props.currentGroup.get('protocol');
+    }
+    if(groupName === null) {
+      groupName = (this.props.currentUser)?this.props.currentUser.get('default_group'):null;
+      if(groupName != null) {
+        const group = this.props.groups.find((g) => g.name === groupName);
+        if(group) {
+          return(
+          this.setState({
+          protocol: group.get('protocol')
+          }))
+        }
+      }
+    }
+
+  }
+
+  createSession = () => {
+    const sessionId = uuidV1();
+    let groupName = null;
+    let protocol = null;
+    if(this.props.currentGroup) {
+      groupName = this.props.currentGroup.get('name');
+      protocol = this.props.currentGroup.get('protocol');
+    }
+    if(groupName === null) {
+      groupName = (this.props.currentUser)?this.props.currentUser.get('default_group'):null;
+      if(groupName != null) {
+        const group = this.props.groups.find((g) => g.name === groupName);
+        if(group) {
+          protocol = group.get('protocol');
+        }
+      }
+    }
+
+    this.props.sessionsActions.createSession(sessionId, groupName, protocol);
+    this.props.history.push('/sessions/' + sessionId);
+  }
+
+  getGroupProtocol = () => {
+    let groupName = null;
+    let protocol = null;
+    if(this.props.currentGroup) {
+      groupName = this.props.currentGroup.get('name');
+      protocol = this.props.currentGroup.get('protocol');
+    }
+    if(groupName === null) {
+      groupName = (this.props.currentUser)?this.props.currentUser.get('default_group'):null;
+      if(groupName != null) {
+        const group = this.props.groups.find((g) => g.name === groupName);
+        if(group) {
+          protocol = group.get('protocol');
+          return(
+            protocol
+          );
+        }
+      }
+    }
+  }
+
+  // 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)
+
+  onGroupChange = (e) => {
+    const groupName = e.target.value;
+
+    const group = this.props.groups.find((g) => g.get('name') === groupName);
+
+    this.props.sessionsActions.updateSession(this.props.currentSession, { group: groupName, protocol: group?group.get('protocol'):'' });
+  }
+
+  componentWillUpdate = (nextProps, nextState) => {
+    if (nextState.createGroup && nextProps.createGroup.get('success')) {
+      this.setState({ createGroup: false })
+    }
+  }
+
+  toggleProtocol = () => {
+    this.setState({
+      protocolOpen: !this.state.protocolOpen,
+      show: false
+
+    });
+  }
+
+  closeModal = () => {
+    this.setState({modalIsOpen: false});
+  }
+
+  handleModalCloseRequest = (e) => {
+    // opportunity to validate something and keep the modal open even if it
+    // requested to be closed
+    e.preventDefault();
+    this.setState({modalIsOpen: false});
+  }
+
+  render() {
+
+    // if (!this.props.currentSession) {
+    //   return (
+    //     <form></form>
+    //   )
+    // }
+
+    return (
+      <div>
+      {/* <button id="session-button" type="button" className="btn btn-primary btn-lg" onClick={ this.openModal}>Créer une nouvelle session</button> */}
+      <a id="session-button" onClick={this.openSessionModal}>Créer une nouvelle session</a>
+      <Modal
+      className="Modal__Bootstrap modal-dialog bg-primary"
+      // closeTimeoutMS={150}
+      isOpen={this.state.modalIsOpen}
+      onRequestClose={this.handleModalCloseRequest}
+      >
+        <div className="panel-default">
+          <div className="card-body rouded-bottom">
+            <form onSubmit={ e => { e.preventDefault() } }>
+            <div className="form-group">
+                <label className="col-form-label text-secondary">Group</label>
+                {/* <p>{this.props.currentSession.group}</p> */}
+              </div>
+              <div className="form-group">
+                <label className="col-form-label text-secondary">Titre</label>
+                <input className="form-control text-primary"
+                  name="title"
+                  // defaultValue={ this.props.currentSession.title }
+                  onChange={ this.onChange }
+                  type="text"
+                  placeholder="Entrez un titre"
+                />
+              </div>
+              <div className="form-group">
+                <label className="col-form-label text-secondary">Description</label>
+                <input className="form-control text-primary"
+                  type="textarea"
+                  name="description"
+                  // defaultValue={ this.props.currentSession.description }
+                  onChange={ this.onChange }
+                  placeholder="Entrez une description"
+                />
+              </div>
+              <div className="form-group">
+                <label className="col-form-label text-secondary" onClick={this.toggleProtocol}>Protocole de la prise de note {this.state.protocolOpen?<span className="material-icons protocol-toggle">&#xE313;</span>:<span className="material-icons protocol-toggle">&#xE315;</span>}</label>
+                <div className={ `collapse ${this.state.protocolOpen?'in':''}`} >
+                  {/* <pre>{JSON.stringify(this.props.currentSession.protocol, null, 2)}</pre> */}
+                  <pre>{JSON.stringify(this.getGroupProtocol(), null, 2)}</pre>
+                </div>
+              </div>
+              <div className="text-center">
+              <button id="create-button" type="submit" className="btn btn-secondary btn-lg text-primary" onClick={this.createSession}>Commencer</button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </Modal>
+      </div>
+    );
+  }
+}
+
+function mapStateToProps(state, props) {
+
+  let group;
+  if (props.session && props.session.get('group')) {
+    group = state.get('groups').find(group => props.session.get('group') === group.get('name'))
+  }
+
+  return {
+    currentSession: props.session,
+    createGroup: state.get('createGroup'),
+    groups: state.get('groups'),
+    group
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    sessionsActions: bindActionCreators(sessionsActions, dispatch),
+    authActions: bindActionCreators(authActions, dispatch),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(CreateSession);