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

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

     3 import { bindActionCreators } from 'redux';

     4 import { Grid, Row, Col, Panel, FormGroup, ControlLabel, FormControl, Button, Alert, HelpBlock } from 'react-bootstrap';

     5 import '../App.css';

     6 import Navbar from './Navbar';

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

     8 import { getOnline, getCreateGroup } from '../selectors/authSelectors';

     9 

    10 class CreateGroup extends Component {

    11 

    12   state = {

    13     name: '',

    14     description: ''

    15   }

    16 

    17   createGroup = () => {

    18 

    19     const { name, description } = this.state;

    20 

    21     if(name && name.trim() !== "") {

    22       this.props.authActions.createGroup(name, description);

    23     }

    24   }

    25 

    26   submit = (e) => {

    27     e.preventDefault();

    28 

    29     this.createGroup();

    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   renderErrorMessage(errorMessages, fieldname) {

    43     if (errorMessages && fieldname in errorMessages) {

    44       return errorMessages[fieldname].map((message, key) =>

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

    46       );

    47     }

    48   }

    49 

    50   renderNonFieldErrors(errorMessages) {

    51     if (errorMessages && 'non_field_errors' in errorMessages) {

    52       const errors = errorMessages['non_field_errors'];

    53       return (

    54         <Alert bsStyle="danger">

    55         { errors.map((message, key) =>

    56           <p key={ key }>{ message }</p>

    57         ) }

    58         </Alert>

    59       )

    60     }

    61   }

    62 

    63   cancel = (e) => {

    64     e.preventDefault();

    65     this.props.history.push('/sessions');

    66   }

    67 

    68 

    69   render() {

    70 

    71     const panelHeader = (

    72       <h4 className="text-uppercase text-center">Créer un groupe</h4>

    73     )

    74 

    75     const errorMessages = this.props.createGroup.getIn(['errorMessages', 'data']);

    76     const okDisabled = (!this.state.name || this.state.name.trim() === "");

    77 

    78     return (

    79       <div>

    80         <Navbar history={this.props.history} />

    81         <Grid fluid>

    82           <Row>

    83             <Col md={6} mdOffset={3}>

    84               <Panel header={ panelHeader } className="panel-login">

    85                 <form onSubmit={this.submit}>

    86                   <FormGroup validationState={ errorMessages && ('name' in errorMessages) ? 'error' : null }>

    87                     <ControlLabel>Nom</ControlLabel>

    88                     <FormControl componentClass="input" type="text" onChange={this.handleInputChange} name="name" placeholder="Nom du groupe..."/>

    89                      { this.renderErrorMessage(errorMessages, 'name') }

    90                   </FormGroup>

    91                   <FormGroup validationState={ errorMessages && ('description' in errorMessages) ? 'error' : null }>

    92                     <ControlLabel>Password</ControlLabel>

    93                     <FormControl componentClass="textarea" onChange={this.handleInputChange} name="description" placeholder="Description..."/>

    94                      { this.renderErrorMessage(errorMessages, 'description') }

    95                   </FormGroup>

    96                   { this.renderNonFieldErrors(errorMessages) }

    97                   <Row>

    98                   <Col md={6}><Button type="submit" block bsStyle="primary" disabled={okDisabled}>Ok</Button></Col>

    99                   <Col md={6}><Button block bsStyle="default" onClick={this.cancel}>Annuler</Button></Col>

   100                   </Row>

   101                 </form>

   102               </Panel>

   103             </Col>

   104           </Row>

   105         </Grid>

   106       </div>

   107     );

   108   }

   109 }

   110 

   111 function mapStateToProps(state, props) {

   112   return {

   113     createGroup: getCreateGroup(state),

   114     online: getOnline(state),

   115   };

   116 }

   117 

   118 function mapDispatchToProps(dispatch) {

   119   return {

   120     authActions: bindActionCreators(authActions, dispatch),

   121   }

   122 }

   123 

   124 export default connect(mapStateToProps, mapDispatchToProps)(CreateGroup);