App\static\js\components\auth\Settings(1).jsx

import React, { Component } from 'react'
import agent from '../../agent'
import { connect } from 'react-redux'

import ListErrors from '../ListErrors'


const mapStateToProps = state => ({
    ...state.settings,
    currentUser: state.common.currentUser
});

const mapDispatchToProps = dispatch => ({
    onClickLogout: () => dispatch({ type: 'LOGOUT', payload: agent.Auth.logout() }),
    onSubmitForm: user =>
        dispatch({ type: 'SETTINGS_SAVED', payload: agent.Auth.save( user.username, user.name, user.about_me ) }),
    onUnload: () => dispatch({ type: 'SETTINGS_PAGE_UNLOADED' })
});

class SettingsForm extends Component {
    constructor() {
        super();

        this.state = {
            username: '',
            name: '',
            about_me: '',
        };

        this.updateState = field => ev => {
            const state = this.state;
            const newState = Object.assign({}, state, { [field]: ev.target.value });
            this.setState(newState);
        };

        this.submitForm = ev => {
            ev.preventDefault();

            const user = Object.assign({}, this.state);

            this.props.onSubmitForm(user)
        };
    }

    componentWillMount() {
        if (this.props.currentUser) {
            Object.assign(this.state, {
                username: this.props.currentUser.username,
                name: this.props.currentUser.name,
                about_me: this.props.currentUser.about_me
            });
        }
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.currentUser) {
            this.setState(Object.assign({}, this.state, {
                username: nextProps.currentUser.username,
                name: nextProps.currentUser.name,
                about_me: nextProps.currentUser.about_me,
            }));
        }
    }

    render() {
        return (
            <form onSubmit={this.submitForm}>
                <fieldset>

                    <fieldset className="form-group">
                        <input
                            className="form-control form-control-lg"
                            type="text"
                            placeholder="Username"
                            value={this.state.username}
                            onChange={this.updateState('username')} />
                    </fieldset>

                    <fieldset className="form-group">
                        <input
                            className="form-control form-control-lg"
                            type="text"
                            placeholder="Name"
                            value={this.state.name || ''}
                            onChange={this.updateState('name')} />
                    </fieldset>

                    <fieldset className="form-group">
                        <textarea
                            className="form-control form-control-lg"
                            rows="8"
                            placeholder="Short bio about you"
                            value={this.state.about_me || ''}
                            onChange={this.updateState('about_me')} />
                    </fieldset>

                    <button
                        className="btn btn-lg btn-primary pull-xs-right"
                        type="submit"
                        disabled={this.state.inProgress}>
                        Update Settings
                    </button>

                </fieldset>
            </form>

        );
    }
}

class Settings extends React.Component {
  render() {
    return (
      <div className="settings-page">
        <div className="container page">
          <div className="row">
            <div className="col-md-6 offset-md-3 col-xs-12">

              <h1 className="text-xs-center">Your Settings</h1>

              <ListErrors errors={this.props.errors}></ListErrors>

              <SettingsForm
                currentUser={this.props.currentUser}
                onSubmitForm={this.props.onSubmitForm} />

              <hr />

              <button
                className="btn btn-outline-danger"
                onClick={this.props.onClickLogout}>
                Or click here to logout.
              </button>

            </div>
          </div>
        </div>
      </div>
    );
  }
}

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