TESTTEST

<html>
<head>
  <title>Hello React</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://fb.me/react-0.13.3.js"></script>
  <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
  <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<style>
  .bold {
    font-weight: bold;
  }

  .textcenter {
    text-align: center;
  }

  .margin-bot-20 {
    margin-bottom: 20px;
  }

  .productSearchImage {
    width: 80%;
  }

  .productSearchName {
    margin-top: 5px;
    font-size: 20px;
  }

</style>
<div id="content"></div>
<script type="text/jsx">

  /*var ProductBox = React.createClass({
   loadProductsFromServer: function() {
   $.ajax({
   url: this.props.url,
   dataType: 'json',
   cache: false,
   success: function(data) {
   this.setState({data: data});
   }.bind(this),
   error: function(xhr, status, err) {
   console.error(this.props.url, status, err.toString());
   }.bind(this)
   });
   },
   getInitialState: function() {
   return {data: []};
   },
   componentDidMount: function() {
   this.loadProductsFromServer();
   setInterval(this.loadProductsFromServer, this.props.pollInterval);
   },
   render: function() {
   return (
   <div>
   <h1>PRODUCTS</h1>
   <ProductList products={this.props.products} />
   </div>
   )
   }
   });*/

  var FilteredProductTable = React.createClass({
    loadProductsFromServer: function() {
      $.ajax({
        url: this.props.url,
        dataType: 'json',
        cache: false,
        success: function(data) {
          this.setState({data: data});
        }.bind(this),
        error: function(xhr, status, err) {
          console.error(this.props.url, status, err.toString());
        }.bind(this)
      });
    },
    getInitialState: function() {
      return {data: []};
    },
    componentDidMount: function() {
      this.loadProductsFromServer();
      setInterval(this.loadProductsFromServer, this.props.pollInterval);
    },
    render: function() {
      return (
              <div>
                <h1>PRODUCTS</h1>
                <ProductTable products={this.state.data} />

              </div>
      );
    }
  });

  var ProductTable = React.createClass({
    render: function() {
      var rows = [];
      var lastCategory = null;
      this.props.products.forEach(function(product) {
        rows.push(<ProductRow product={product} key={product.name} />);
      });
      return (
              <div className="container">
                {rows}
              </div>
      );
    }
  });


  var ProductRow = React.createClass({
    render: function() {
      return (
              <div className="col-md-4 textcenter margin-bot-20">
                <img src={this.props.product.thumbnail} alt="boohoo" className="productSearchImage" />
                <p className="productSearchName bold">{this.props.product.name}</p>
                <p className="productSearchPrice bold">Kr.{this.props.product.variants[0].price},-</p>
                <a href="/products/{this.props.product.number}"><button className="bold">Se mere</button></a>
              </div>
      );
    }
  });

  var ProductCategoryRow = React.createClass({
    render: function() {
      return (<tr><th colSpan="2">{this.props.category}</th></tr>);
    }
  });

  /*var ProductName = React.createClass({

   });

   var ProductPrice = React.createClass({

   });

   var Button = React.createClass({

   });*/

  React.render(
          <FilteredProductTable url="http://52.16.142.71:3000/api/products" pollInterval={2000} />,
          document.getElementById('content')
  );

</script>
</body>
</html>