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

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

     3 import { bindActionCreators } from 'redux';

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

     5 import '../App.css';

     6 import Navbar from './Navbar';

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

     8 

     9 class Settings extends Component {

    10 

    11   updateSettings = () => {

    12     const username = this.props.currentUser.username;

    13     const firstname = this.firstname.value;

    14     const lastname = this.lastname.value;

    15 

    16     this.props.userActions.updateSettings(username, firstname, lastname);

    17   }

    18 

    19   render() {

    20 

    21     const firstname = this.props.currentUser ? this.props.currentUser.first_name : '';

    22     const lastname = this.props.currentUser ? this.props.currentUser.last_name : '';

    23 

    24     return (

    25       <div>

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

    27         <Grid fluid>

    28           <Row>

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

    30               <form>

    31                 <FormGroup>

    32                   <ControlLabel>First name</ControlLabel>

    33                   <FormControl

    34                     name="firstname"

    35                     defaultValue={ firstname }

    36                     placeholder="John"

    37                     inputRef={ ref => { this.firstname = ref; } }

    38                   />

    39                 </FormGroup>

    40                 <FormGroup>

    41                   <ControlLabel>Last name</ControlLabel>

    42                   <FormControl

    43                     name="lastname"

    44                     defaultValue={ lastname }

    45                     placeholder="Doe"

    46                     inputRef={ ref => { this.lastname = ref; } }

    47                   />

    48                 </FormGroup>

    49               </form>

    50               <Button block bsStyle="success" onClick={this.updateSettings}>Save settings</Button>

    51             </Col>

    52           </Row>

    53         </Grid>

    54       </div>

    55     );

    56   }

    57 }

    58 

    59 function mapStateToProps(state, props) {

    60   return {

    61     currentUser: state.get('currentUser'),

    62   };

    63 }

    64 

    65 function mapDispatchToProps(dispatch) {

    66   return {

    67     userActions: bindActionCreators(userActions, dispatch)

    68   }

    69 }

    70 

    71 export default connect(mapStateToProps, mapDispatchToProps)(Settings);