All files / javascripts/explorev2/components DisplayQueryButton.jsx

67.74% Statements 21/31
60% Branches 6/10
20% Functions 1/5
67.74% Lines 21/31
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 971x 1x 1x 1x   1x   1x           1x         3x   1x           1x 1x                                             1x 1x             1x     1x       2x           2x     2x           2x                           1x 1x  
import React, { PropTypes } from 'react';
import ModalTrigger from './../../components/ModalTrigger';
import SyntaxHighlighter from 'react-syntax-highlighter';
import { github } from 'react-syntax-highlighter/dist/styles';
 
const $ = window.$ = require('jquery');
 
const propTypes = {
  animation: PropTypes.bool,
  queryResponse: PropTypes.object,
  chartStatus: PropTypes.string,
  queryEndpoint: PropTypes.string.isRequired,
};
const defaultProps = {
  animation: true,
};
 
export default class DisplayQueryButton extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      language: null,
      query: null,
      isLoading: false,
      error: null,
    };
    this.beforeOpen = this.beforeOpen.bind(this);
    this.fetchQuery = this.fetchQuery.bind(this);
  }
  fetchQuery() {
    this.setState({ isLoading: true });
    $.ajax({
      type: 'GET',
      url: this.props.queryEndpoint,
      success: data => {
        this.setState({
          language: data.language,
          query: data.query,
          isLoading: false,
        });
      },
      error: data => {
        this.setState({
          error: data.error,
          isLoading: false,
        });
      },
    });
  }
  setStateFromQueryResponse() {
    const qr = this.props.queryResponse;
    this.setState({
      language: qr.language,
      query: qr.query,
      isLoading: false,
    });
  }
  beforeOpen() {
    Iif (this.props.chartStatus === 'loading' || this.props.chartStatus === null) {
      this.fetchQuery();
    } else {
      this.setStateFromQueryResponse();
    }
  }
  renderModalBody() {
    Iif (this.state.isLoading) {
      return (<img
        className="loading"
        alt="Loading..."
        src="/static/assets/images/loading.gif"
      />);
    } else Iif (this.state.error) {
      return <pre>{this.state.error}</pre>;
    }
    return (
      <SyntaxHighlighter language={this.state.language} style={github}>
        {this.state.query}
      </SyntaxHighlighter>);
  }
  render() {
    return (
      <ModalTrigger
        animation={this.props.animation}
        isButton
        triggerNode={<span>Query</span>}
        modalTitle="Query"
        bsSize="large"
        beforeOpen={this.beforeOpen}
        modalBody={this.renderModalBody()}
      />
    );
  }
}
 
DisplayQueryButton.propTypes = propTypes;
DisplayQueryButton.defaultProps = defaultProps;