index.tsx

import * as React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import Grid from 'material-ui/Grid';

import { log } from 'utilities/debug';
import confirm from 'utilities/confirmAlert';

import TopSection from 'ui/common/stepper/TopSection';
import BottomSection from 'ui/common/stepper/BottomSection';
import { navigateTo } from 'actions/navigation';
import { setPageTitle } from 'actions/pageTitle';
import { loadDataset, publishDataset, deleteDataset } from 'actions/dataset';
import { Dataset } from 'model/dataset.model';
import renderRoutes from 'ui/renderRoutes';
import steps from './steps';

interface IDatasetProps extends React.ClassAttributes<any> {
    classes: any;
    location: any;

    uuid: string;
    pageTitle: string;
    dataset: Dataset;
    loadDataset: (uuid: string) => Promise<Dataset>;
    publishDataset: (dataset: Dataset) => void;
    deleteDataset: (dataset: Dataset) => Promise<Dataset>;

    navigateTo: (path: string) => void;
    setPageTitle: (title: string) => void;
    route: any;
    match: any;
}

class DatasetStepper extends React.Component<IDatasetProps, any> {

    protected static needs = [
        ({ params: { uuid } }) => loadDataset(uuid),
    ];

    public constructor(props: any) {
        super(props);
        const {pageTitle, setPageTitle} = this.props;
        setPageTitle(pageTitle);
    }

    public componentDidMount() {
        const {uuid, dataset, loadDataset} = this.props;

        if (uuid && (!dataset || dataset.uuid !== uuid)) {
            loadDataset(uuid);
        }
    }

    protected gotoStep = (id) => {
        const {dataset, uuid, navigateTo} = this.props;
        const path = steps.find((e) => e.id === id).link;
        log('Go to step', path);
        if (uuid || (dataset && dataset.uuid)) {
          navigateTo(`/datasets/${dataset ? dataset.uuid : uuid}/${path}`);
        } else {
          // no navigation!
        }
    }

    protected onDelete = (e) => {
        const {dataset, deleteDataset, navigateTo} = this.props;
        log('Removing dataset', dataset);
        confirm(<span>Delete <b>{ dataset.title }</b>?</span>, {
            description: `Deleting the dataset will remove all related data.`,
            confirmLabel: 'Delete',
            abortLabel: 'Cancel',
        }).then(() => {
            deleteDataset(dataset).then(() => navigateTo(`/dashboard`));
        }).catch(() => {
            // don't delete
        });
    }

    public onPublish = (e) => {
      const {dataset, publishDataset} = this.props;
      log('Publishing dataset', dataset);
      publishDataset(dataset);
    }

    public render() {
        const {uuid, pageTitle, route, match} = this.props;
        let {dataset} = this.props;

        const stillLoading: boolean = (! dataset || (uuid && (dataset.uuid !== uuid)));

        if (! dataset && ! uuid) {
          dataset = new Dataset();
        }

        if (! dataset) {
          log('No dataset.');
          return null;
        }

        return (
            <Grid container spacing={ 0 }>
                <TopSection pageTitle={ pageTitle } subTitle="Publish your datasets" />
                {
                    renderRoutes(route.routes, match.path, { stillLoading, onGotoStep: this.gotoStep, onDelete: this.onDelete, onPublish: this.onPublish })
                }
                <BottomSection/>
            </Grid>
        );
    }

}

const mapStateToProps = (state, ownProps) => ({
    pageTitle: ownProps.route.extraProps.title, // route-configured
    location: ownProps.location,
    uuid: ownProps.match.params.uuid,
    dataset: state.datasets.currentDataset,
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
    loadDataset,
    publishDataset,
    deleteDataset,
    navigateTo,
    setPageTitle,
}, dispatch);

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