application/components/content/content-export.js

import React from 'react';
import Immutable from 'immutable';
import {connect} from 'react-redux';

import Divider from 'material-ui/Divider';
import Dialog from 'material-ui/Dialog';
import RaisedButton from 'material-ui/RaisedButton';
import FlatButton from 'material-ui/FlatButton';

import {Row, Col} from './../flexbox';
import {List, ListItem} from 'material-ui/List';

import LoadingIndicator from './../common/loading-indicator';
import CurrentUser from './../../current-user';

import {
    contentVersionsFetch,
    contentVersionRestore
} from './../../redux/actions/content-version-actions';

import {
    snackbarShowMessage
} from './../../redux/actions/snackbar-actions';

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

        this.state = {
            'text': false
        };
    }


    componentWillReceiveProps(nextProps) {
        if (nextProps.isOpen && !this.props.isOpen) {
            this.handleOpen.call(this);
        }
    }


    handleOpen() {
        this.setState({'text': false});
        // this.props.dispatch(contentVersionsFetch(this.props.content.srn))
        //     .then(() => {
        //         this.setState({'selected': this.props.versions.items.first()})
        //     });
    }

    handleClose() {
        if (this.props.onRequestClose) {
            this.props.onRequestClose();
        }
    }

    exportAs(type) {
        const {dispatch} = this.props;
        dispatch(snackbarShowMessage('Exporting...', 0));

        const url = '/v3/export/' + this.props.content.get('uuid') + '/as/' + type;
        let fname = false;

        fetch(url, {
                'credentials': 'same-origin',
                'headers': {
                    'Authorization': 'Basic ' + btoa(CurrentUser.privateToken() + ':')
                }
            })
            .then((r) => {
                // set the file name here because we need to return the text promise...
                fname = r.headers.get('Content-Disposition').match(/filename="(.*?)"/)[1];
                return r.text();
            })
            .then((text) => {
                if (!window) {
                    return;
                }
                // create the data url, inject, click and remove
                var earl = window.URL.createObjectURL(new Blob([text]));
                var tempLink = document.createElement('a');
                tempLink.href = earl;
                tempLink.setAttribute('download', fname);
                tempLink.setAttribute('target', '_blank');
                document.body.appendChild(tempLink);
                tempLink.click();
                document.body.removeChild(tempLink);

                dispatch(snackbarShowMessage('Exported ' + fname));
            });
    }

    render() {

        const actions = [
            <FlatButton
                label='Close'
                onClick={this.handleClose.bind(this)}
            />,
        ];
        return (
            <Dialog
                actions={actions}
                modal={true}
                open={this.props.isOpen}
                autoScrollBodyContent={true}
                >
                <strong>Export</strong>
                <p>
                    Please select an export type:
                </p>
                <List>
                    <ListItem
                        primaryText="ICML"
                        secondaryText="ICML files can be imported directly into InDesign and InCopy."
                        onClick={this.exportAs.bind(this, 'icml')}
                        />
                    <ListItem
                        primaryText="HTML"
                        secondaryText="Plain HTML files can be used pretty much anywhere."
                        onClick={this.exportAs.bind(this, 'html')}
                        />
                    <ListItem
                        primaryText="Text"
                        secondaryText="Plain text files can be easily imported into Word or Google Docs."
                        onClick={this.exportAs.bind(this, 'text')}
                        />
                </List>
            </Dialog>
        );
    }
}

export default connect()(ExportModal);