application/components/content/content-simple-publish.js

import React from 'react';
import moment from 'moment';

import Dialog from 'material-ui/Dialog';
import {Step, Stepper, StepLabel} from 'material-ui/Stepper';
import RaisedButton from 'material-ui/RaisedButton';
import FlatButton from 'material-ui/FlatButton';
import FontIcon from 'material-ui/FontIcon';
import DatePicker from 'material-ui/DatePicker';
import TimePicker from 'material-ui/TimePicker';
import Subheader from 'material-ui/Subheader';

import {stateToHTML} from 'draft-js-export-html';
// import stateToHTML from './../../exportToHTML_modified';
import SimpleEditor from './../common/simple-editor';

import {Row, Col} from './../flexbox';

import UrlHandler from './url-handler';

class ContentSimplePublish extends React.Component {
    constructor(props) {
        super(props);

        this.totalSteps = 1;

        const now = new moment();

        this.state = {
            isOpen: this.props.isOpen,
            finished: false,
            stepIndex: 0,
            content: this.props.content,

            pubDate: now.add('1', 'days').startOf('day').local().toDate(),
            pubTime: now.add('1', 'days').startOf('day').local().toDate(),
        };

        this.handleDateChange = this.handleDateChange.bind(this);
        this.handleTimeChange = this.handleTimeChange.bind(this);
        this.handleFinish = this.handleFinish.bind(this);
        this.stepOne = this.stepOne.bind(this);
    }


    componentWillMount() {
        const now = new moment();

        this.setState({
            isOpen: this.props.isOpen,
            finished: false,
            stepIndex: 0,
            content: this.props.content,

            pubDate: now.add('1', 'days').startOf('day').local().toDate(),
            pubTime: now.add('1', 'days').startOf('day').local().toDate(),
        });
    }

    handleDateChange(e, date) {
        this.setState({pubDate: date});
    }

    handleTimeChange(e, time) {
        this.setState({pubTime: time});
    }

    handleFinish() {
        const pubDate = new moment(this.state.pubDate).utc();
        const pubTime = new moment(this.state.pubTime).utc();
        this.props.onPublish({
            'published_at': pubDate.format('L') + ' ' + pubTime.format('HH:mm:ss')
        });

        setTimeout(() => {
            this.handleClose();
        }, 100);
    }

    doPublishNow() {
        this.props.onPublish({
            'published_at': new moment().utc().format('Y-MM-DD HH:mm:ss')
        });

        setTimeout(() => {
            this.handleClose();
        }, 100);
    }

    stepOne() {

        return (
            <div>
                <p>Select a publish time and date, or publish immediately.</p>

                <Row middle={['xs']} center={['xs']}>
                    <Col xs={5}>
                        <RaisedButton
                            primary={true}
                            label='Publish Now'
                            onClick={this.doPublishNow.bind(this)}
                            />
                    </Col>
                    <Col xs={2}>
                        - OR -
                    </Col>
                    <Col xs={5}>
                        <DatePicker
                            value={this.state.pubDate}
                            onChange={this.handleDateChange}
                            autoOk={true}
                            floatingLabelText='Publication date'
                            firstDayOfWeek={0}
                            />
                        <TimePicker
                            value={this.state.pubTime}
                            autoOk={true}
                            onChange={this.handleTimeChange}
                            floatingLabelText='Publication time'
                            />
                    </Col>
                </Row>
            </div>
        );
    }

    handleNext() {
        const {stepIndex} = this.state;
        this.setState({
            stepIndex: stepIndex + 1,
            finished: stepIndex >= this.totalSteps - 1
        }, () => {
            if (this.state.finished) {
                this.handleFinish();
            }
        });
    }

    handlePrev() {
        const {stepIndex} = this.state;
        if (stepIndex > 0) {
            this.setState({stepIndex: stepIndex - 1, finished: false})
        } else {
            this.handleClose();
        }
    }

    handleCancel() {
        const {stepIndex} = this.state;
        if (stepIndex > 0) {
            this.setState({stepIndex: 0, finished: false})
        }
        this.handleClose();
    }

    getStepContent(index) {
        switch(index) {
            case 0:
                return this.stepOne();
        }
    }

    componentWillReceiveProps(nextProps) {
        this.setState(nextProps);
    }

    handleClose() {
        this.setState({'isOpen': false});
        if (this.props.onClose) {
            this.props.onClose();
        }
    }

    render() {
        const {finished, stepIndex} = this.state;
        const actions = [
            <FlatButton
                label='Cancel'
                secondary={true}
                onClick={this.handleCancel.bind(this)}
            />,
            <FlatButton
                style={stepIndex === 0 ? {display:'none'} : {display:'inline-block'} }
                label='Back'
                labelPosition='after'
                icon={<FontIcon className='mui-icons'>keyboard_arrow_left</FontIcon>}
                onClick={this.handlePrev.bind(this)}
            />,
            <FlatButton
                label={stepIndex === 2 ? 'Finish' : 'Next'}
                labelPosition='before'
                icon={stepIndex === 2 ? <FontIcon className='mui-icons'>check_circle</FontIcon> : <FontIcon className='mui-icons'>keyboard_arrow_right</FontIcon>}
                onClick={this.handleNext.bind(this)}
            />

        ];
        return (
            <Dialog
                actions={actions}
                modal={true}
                open={this.state.isOpen}
                >

                <Stepper activeStep={stepIndex}>
                    <Step>
                        <StepLabel>Publish</StepLabel>
                    </Step>
                </Stepper>
                <div>
                    {this.getStepContent(stepIndex)}
                </div>

            </Dialog>
        );
    }
}

export default ContentSimplePublish;