rricard/index.html

## index.html
<html>
  <head>
    <title>Reactive AnyFetch</title>
    <script src="http://fb.me/react-0.10.0.js"></script>
    <script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
    <script type="text/jsx" src="./search-box.jsx"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/superagent/0.15.7/superagent.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/jsx">
      /** @jsx React.DOM */

      React.renderComponent(
        <SearchBox endpoint="https://api.anyfetch.com/documents" />,
        document.getElementById('content')
      );
    </script>
  </body>
</html>

## search-box.jsx
/** @jsx React.DOM */
var ConfigForm = React.createClass({
  handleSubmit: function() {
    var bearer = this.refs.bearer.getDOMNode().value;
    this.props.onSubmit(bearer);
  },
  render: function() {
    return (
      <form className="configForm" action="#" onSubmit={this.handleSubmit}>
        <input ref="bearer" placeholder="enter your token" />
        <input type="submit" value="Authenticate" />
      </form>
    );
  }
});

var SearchField = React.createClass({
  handleTyping: function() {
    var query = this.refs.query.getDOMNode().value;
    this.props.onType(query);
  },
  render: function() {
    return (
      <section className="searchField">
        <input type="search" onChange={this.handleTyping} ref="query" placeholder="type your query" />
      </section>
    );
  }
});


var Result = React.createClass({
  render: function() {
    return (
      <article className="result">
        <h2 className="resultTitle">
          <a href={this.props.url}>
            {this.props.title}
          </a>
        </h2>
        <pre className="resultPath">
          {this.props.path}
        </pre>
        <p class="resultSnippet" dangerouslySetInnerHTML={{__html: this.props.children}} />
      </article>
    );
  }
});

var ResultList = React.createClass({
  render: function() {
    var resultNodes = this.props.data.map(function (result) {
      return (
        <Result title={result.data.title}
                url={result.document_url}
                path={result.data.path}>
          {result.data.snippet}
        </Result>
      );
    });
    return (
      <section className="resultList">
        {resultNodes}
      </section>
    );
  }
});

var SearchBox = React.createClass({
  getInitialState: function() {
    this.reactionTimer = null;
    return {data: [], bearer: null}
  },
  loadResults: function(query) {
    console.log('delayed')
    window.superagent
      .get(this.props.endpoint)
      .query({ search: query })
      .set('Authorization', 'Bearer ' + this.state.bearer)
      .end(this.applyResults);
  },
  applyResults: function(res) {
    this.setState({data: res.body.data});
  },
  setConfig: function(bearer) {
    this.setState({bearer: bearer});
  },
  render: function() {
    return (
      <div className="app">
        <ConfigForm onSubmit={this.setConfig} />
        <SearchField onType={this.loadResults} />
        <ResultList data={this.state.data} />
      </div>
    );
  }
});
	<html>
	<head>
	<title>Reactive AnyFetch</title>
	<script src="http://fb.me/react-0.10.0.js"></script>
	<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
	<script type="text/jsx" src="./search-box.jsx"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/superagent/0.15.7/superagent.min.js"></script>
	</head>
	<body>
	<div id="content"></div>
	<script type="text/jsx">
	/** @jsx React.DOM */

	React.renderComponent(
	<SearchBox endpoint="https://api.anyfetch.com/documents" />,
	document.getElementById('content')
	);
	</script>
	</body>
	</html>
	/** @jsx React.DOM */
	var ConfigForm = React.createClass({
	handleSubmit: function() {
	var bearer = this.refs.bearer.getDOMNode().value;
	this.props.onSubmit(bearer);
	},
	render: function() {
	return (
	<form className="configForm" action="#" onSubmit={this.handleSubmit}>
	<input ref="bearer" placeholder="enter your token" />
	<input type="submit" value="Authenticate" />
	</form>
	);
	}
	});

	var SearchField = React.createClass({
	handleTyping: function() {
	var query = this.refs.query.getDOMNode().value;
	this.props.onType(query);
	},
	render: function() {
	return (
	<section className="searchField">
	<input type="search" onChange={this.handleTyping} ref="query" placeholder="type your query" />
	</section>
	);
	}
	});


	var Result = React.createClass({
	render: function() {
	return (
	<article className="result">
	<h2 className="resultTitle">
	<a href={this.props.url}>
	{this.props.title}
	</a>
	</h2>
	<pre className="resultPath">
	{this.props.path}
	</pre>
	<p class="resultSnippet" dangerouslySetInnerHTML={{__html: this.props.children}} />
	</article>
	);
	}
	});

	var ResultList = React.createClass({
	render: function() {
	var resultNodes = this.props.data.map(function (result) {
	return (
	<Result title={result.data.title}
	url={result.document_url}
	path={result.data.path}>
	{result.data.snippet}
	</Result>
	);
	});
	return (
	<section className="resultList">
	{resultNodes}
	</section>
	);
	}
	});

	var SearchBox = React.createClass({
	getInitialState: function() {
	this.reactionTimer = null;
	return {data: [], bearer: null}
	},
	loadResults: function(query) {
	console.log('delayed')
	window.superagent
	.get(this.props.endpoint)
	.query({ search: query })
	.set('Authorization', 'Bearer ' + this.state.bearer)
	.end(this.applyResults);
	},
	applyResults: function(res) {
	this.setState({data: res.body.data});
	},
	setConfig: function(bearer) {
	this.setState({bearer: bearer});
	},
	render: function() {
	return (
	<div className="app">
	<ConfigForm onSubmit={this.setConfig} />
	<SearchField onType={this.loadResults} />
	<ResultList data={this.state.data} />
	</div>
	);
	}
	});