React = require('react');

var DisplayBox = React.createClass({
  getInitialState: function() {
    return {data: []};
  },
  postRequest: function(api) {
    
  },
  handleQuerySubmit: function(query) {
    $.ajax({
      url: 'general-query',
      dataType: 'json',
      type: 'POST',
      data: query,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error('general-query', status, err.toString());
      }.bind(this)
    });
  },
  render: function() {
    return (
      <div className="displayBox">
        <SearchForm onQuerySubmit={this.handleQuerySubmit} />
        <RelatedResultsDisplay data={this.state.data} />
      </div>
    );
  }
});

var RelatedResultsDisplay = React.createClass({
  render: function() {
    var resultNodes = this.props.data.map(function(result, index) {
      console.log(result);
      return (
        result
      );
    });
    return (
      <div>
        <h2>Related Results</h2>
        {resultNodes}
      </div>
    );
  }
});

var SearchForm = React.createClass({
  handleSubmit: function(e) {
    e.preventDefault();

    var query = React.findDOMNode(this.refs.query).value.trim();

    this.props.onQuerySubmit({query: query});

    React.findDOMNode(this.refs.query).value = '';
  },
  render: function() {
    return (
      <div>
        <h4 className="form-title">ShopChimp, at your service.</h4>

        <form className="query-form" onSubmit={this.handleSubmit}>
          <input type="text" placeholder="Enter a product" className="form-control" ref="query" />

          <center><button className="btn btn-primary">Submit</button></center>
        </form>
      </div>
    );
  }
});

var Home = React.createClass({
	render: function() {
		return (
      <div className="home-page">
        <DisplayBox />
      </div>
		);
	}
});

module.exports = Home;
@@ -105,16 +105,107 @@
 rn %7B
-data: %5B%5D
+%0A      amazon: %7Bamazon: %5B%5D%7D,%0A      walmart: %7Bwalmart: %5B%5D%7D,%0A      bestbuy: %7Bbestbuy: %5B%5D%7D,      %0A    
 %7D;%0A 
@@ -235,16 +235,23 @@
 tion(api
+, query
 ) %7B%0A    
@@ -251,16 +251,196 @@
  %7B%0A    %0A
+    var url = 'general-query-' + api;%0A%0A    $.ajax(%7B%0A      url: url,%0A      dataType: 'json',%0A      type: 'POST',%0A      data: query,%0A      success: function(data) %7B%0A%0A      %7D%0A    %7D);%0A
   %7D,%0A  h
@@ -623,33 +623,143 @@
     
-this.setState(%7Bdata: data
+console.log(data%5B0%5D)%0A        this.setState(%7B%0A          amazon: data%5B0%5D,%0A          walmart: data%5B1%5D,%0A          bestbuy: data%5B2%5D%0A        
 %7D);%0A
@@ -1058,16 +1058,22 @@
        %3C
+Amazon
 RelatedR
@@ -1103,20 +1103,89 @@
 s.state.
-data
+amazon%7D /%3E%0A        %3CWalmartRelatedResultsDisplay data=%7Bthis.state.walmart
 %7D /%3E%0A   
@@ -1214,16 +1214,22 @@
 );%0A%0Avar 
+Amazon
 RelatedR
@@ -1325,16 +1325,23 @@
 ps.data.
+amazon.
 map(func
@@ -1372,28 +1372,318 @@
     
-console.log(result);
+return (%0A        result%0A      );%0A    %7D);%0A    return (%0A      %3Cdiv%3E%0A        %3Ch2%3EAmazon Related Results%3C/h2%3E%0A        %7BresultNodes%7D%0A      %3C/div%3E%0A    );%0A  %7D%0A%7D);%0A%0Avar WalmartRelatedResultsDisplay = React.createClass(%7B%0A  render: function() %7B%0A    var resultNodes = this.props.data.walmart.map(function(result, index) %7B
 %0A   
@@ -1763,16 +1763,24 @@
     %3Ch2%3E
+Walmart 
 Related 

add walmartRelatedResultsDisplay module