index.tsx

import * as React from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';

import {Location} from 'model/location.model';
import {Dataset} from 'model/dataset.model';

import {createLocationRequest, deleteLocationRequest, updateLocationRequest} from 'actions/dataset';

import TimingAndLocationForm from './TimingAndLocationForm';
import steps from '../../steps';
import NavigationWrapper from 'ui/common/stepper/NavigationWrapper';
import {getFormValues, change} from 'redux-form';
import {TIMING_AND_LOCATION_FORM} from 'constants/datasets';
import * as _ from 'lodash';

interface ITimingAndLocationStepProps extends React.ClassAttributes<any> {
    dataset: Dataset;
    createLocationRequest: (datasetUUID: string) => Promise<Location>;
    updateLocationRequest: (datasetUUID: string, location: Location) => Promise<Location>;
    deleteLocationRequest: (datasetUUID: string, location: Location) => Promise<Location>;
    stillLoading: boolean;
    onDelete: () => void;
    onPublish: () => void;
    onGotoStep: (id: number) => () => void;
    location: any;
    formValues: any;
    change: any;
}

class TimingAndLocationStep extends React.Component<ITimingAndLocationStepProps, any> {

    protected gotoStep = (id) => () => {
        this.updateIfNeed();
        this.props.onGotoStep(id);
    }

    protected createLocation = (datasetUUID: string) => {
        this.updateIfNeed();
        this.props.createLocationRequest(datasetUUID);
    }

    protected changeFieldValue = (field, value) => {
        this.props.change(TIMING_AND_LOCATION_FORM, field, value);
    }

    private updateIfNeed = () => {
        const { dataset, formValues : { locations }, updateLocationRequest } = this.props;
        if (dataset) {
            dataset.locations.map((oldLocation) => {
                const updatedLocation = locations.find((l) => l.uuid === oldLocation.uuid);
                if (!_.isEqual({...updatedLocation}, {...oldLocation})) {
                    updateLocationRequest(dataset.uuid, {...oldLocation, ...updatedLocation});
                }
            });
        }
    }

    public render() {
        const {dataset, deleteLocationRequest, stillLoading, onPublish, onDelete, location} = this.props;

        return (
            <NavigationWrapper location={ location } stillLoading={ stillLoading }
                disabledNext={ false } disabled={ false } steps={ steps }
                gotoStep={ this.gotoStep } onDelete={ onDelete } onPublish={ onPublish }>
                <TimingAndLocationForm
                    dataset={ dataset }
                    initialValues={ dataset }
                    createLocation={ this.createLocation }
                    deleteLocation={ deleteLocationRequest }
                    changeFieldValue={ this.changeFieldValue }
                />
            </NavigationWrapper>
        );
    }
}

const mapStateToProps = (state, ownProps) => ({
    dataset: state.datasets.currentDataset,
    stillLoading: ownProps.stillLoading,
    location: ownProps.location,
    onDelete: ownProps.onDelete,
    onGotoStep: ownProps.onGotoStep,
    onPublish: ownProps.onPublish,
    formValues: getFormValues(TIMING_AND_LOCATION_FORM)(state),
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
    createLocationRequest,
    updateLocationRequest,
    deleteLocationRequest,
    change,
}, dispatch);

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