1 import React, { Component } from 'react';

     2 import { connect } from 'react-redux';

     3 import { bindActionCreators } from 'redux';

     4 import { FormGroup, FormControl, Button, InputGroup, HelpBlock, Glyphicon } from 'react-bootstrap';

     5 import * as authActions from '../actions/authActions';

     6 import * as sessionsActions from '../actions/sessionsActions';

     7 

     8 class GroupForm extends Component {

     9 

    10   state = {

    11     createGroup: false,

    12     groupName: ''

    13   }

    14 

    15   toggleCreateGroup = (e) => {

    16     e.preventDefault();

    17     const { createGroup } = this.state;

    18     this.setState({ createGroup: !createGroup });

    19   }

    20 

    21   onClickCreateGroup = (e) => {

    22     e.preventDefault();

    23     const groupName = this.state.groupName;

    24     this.props.sessionsActions.createGroupAndUpdateSession(this.props.session, groupName);

    25     this.setState({

    26       createGroup: false,

    27       groupName: ''

    28     })

    29   }

    30 

    31   handleInputChange = (e) => {

    32     const target = e.target;

    33     const value = target.value;

    34     const name = target.name;

    35 

    36     this.setState({

    37       [name]: value

    38     });

    39   }

    40 

    41 

    42   render = () => {

    43     const { createGroup } = this.props;

    44     const hasErrors = true === createGroup.get('error') && createGroup.get('errorMessages').has('name');

    45 

    46     let errors = [];

    47     if (hasErrors) {

    48       const errorMessages = createGroup.get('errorMessages').toArray();

    49       errors = errorMessages.map((message, key) => {

    50         return (

    51           <HelpBlock key={ key }>{ message }</HelpBlock>

    52         )

    53       })

    54     }

    55 

    56     if (this.state.createGroup) {

    57       return (

    58         <FormGroup validationState={ hasErrors ? 'error' : null }>

    59           <InputGroup>

    60             <FormControl

    61               type="text"

    62               placeholder="Enter a name for your group"

    63               onChange={this.handleInputChange}

    64               name="groupName"

    65               value={this.state.groupName} />

    66             <InputGroup.Button>

    67               <Button bsStyle="primary" onClick={ this.onClickCreateGroup }>Create</Button>

    68             </InputGroup.Button>

    69           </InputGroup>

    70           { errors }

    71           <hr />

    72           <Button onClick={ this.toggleCreateGroup }>Cancel</Button>

    73         </FormGroup>

    74       )

    75     }

    76 

    77     if(this.props.online) {

    78       return (

    79         <FormGroup>

    80           <Button className="pull-right" bsSize="small" onClick={ this.toggleCreateGroup }>

    81             <Glyphicon glyph="plus" />  Create a new group

    82           </Button>

    83         </FormGroup>

    84       )

    85     }

    86     return null;

    87   }

    88 

    89 }

    90 

    91 function mapStateToProps(state, props) {

    92 

    93   return {

    94     createGroup: state.get('createGroup'),

    95     online: state.getIn(['status', 'online']),

    96   };

    97 }

    98 

    99 function mapDispatchToProps(dispatch) {

   100   return {

   101     sessionsActions: bindActionCreators(sessionsActions, dispatch),

   102     authActions: bindActionCreators(authActions, dispatch),

   103   }

   104 }

   105 

   106 export default connect(mapStateToProps, mapDispatchToProps)(GroupForm);