JSFiddle - React, Tailwind, and code Playground

by Hiroshi Kurokawa

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.7/rx.all.js"></script>
<button id="onresume">onResume</button>
<button id="onreload">onReload</button>

<div id="result">
  <h2>
  Featuers:
  </h2>
  <div id="features">
  </div>
  <h2>
  Saved Conditions:
  </h2>
  <div id="saved_conditions">
  </div>
</div>

<div id="progress" style="display: none;">
  Fetching...
</div>

<div id="error" style="display: none;">
  Error has occurred!
  <div id="error_msg">
  </div>
</div>

<hr/>
<h3>Logs:</h3>
<div id="log" />

Babel + JSX

// status
const LOADING = Symbol();
const SUCCESS = Symbol();
const FAILURE = Symbol();
const FeaturesFetchingStatus = new Rx.Subject();
const SavedConditionsFetchingStatus = new Rx.Subject();
let initial = true;

function print(s) {
  document.getElementById("log").innerHTML += (s + "<br/>");
}

function isFailure() {
  return Math.random() > 0.5;
}

function push(array, element) {
  array.push(element);
  return array;
}

const _features = ["feature 1"];
function fetchFeatures() {
  console.log("...fetching features");
  FeaturesFetchingStatus.onNext(LOADING);

  const o = isFailure() ?
    Rx.Observable.throw("Failed to fetch features") :
    Rx.Observable.just(push(_features, "feature " + (_features.length + 1)));

  return o.delay(Math.random() * 3000)
    .subscribe(showFeatures, (e) => showError(e, FeaturesFetchingStatus));
}

const _saved_conditions = ["condition 1"];

function fetchSavedConditions() {
  console.log("...fetching saved conditions");
  SavedConditionsFetchingStatus.onNext(LOADING);

  const o = isFailure() ?
    Rx.Observable.throw("Failed to fetch saved conditions") :
    Rx.Observable.just(push(_saved_conditions, "condition " + (_saved_conditions.length + 1)));

  return o.delay(Math.random() * 3000)
    .subscribe(showSavedConditions, (e) => showError(e, SavedConditionsFetchingStatus));
}

function showFeatures(features) {
  FeaturesFetchingStatus.onNext(SUCCESS);
  const e = document.getElementById("features");
  e.innerHTML = "";
  for (const f of features) {
    e.innerHTML += (f + "<br/>");
  }
}

function showSavedConditions(conditions) {
  SavedConditionsFetchingStatus.onNext(SUCCESS);
  const e = document.getElementById("saved_conditions");
  e.innerHTML = "";
  for (const c of conditions) {
    e.innerHTML += (c + "<br/>");
  }
}

function updateListShown(status) {
  const r = document.getElementById("result");
  const p = document.getElementById("progress");
  const e = document.getElementById("error");

  [r, p, e].forEach((e)...