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

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

     3 import { bindActionCreators } from 'redux';

     4 import { Panel, FormGroup, ControlLabel, FormControl } from 'react-bootstrap';

     5 import '../App.css';

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

     7 import _ from 'lodash';

     8 

     9 class SessionForm extends Component {

    10 

    11   onChange = (e) => {

    12     const { name, value } = e.target;

    13     const changes = { [name]: value }

    14     this.onChangeThrottle(changes);

    15   }

    16 

    17   onChangeThrottle = _.debounce((changes) => {

    18     this.props.sessionsActions.updateSession(this.props.currentSession, changes);

    19   }, 750)

    20 

    21   render() {

    22 

    23     if (!this.props.currentSession) {

    24       return (

    25         <form></form>

    26       )

    27     }

    28 

    29     return (

    30       <Panel>

    31         <form onSubmit={ e => { e.preventDefault() } }>

    32           <FormGroup>

    33             <ControlLabel>Title</ControlLabel>

    34             <FormControl

    35               name="title"

    36               defaultValue={ this.props.currentSession.title }

    37               onChange={ this.onChange }

    38               type="text"

    39               placeholder="Enter a title for this session"

    40               inputRef={ ref => { this.title = ref; } }

    41             />

    42           </FormGroup>

    43           <FormGroup>

    44             <ControlLabel>Description</ControlLabel>

    45             <FormControl

    46               name="description"

    47               componentClass="textarea"

    48               defaultValue={ this.props.currentSession.description }

    49               onChange={ this.onChange }

    50               placeholder="Enter a description for this session"

    51               inputRef={ ref => { this.description = ref; } }

    52             />

    53           </FormGroup>

    54         </form>

    55       </Panel>

    56     );

    57   }

    58 }

    59 

    60 function mapStateToProps(state, props) {

    61   return {

    62     currentSession: props.session,

    63   };

    64 }

    65 

    66 function mapDispatchToProps(dispatch) {

    67   return {

    68     sessionsActions: bindActionCreators(sessionsActions, dispatch),

    69   }

    70 }

    71 

    72 export default connect(mapStateToProps, mapDispatchToProps)(SessionForm);