add a throbber and a refresh button + handle errors

8 years ago · 8b25b79add
3 changed files with 51 additions and 5 deletions
--- a/beer.css
+++ b/beer.css
@ -41,3 +41,21 @@ img {
  margin-right: 30px;
  font-size: 50%;
 }
+
+.error {
+  text-align: center;
+}
+
+.error h1 {
+  font-size: 400%;
+  margin-bottom: -10px;
+}
+
+.hidden {
+  display: none;
+}
+
+.refresh {
+  text-align: center;
+  font-size: 200%;
+}
--- a/beer.js
+++ b/beer.js
@ -2,6 +2,9 @@ define(function(require, exports, module) {
 module.exports = function () {
  var flags = require("flags.js");
  var config = require("config.js");
+  $(".error,.catalog").toggleClass("hidden", true);
+  $(".throbber").toggleClass("hidden", false);
+  $(".catalog ul").empty();
  $.ajax({
    "url": config.baseURL + "/beer?page=0" + (config.extraQueryStringSuffix != null ? "&" + config.extraQueryStringSuffix : ""),
    "success": function (data, status, xhr) {
@ -18,12 +21,27 @@ module.exports = function () {
                   .text(data[i].name)
                   .prepend($("<span>").text(flag).toggleClass("flag"))
                   .append($("<span>").text(rating).toggleClass("rating"))
-                   .appendTo($(".catalog"));
+                   .appendTo($(".catalog ul"));
        }
+
+        $(".catalog").toggleClass("hidden", false);
+        $(".throbber").toggleClass("hidden", true);
      } catch (e) {
        console.log(e);
+        $("#error_message").text(e.message);
+        $(".error").toggleClass("hidden", false);
+        $(".throbber").toggleClass("hidden", true);
      }
    },
+    "error": function (xhr, status, error) {
+      if (xhr.status == "403") {
+        $("#error_message").text("API Quota reached !");
+      } else {
+        $("#error_message").text("Sorry ! HTTP Status Code " + xhr.status);
+      }
+      $(".error").toggleClass("hidden", false);
+      $(".throbber").toggleClass("hidden", true);
+    },
    "headers": config.additionalHeaders != null ? config.additionalHeaders : {}
  });
 };
--- a/index.html
+++ b/index.html
@ -6,9 +6,10 @@
    <script type='text/javascript' src='https://code.jquery.com/jquery-3.1.1.js'></script>
    <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.js'></script>
    <script type='text/javascript'>
-    require(['beer'], function (initBeerUI) {
+    require(['beer'], function (loadBeers) {
      $(document).ready(function() {
-        initBeerUI();
+        $(".refresh").on("click", loadBeers);
+        loadBeers();
      });
    });
    </script>
@ -17,7 +18,16 @@
  <body>
    <img src="brew.png" />
    <h1>BEER CATALOG</h1>
-    <ul class="catalog">
-    </ul>
+    <div class="catalog">
+      <ul>
+      </ul>
+      <div class="refresh">🔄</div>
+    </div>
+    <img src="https://media.giphy.com/media/x7IqIRf6pNR2E/giphy.gif" class="throbber hidden" />
+    <div class="error hidden">
+      <h1>⚠️</h1>
+      <span id="error_message"></span>
+      <div class="refresh">🔄</div>
+    </div>
  </body>
 </html>