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 import { getOnline, getCreateGroup } from '../selectors/authSelectors';

     8 

     9 class GroupForm extends Component {

    10 

    11   state = {

    12     createGroup: false,

    13     groupName: ''

    14   }

    15 

    16   toggleCreateGroup = (e) => {

    17     e.preventDefault();

    18     const { createGroup } = this.state;

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

    20   }

    21 

    22   onClickCreateGroup = (e) => {

    23     e.preventDefault();

    24     const groupName = this.state.groupName;

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

    26     this.setState({

    27       createGroup: false,

    28       groupName: ''

    29     })

    30   }

    31 

    32   handleInputChange = (e) => {

    33     const target = e.target;

    34     const value = target.value;

    35     const name = target.name;

    36 

    37     this.setState({

    38       [name]: value

    39     });

    40   }

    41 

    42 

    43   render = () => {

    44     const { createGroup } = this.props;

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

    46 

    47     let errors = [];

    48     if (hasErrors) {

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

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

    51         return (

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

    53         )

    54       })

    55     }

    56 

    57     if (this.state.createGroup) {

    58       return (

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

    60           <InputGroup>

    61             <FormControl

    62               type="text"

    63               placeholder="Enter a name for your group"

    64               onChange={this.handleInputChange}

    65               name="groupName"

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

    67             <InputGroup.Button>

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

    69             </InputGroup.Button>

    70           </InputGroup>

    71           { errors }

    72           <hr />

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

    74         </FormGroup>

    75       )

    76     }

    77 

    78     if(this.props.online) {

    79       return (

    80         <FormGroup>

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

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

    83           </Button>

    84         </FormGroup>

    85       )

    86     }

    87     return null;

    88   }

    89 

    90 }

    91 

    92 function mapStateToProps(state, props) {

    93 

    94   return {

    95     createGroup: getCreateGroup(state),

    96     online: getOnline(state),

    97   };

    98 }

    99 

   100 function mapDispatchToProps(dispatch) {

   101   return {

   102     sessionsActions: bindActionCreators(sessionsActions, dispatch),

   103     authActions: bindActionCreators(authActions, dispatch),

   104   }

   105 }

   106 

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