JSFiddle - React, Tailwind, and code Playground

by Keith Henry

HTML

<textarea id="log" rows="10" cols="50">

</textarea>

<div id="items">
</div>

JavaScript

function log(s) {
  console.log(s);
  document.getElementById('log').value += s + '\n';
}

var logError = log;

function comparer(a, b) {
  return b.id - a.id;
}

function finalCallback(items) {
  log(`Finished, rendering`);
  var holder = document.getElementById('items');
  var content = '';
  for (var i = 0; i < items.length; i++)
    content += '<div>' + JSON.stringify(items[i]) + '</div>';

  holder.innerHTML = content;
}

/** Simple callback XMLHttpRequest */
function ajaxCallback(url, onSuccess, onFail) {
  log(`requesting ${url}`);
  var request = new XMLHttpRequest();
  request.addEventListener('load', function() {
    if (request.status >= 200 &&
      request.status < 300) {
      var json = JSON.parse(request.response);
      onSuccess(json);
    } else
      onFail(request.statusText);
  });
  request.addEventListener('error', function() {
    onFail('Network');
  });

  request.open('GET', url);
  request.send();
}

function ajaxPromise(url) {
    return fetch(url, { method: 'GET' }).then(function(r) { 
        if (r.ok)
            return r.json();

        return new Error(r.statusText);
    });
}

function logIndexedDBError(evt) {
  logError(evt.target.error.message);
}

function setUpObjectStores(evt) {
  // Upgrade the IndexedDB instance to the latest version
  // I really should check for the version and only add the specific missing stores 
  evt.currentTarget.result.createObjectStore('my-cache', {
    keyPath: 'id'
  });
}

function getIndexedDBStore(storeName, openedStore, write) {
  // Open the DB, with a callback - note that older browsers may call this something else
  var dbRequest = indexedDB.open('my-cache', 1);
  dbRequest.onerror = logIndexedDBError;
  dbRequest.onupgradeneeded = setUpObjectStores;
  // Theres also dbRequest.onblocked, but let's leave that for now

  // This fires once the DB has opened
  dbRequest.onsuccess = function(evt) {
    var db = evt.target.result;
    db.onerror = logIndexedDBError;
    // Open a...