app.js

import React from 'react';
import PropTypes from 'prop-types';

import { DebugPanel } from './DebutPanel';
import { SessionConfig } from './SessionConfig';
import { AboutTestingTool } from './AboutTestingTool';
import { Agent } from './Agent';
import { Footer } from './Footer';
import { TestNavigation } from './session/TestNavigation';

export default class App extends React.Component {
  constructor() {
    super();
    this.state = { hasData: false };
  }

  componentDidMount() {
    if (!this.state.hadData) {
      return <div>Loading</div>;
    } else {
      this.render();
    }
  }

  render() {
    return (
      <div>
        <TestNavigation supported_tests={this.props.supported_tests} />
        <Agent agent_link="http://localhost/agent_location" />
        <DebugPanel />
        <SessionConfig amqp_url={this.state.session_config.amqp_url} />
        <AboutTestingTool />
        <Footer />
      </div>
    );
  }

  static propTypes = {
    // supported_tests: PropTypes.arrayOf(String).isRequired
  };

  refresh_state() {
    fetch('/state')
      .then(response => {
        if (response.status !== 200) {
          console.log('Looks like there was a problem. Status Code: ' + response.status);
          return;
        }

        // Examine the text in the response
        response.json().then(data => this.setState(data));
      })
      .catch(err => {
        console.log('Fetch Error :-S', err);
      });
    this.state.hasData = true;
  }
}