app\static\js\components\collection\CollectionEditor.jsx

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

import ListErrors from '../ListErrors';

const mapStateToProps = state => ({
    ...state.collectionEditor
});

const mapDispatchToProps = dispatch => ({
    onLoad: payload =>
        dispatch({ type: 'COLLECTION_EDITOR_PAGE_LOADED', payload}),
    onSubmit: payload =>
        dispatch({ type: 'COLLECTION_SUBMITTED', payload }),
    onUnload: () =>
        dispatch({ type: 'COLLECTION_EDITOR_PAGE_UNLOADED'}),
    onUpdateField: (key, value) =>
        dispatch({ type: 'UPDATE_FIELD_COLLECTION', key, value })
});

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

        const updateFieldEvent = key => ev => this.props.onUpdateField(key, ev.target.value);
        this.changeName = updateFieldEvent('name');
        this.changeDescription = updateFieldEvent('description');
        this.submitForm = ev => {
            ev.preventDefault();
            const collection = {
                name: this.props.name,
                description: this.props.description,
            };

            const id = { id: this.props.id };
            const promise = this.props.id ?
                agent.Collections.update(Object.assign(collection.name, collection.description, id)) :
                agent.Collections.create(collection.name, collection.description);

            this.props.onSubmit(promise);
        };
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.match.params.id !== nextProps.match.params.id) {
            if (nextProps.match.params.id) {
                this.props.onUnload();
                return this.props.onLoad(agent.Collections.get(this.props.match.params.id));
            }
            this.props.onLoad(null);
        }
    }

    componentWillMount() {
        if (this.props.match.params.id) {
            return this.props.onLoad(agent.Collections.get(this.props.match.params.id));
        }
        this.props.onLoad(null);
    }

    componentWillUnmount() {
        this.props.onUnload();
    }


    render() {
        return (
            <div className="editor-page">
                <div className="container page">
                    <div className="row">
                        <div className="col-md-10 offset-md-1 col-xs-12">

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

                            <form>
                                <fieldset>

                                    <fieldset className="form-group">
                                        <input
                                            className="form-control form-control-lg"
                                            id="name"
                                            type="text"
                                            placeholder="Collection Name"
                                            value={this.props.name || ''}
                                            onChange={this.changeName} />
                                    </fieldset>

                                    <fieldset className="form-group">
                                        <textarea
                                            className="form-control"
                                            id="description"
                                            rows="*"
                                            placeholder="Describe your collection"
                                            value={this.props.description || ''}
                                            onChange={this.changeDescription}>
                                        </textarea>
                                    </fieldset>

                                    <button
                                        className="btn btn-lg pull-xs-right btn-primary"
                                        type="button"
                                        disabled={this.props.inProgress}
                                        onClick={this.submitForm}>
                                        {!this.props.match.params.id ? 'Create' : 'Update' } Collection
                                    </button>

                                </fieldset>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}


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