client/src/components/SessionForm.js
changeset 101 e165aa89ac82
parent 100 6fd752d98933
child 106 fffefefed507
--- a/client/src/components/SessionForm.js	Tue Jun 27 18:12:10 2017 +0200
+++ b/client/src/components/SessionForm.js	Wed Jun 28 12:54:48 2017 +0200
@@ -22,7 +22,7 @@
   onClickCreateGroup = (e) => {
     e.preventDefault();
     const groupName = this.groupName.value;
-    this.props.authActions.createGroup(groupName);
+    this.props.sessionsActions.createGroupAndUpdateSession(this.props.currentSession, groupName);
   }
 
   onChange = (e) => {
@@ -35,6 +35,19 @@
     this.props.sessionsActions.updateSession(this.props.currentSession, changes);
   }, 750)
 
+  onGroupChange = (e) => {
+    const groupId = parseInt(this.group.value, 10);
+    const group = this.props.groups.find(group => group.id === groupId);
+
+    this.props.sessionsActions.updateSession(this.props.currentSession, { group });
+  }
+
+  componentWillUpdate = (nextProps, nextState) => {
+    if (nextState.createGroup && nextProps.createGroup.get('success')) {
+      this.setState({ createGroup: false })
+    }
+  }
+
   renderCreateGroup = () => {
     const { createGroup } = this.props;
     const hasErrors = true === createGroup.get('error') && createGroup.get('errorMessages').has('name');
@@ -93,7 +106,7 @@
               defaultValue={ this.props.currentSession.title }
               onChange={ this.onChange }
               type="text"
-              placeholder="Enter a title for this session"
+              placeholder="Enter a title"
               inputRef={ ref => { this.title = ref; } }
             />
           </FormGroup>
@@ -104,11 +117,25 @@
               componentClass="textarea"
               defaultValue={ this.props.currentSession.description }
               onChange={ this.onChange }
-              placeholder="Enter a description for this session"
+              placeholder="Enter a description"
               inputRef={ ref => { this.description = ref; } }
             />
           </FormGroup>
           <FormGroup>
+            <ControlLabel>Group</ControlLabel>
+            <FormControl
+              name="group"
+              componentClass="select"
+              value={ this.props.group.id }
+              onChange={ this.onGroupChange }
+              inputRef={ ref => { this.group = ref; } }>
+              <option />
+              { this.props.groups.map((group, key) =>
+                <option key={ key } value={ group.id }>{ group.name }</option>
+              ) }
+            </FormControl>
+          </FormGroup>
+          <FormGroup>
             { this.renderCreateGroup() }
           </FormGroup>
         </form>
@@ -118,9 +145,17 @@
 }
 
 function mapStateToProps(state, props) {
+
+  let group;
+  if (props.session) {
+    group = state.groups.find(group => props.session.group.get('id') === group.id)
+  }
+
   return {
     currentSession: props.session,
-    createGroup: state.createGroup
+    createGroup: state.createGroup,
+    groups: state.groups,
+    group
   };
 }