application/components/content/content-attachment-view.js

import React, {Component} from 'react';
import FontIcon from 'material-ui/FontIcon';
import FlatButton from 'material-ui/FlatButton';
import {Row, Col} from './../flexbox';

import ContentMediaEditor from './content-media-editor';

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

import {
    contentAttachmentUpdate
} from './../../redux/actions/content-actions';

class ContentAttachmentView extends Component {
    constructor(props) {
        super(props);

        this.state = {
            doEdit: false,
            angle: 0,
            source: false,
            height: false,
            width: false
        }
    }

    handleUpload(fileData) {
        const {dispatch} = this.props;
        return dispatch(contentAttachmentUpdate(this.props.content.get('uuid'), fileData))
            .then(() => dispatch(snackbarShowMessage('Preview image replaced')))
            .then(() => setTimeout(() => {
                const img = new Image;
                img.onload = () => {
                    const date = new Date;
                    const cacheBust = date.getTime();
                    this.setState({
                        angle: 0,
                        source: this.props.content.get('attachment').get('public_url') + '#' + cacheBust,
                    });
                };
                img.src = this.props.content.get('attachment').get('public_url') + '#' + new Date().getTime();
            }, 1000));

    }

    handleReplace(e) {
        const files = e.target.files;
        const file = files[0];
        const reader = new FileReader();
        const {dispatch} = this.props;

        reader.addEventListener('error', () => {
            dispatch(snackbarShowMessage('Unable to read file'));
        });
        reader.addEventListener("load", () => {
            dispatch(snackbarShowMessage('Uploading ' + file.name, false));
            this.handleUpload.call(this, {
                file: reader.result.split(',')[1],
                name: file.name
            });
        }, false);

        if (file) {
            reader.readAsDataURL(file);
        }
    }

    handleEdit() {
        const height = this.refs.masterImage ? this.refs.masterImage.offsetHeight : false;
        const width =  this.refs.masterImage ? this.refs.masterImage.offsetWidth : false;

        const date = new Date;
        const cacheBust = date.getTime();

        this.setState({
            doEdit: !this.state.doEdit,
            angle: 0,
            source: this.props.content.get('attachment').get('public_url') + '#' + cacheBust,
            height: height ? height : false,
            width: width ? width : false
        });
    }

    handleSave(fileData) {
        const {dispatch} = this.props;
        dispatch(snackbarShowMessage('Saving changes...', false));
        return this.handleUpload.call(this, {
            file: fileData.split(',')[1],
            name: this.props.content.get('attachment').get('base_name') + '.' + this.props.content.get('attachment').get('extension')
        });
    }
    // handleSave(type, query) {
    //     const {dispatch} = this.props;

    //     if (!type || type === null) {
    //         return dispatch(contentAttachmentUpdate(this.props.content.get('uuid'), {orientate: true}))
    //             .then(() => dispatch(snackbarShowMessage('Image updated')));
    //     }

    //     const meta = {};
    //     meta[type] = query;

    //     return dispatch(contentAttachmentUpdate(this.props.content.get('uuid'), {metadata: meta}))
    //         .then(() => dispatch(snackbarShowMessage('Image metadata updated')));
    // }

    handleEditClose() {
        this.setState({doEdit: false});
    }

    render() {
        return (
            <Col xs={6}>
                <Row>
                    <Col xs={4}>
                        <FlatButton
                            label="Edit"
                            primary={true}
                            icon={<FontIcon className='mui-icons'>transform</FontIcon>}
                            disabled={this.props.isUserEditable ? false : true}
                            onClick={this.handleEdit.bind(this)}
                            />
                    </Col>
                    <Col xs={4}>
                        <FlatButton
                            label="Replace"
                            primary={true}
                            icon={<FontIcon className='mui-icons'>cloud_upload</FontIcon>}
                            disabled={this.props.isUserEditable ? false : true}
                            containerElement='label'
                            >
                            <input
                                type="file"
                                ref='replaceFile'
                                onChange={this.handleReplace.bind(this)}
                                style={{
                                    cursor: 'pointer',
                                    position: 'absolute',
                                    top: 0,
                                    bottom: 0,
                                    right: 0,
                                    left: 0,
                                    width: '100%',
                                    opacity: 0
                                }} />
                        </FlatButton>
                    </Col>
                    <Col xs={4}>
                        <a href={this.props.content.get('attachment').get('original_url')} target="_blank" target="_blank">
                            <FlatButton
                                label="Original"
                                icon={<FontIcon className='mui-icons'>open_in_new</FontIcon>}
                                />
                        </a>
                    </Col>
                </Row>
                <Row>
                    <Col xs={12}>
                        <img ref="masterImage" src={this.state.source ? this.state.source : this.props.content.get('attachment').get('public_url')} style={{'maxWidth':'100%'}}/>
                        <ContentMediaEditor
                            onSave={this.handleSave.bind(this)}
                            onRequestClose={this.handleEditClose.bind(this)}
                            open={this.state.doEdit}
                            src={this.state.source ? this.state.source : this.props.content.get('attachment').get('public_url')}
                            imgixSrc={this.props.content.get('attachment') ? this.props.content.get('attachment').get('imgix_url') : false}
                            />
                    </Col>
                </Row>
           </Col>
        );
    }
}

export default ContentAttachmentView;