trc-client-core/src/course/CourseEditView.jsx

The core of the TRC Client

import React from 'react';
import {fromJS, Map} from 'immutable';
import {connect} from 'react-redux';
import {getValues, destroy, initialize} from 'redux-form';
import {Link, History, RouteContext} from 'react-router';

import AutoRequest from 'trc-client-core/src/components/AutoRequest';
import CourseFormDefaults from 'trc-client-core/src/course/CourseFormDefaults';
import Button from 'bd-stampy/components/Button';
import CourseEditForm, {CourseEditFormFields} from 'trc-client-core/src/course/CourseEditForm';
import CourseStore from 'trc-client-core/src/course/CourseStore';
import CourseView from 'trc-client-core/src/course/CourseView';
import LoadingActions from 'trc-client-core/src/global/LoadingActions';
import {requestCourseList} from 'trc-client-core/src/course/CourseActions';
import {requestPrerequisiteUpdate} from 'trc-client-core/src/course/PrerequisiteDuck';
import {Tab, TabView, TabContent} from 'bd-stampy/components/Tabs';

var CourseEditView = React.createClass({
    displayName: 'CourseEditView',
    mixins: [
        History,
        RouteContext
    ],
    getInitialState() {
        return {
            newCourse: (this.props.location.pathname === '/course/new')
        }
    },
    componentWillMount() {
        var {dispatch, params, courseEditForm} = this.props;
        if (courseEditForm && courseEditForm.courseCode !== params.id) {
            dispatch(destroy('courseEditForm'));
        }
    },
    saveCourse() {
        this.refs.courseEditForm.submit();
    },
    onSubmit(data) {
        var {dispatch, course} = this.props;
        course = course || Map();
        var payload = course
            .merge(fromJS(data))
            .toJS();

        LoadingActions.startLoading();
        if (data.prerequisiteExpression) {
            dispatch(requestPrerequisiteUpdate(data));
        }
        
        CourseStore.course[(this.state.newCourse) ? 'post' : 'put'](payload)
            .then(
                (data) => {
                    this.setState({
                        course: data,
                        newCourse: false
                    });
                    LoadingActions.flashMessage('success', 'Save Complete.');
                    this.props.dispatch(initialize('courseEditForm', data, CourseEditFormFields));
                },
                (error) => {
                    LoadingActions.stopLoading();
                    LoadingActions.showMessage('error', 'Error!');
                    this.setState({errors: error});
                    window.scrollTo(0, 0);
                }
            );
    },
    cancelChanges() {
        this.history.pushState(null, `/course`);
    },
    render() {
        var {similarCourses, courseEditForm} = this.props;
        return (
            <div>
                <h1>Edit Course</h1>
                {this.renderSaveButtons()}
                <TabView transition={false}>
                    <Tab>Edit</Tab>
                    <TabContent>
                        <div>
                            {this.renderServerErrors()}
                            <CourseEditForm
                                ref="courseEditForm"
                                onSubmit={this.onSubmit}
                                new={this.state.newCourse}
                                similarCourses={this.props.courses}
                                initialValues={this.props.course.toJS()}
                            />
                            {this.renderSaveButtons()}
                        </div>
                    </TabContent>

                    <Tab>Preview</Tab>
                    <TabContent>
                        <CourseView course={fromJS(courseEditForm)} similarCourses={similarCourses}/>
                    </TabContent>
                </TabView>
            </div>
        );
    },
    renderSaveButtons() {
        return (
            <div className="padding flush-right right">
                <Link to="/course" className="Button Button-grey">Cancel</Link>
                <Button modifier="edit" onClick={this.saveCourse} disabled={!this.props.courseEditForm}>Save</Button>
            </div>
        );
    },
    renderServerErrors() {
        if (this.state.errors) {
            return <div className="InfoBox InfoBox-error">
                {this.state.errors.errorMessage}
            </div>;
        }
    }
});


const autoRequest = AutoRequest(['params.id'], props => {
    var {dispatch} = props;
    dispatch(requestCourseList());
});

const connectWithCourses = connect((state, props) => {
    return {
        course: props.course || CourseFormDefaults,
        courses: state.course.getIn(['collection']),
        courseEditForm: getValues(state.form.courseEditForm),
        pristine: state.form.courseEditForm
    }
})

export default connectWithCourses(autoRequest(CourseEditView));