Scaffolds rest of starter code

assets/scripts/books/api.js

@@ -1,5 +1,14 @@
 'use strict';
 
-// const app = require('../app.js');
+const app = require('../app.js');
 
-module.exports = true;
+const index = function () {
+  return $.ajax({
+    url: app.host + '/books',
+    method: 'GET',
+  });
+};
+
+module.exports = {
+  index
+};

assets/scripts/books/events.js

@@ -1,8 +1,20 @@
 'use strict';
 
-// const booksApi = require('./api.js');
-// const booksUi = require('./ui.js');
+const booksApi = require('./api.js');
+const booksUi = require('./ui.js');
 
-module.exports = {
+// get in the habit of naming your handlers, it eases debugging.
+//
+// also, follow a convention for handlers. here, I name my handler
+// beginning with 'on' to denote that it is done when the GET /books
+// button is clicked
+const onGetBooks = function (event) {
+  event.preventDefault();
+    booksApi.index()
+      .then(booksUi.onSuccess)
+      .catch(booksUi.onError);
+};
 
+module.exports = {
+  onGetBooks,
 };

assets/scripts/books/ui.js

@@ -1,5 +1,18 @@
 'use strict';
 
-module.exports = {
+const onSuccess = function (data) {
+  if (data.book) {
+    console.log(data.book);
+  } else {
+    console.table(data.books);
+  }
+};
 
+const onError = function (response) {
+  console.error(response);
+};
+
+module.exports = {
+  onSuccess,
+  onError,
 };

assets/scripts/index.js

@@ -10,8 +10,5 @@ const bookEvents = require('./books/events');
 
 // On document ready
 $(() => {
-  $('.books').on('submit', function(e){
-    e.preventDefault();
-    debugger;
-  })
+  $('.books').on('submit', bookEvents.onGetBooks)
 });

index.html

@@ -18,11 +18,7 @@ <h1>Example</h1>
       est laborum.</p>
 
       <form class='books'>
-        <div class="form-group">
-          <label for="resource">Resource</label>
-          <input type="text" class="form-control" id="resource" placeholder="Resource?">
-        </div>
-        <button type="submit" class="btn btn-default">Submit</button>
+        <button type="submit" class="btn btn-default">Get all Books</button>
       </form>
 
     </body>