class App extends React.Component {
  render() {
    return <Home />;
  }
}

class Cert extends React.Component {
  render() {
    const {
      cert: { id, aggregated, fingerprint },
    } = this.props;

    return (
      <div className="col-md-8">
        {aggregated} -- {fingerprint}
      </div>
    );
  }
}

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      certs: [],
    };

    this.serverRequest = this.serverRequest.bind(this);
  }

  serverRequest() {
    $.get("http://localhost:3000/api/certs", (res) => {
      this.setState({
        certs: res,
      });
    });
  }

  componentDidMount() {
    this.serverRequest();
  }

  render() {
    return (
      <div className="container">
        <div className="col-md-8 col-md-offset-2 jumbotron text-center">
          <h1>Certstream app</h1>
        </div>
        <br />
        <div ClassName="row">
          {this.state.certs.map(function (cert, i) {
            return <Cert key={i} cert={cert} />;
          })}
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));