appbaseio/dejaVu

// @flow

import React, { Component } from 'react';
import { connect } from 'react-redux';
import {
    FlashMessage as ErrorFlashMessage,
    ConnectApp,
    appReducers,
} from '@appbaseio/dejavu-browser';

const { getIsConnected, getAppname, getUrl } = appReducers;

const LZMA = require('lzma/src/lzma-c');
require('urlsafe-base64/app.js');

type Props = {
    isConnected: boolean,
    appname?: string,
    rawUrl?: string,
};

type State = {
    isProcessingUrl: boolean,
    url: string,
};

class QueryExplorer extends Component<Props, State> {
    state = {
        isProcessingUrl: false,
        url: '',
    };

    componentDidMount() {
        this.processUrl();
    }

    componentDidUpdate(nextProps) {
        if (nextProps.rawUrl !== this.props.rawUrl) {
            this.processUrl();
        }
    }

    processUrl = () => {
        const { rawUrl, appname } = this.props;
        if (rawUrl) {
            this.setState({
                isProcessingUrl: true,
            });
            const connectionString = JSON.stringify({
                url: rawUrl,
                appname,
            });
            LZMA.LZMA_WORKER.compress(connectionString, 9, url => {
                const res = window.SafeEncode.encode(
                    window.SafeEncode.buffer(url),
                );
                this.setState({
                    isProcessingUrl: false,
                    url: res,
                });
            });
        }
    };

    render() {
        const { isConnected } = this.props;
        const { url, isProcessingUrl } = this.state;

        return (
            <section
                css={{
                    '.ui-layout-pane': {
                        borderRadius: '3px',
                        borderColor: '#eee',
                    },
                }}
            >
                <ErrorFlashMessage />
                <ConnectApp />
                <br />
                {isConnected && !isProcessingUrl && url && (
                    <iframe
                        title="Importer"
                        src={`https://opensource.appbase.io/mirage/#?input_state=${url}&hf=false&subscribe=false`}
                        frameBorder="0"
                        width="100%"
                        style={{
                            height: '80vh',
                        }}
                    />
                )}
            </section>
        );
    }
}

const mapStateToProps = state => ({
    isConnected: getIsConnected(state),
    appname: getAppname(state),
    rawUrl: getUrl(state),
});

export default connect(mapStateToProps)(QueryExplorer);