RXJS & React With Inline onClick

by gemmadlou

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.8/rx.all.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<!-- React & JSFiddle - https://jsfiddle.net/reactjs/69z2wepo/ -->
<p>Testing stateless react components with rxjs, and storing no state in application. An attempt to be as purely functional as possible...the exception being rendering the dom, not the building up of the virtual dom.</p>
<p>Memoization solves the problem of storing state to prevent making AJAX calls for repeated search or same data, or pressing the back button, as it caches the search result :) - thanks to: <a href="https://gist.github.com/contolini/6115380">Contolini's Gist</a></p>
<div id="page">
</div>
<div id="app">
</div>

JavaScript 1.7

console.clear();

var getCache = function(url) {

  var supportsLocalStorage = 'localStorage' in window;

  // Both functions return a promise, so no matter which function
  // gets called inside getCache, you get the same API.

  function getJSON(url) {

    var promise = $.getJSON(url);

    promise.done(function(data) {
      localStorage.setItem(url, JSON.stringify(data));
    });

    console.log('%c' + url + ' fetched via AJAX', 'color: orange');

    return promise;

  }

  function getStorage(url) {

    var storageDfd = new $.Deferred(),
      storedData = localStorage.getItem(url);

    if (!storedData) {
      return getJSON(url);
    }

    setTimeout(function() {
      storageDfd.resolveWith(null, [JSON.parse(storedData)]);
    });

    console.log('%c' + url + ' fetched via localStorage', 'color: blue');

    return storageDfd.promise();

  }

  return supportsLocalStorage ? getStorage(url) : getJSON(url);

};

var githubsearch = function(what) {

  var url = 'https://api.github.com/search/repositories?q=' + what + '+language:html&sort=stars&order=desc'

  return Rx.Observable
    .fromPromise(getCache(url))
    .map(data => data.items)
    .map(items => <Results items={items} search={what} />);
}

var Input = function(props) {
    return <div >
      <input onChange={window.getData} />  
      <button onClick={
    	window.getDataBySearch.bind(this, props.search)
  		}> Search Github Repos </button> </div>
}

// Mocking dynamic load of button
var render = function() {
  ReactDOM.render( <Input /> ,
    document.getElementById('page')
  )
}

window.getDataBySearch = function(search) {
  githubsearch(search).subscribe(text => {
    var app = document.getElementById('app')
    ReactDOM.render(text, app)
  })
}

window.getData = function(e) {
  if (e.target.value.length < 2) return;
  var search = e.target.value
  githubsearch(e.target.value).subscribe(text => {
      var app = document.getElementById('app')
      ReactDOM.render(text, app)
     ...