client/src/components/SessionForm.js
changeset 101 e165aa89ac82
parent 100 6fd752d98933
child 106 fffefefed507
equal deleted inserted replaced
100:6fd752d98933 101:e165aa89ac82
    20   }
    20   }
    21 
    21 
    22   onClickCreateGroup = (e) => {
    22   onClickCreateGroup = (e) => {
    23     e.preventDefault();
    23     e.preventDefault();
    24     const groupName = this.groupName.value;
    24     const groupName = this.groupName.value;
    25     this.props.authActions.createGroup(groupName);
    25     this.props.sessionsActions.createGroupAndUpdateSession(this.props.currentSession, groupName);
    26   }
    26   }
    27 
    27 
    28   onChange = (e) => {
    28   onChange = (e) => {
    29     const { name, value } = e.target;
    29     const { name, value } = e.target;
    30     const changes = { [name]: value }
    30     const changes = { [name]: value }
    32   }
    32   }
    33 
    33 
    34   onChangeThrottle = _.debounce((changes) => {
    34   onChangeThrottle = _.debounce((changes) => {
    35     this.props.sessionsActions.updateSession(this.props.currentSession, changes);
    35     this.props.sessionsActions.updateSession(this.props.currentSession, changes);
    36   }, 750)
    36   }, 750)
       
    37 
       
    38   onGroupChange = (e) => {
       
    39     const groupId = parseInt(this.group.value, 10);
       
    40     const group = this.props.groups.find(group => group.id === groupId);
       
    41 
       
    42     this.props.sessionsActions.updateSession(this.props.currentSession, { group });
       
    43   }
       
    44 
       
    45   componentWillUpdate = (nextProps, nextState) => {
       
    46     if (nextState.createGroup && nextProps.createGroup.get('success')) {
       
    47       this.setState({ createGroup: false })
       
    48     }
       
    49   }
    37 
    50 
    38   renderCreateGroup = () => {
    51   renderCreateGroup = () => {
    39     const { createGroup } = this.props;
    52     const { createGroup } = this.props;
    40     const hasErrors = true === createGroup.get('error') && createGroup.get('errorMessages').has('name');
    53     const hasErrors = true === createGroup.get('error') && createGroup.get('errorMessages').has('name');
    41 
    54 
    91             <FormControl
   104             <FormControl
    92               name="title"
   105               name="title"
    93               defaultValue={ this.props.currentSession.title }
   106               defaultValue={ this.props.currentSession.title }
    94               onChange={ this.onChange }
   107               onChange={ this.onChange }
    95               type="text"
   108               type="text"
    96               placeholder="Enter a title for this session"
   109               placeholder="Enter a title"
    97               inputRef={ ref => { this.title = ref; } }
   110               inputRef={ ref => { this.title = ref; } }
    98             />
   111             />
    99           </FormGroup>
   112           </FormGroup>
   100           <FormGroup>
   113           <FormGroup>
   101             <ControlLabel>Description</ControlLabel>
   114             <ControlLabel>Description</ControlLabel>
   102             <FormControl
   115             <FormControl
   103               name="description"
   116               name="description"
   104               componentClass="textarea"
   117               componentClass="textarea"
   105               defaultValue={ this.props.currentSession.description }
   118               defaultValue={ this.props.currentSession.description }
   106               onChange={ this.onChange }
   119               onChange={ this.onChange }
   107               placeholder="Enter a description for this session"
   120               placeholder="Enter a description"
   108               inputRef={ ref => { this.description = ref; } }
   121               inputRef={ ref => { this.description = ref; } }
   109             />
   122             />
       
   123           </FormGroup>
       
   124           <FormGroup>
       
   125             <ControlLabel>Group</ControlLabel>
       
   126             <FormControl
       
   127               name="group"
       
   128               componentClass="select"
       
   129               value={ this.props.group.id }
       
   130               onChange={ this.onGroupChange }
       
   131               inputRef={ ref => { this.group = ref; } }>
       
   132               <option />
       
   133               { this.props.groups.map((group, key) =>
       
   134                 <option key={ key } value={ group.id }>{ group.name }</option>
       
   135               ) }
       
   136             </FormControl>
   110           </FormGroup>
   137           </FormGroup>
   111           <FormGroup>
   138           <FormGroup>
   112             { this.renderCreateGroup() }
   139             { this.renderCreateGroup() }
   113           </FormGroup>
   140           </FormGroup>
   114         </form>
   141         </form>
   116     );
   143     );
   117   }
   144   }
   118 }
   145 }
   119 
   146 
   120 function mapStateToProps(state, props) {
   147 function mapStateToProps(state, props) {
       
   148 
       
   149   let group;
       
   150   if (props.session) {
       
   151     group = state.groups.find(group => props.session.group.get('id') === group.id)
       
   152   }
       
   153 
   121   return {
   154   return {
   122     currentSession: props.session,
   155     currentSession: props.session,
   123     createGroup: state.createGroup
   156     createGroup: state.createGroup,
       
   157     groups: state.groups,
       
   158     group
   124   };
   159   };
   125 }
   160 }
   126 
   161 
   127 function mapDispatchToProps(dispatch) {
   162 function mapDispatchToProps(dispatch) {
   128   return {
   163   return {