From c3dbefbb4f3d9d41713d72a41e9ce906ccaeb50c Mon Sep 17 00:00:00 2001
From: Dan Elbert <dan.elbert@gmail.com>
Date: Wed, 18 Apr 2018 17:04:25 -0500
Subject: [PATCH] caching

---
 app/javascript/components/TheLogCreator.vue   |  3 +-
 app/javascript/components/TheRecipe.vue       |  3 +-
 app/javascript/components/TheRecipeEditor.vue |  3 +-
 app/javascript/components/TheRecipeList.vue   |  5 +-
 app/javascript/lib/Api.js                     | 62 ++++++++++++++-----
 app/javascript/store/index.js                 |  8 ++-
 app/javascript/styles/_variables.scss         |  1 +
 app/views/home/sw.js.erb                      | 15 +++++
 8 files changed, 74 insertions(+), 26 deletions(-)

diff --git a/app/javascript/components/TheLogCreator.vue b/app/javascript/components/TheLogCreator.vue
index 81ecbc0..d657620 100644
--- a/app/javascript/components/TheLogCreator.vue
+++ b/app/javascript/components/TheLogCreator.vue
@@ -56,8 +56,7 @@
 
     created() {
       this.loadResource(
-        api.getRecipe(this.recipeId)
-          .then(data => { this.log.recipe = data; return data; })
+        api.getRecipe(this.recipeId, data => this.log.recipe = data)
       );
     },
 
diff --git a/app/javascript/components/TheRecipe.vue b/app/javascript/components/TheRecipe.vue
index 3a4ba72..172050c 100644
--- a/app/javascript/components/TheRecipe.vue
+++ b/app/javascript/components/TheRecipe.vue
@@ -59,8 +59,7 @@
     methods: {
       refreshData() {
         this.loadResource(
-          api.getRecipe(this.recipeId, this.scale, this.system, this.unit)
-            .then(data => { this.recipe = data; return data; })
+          api.getRecipe(this.recipeId, this.scale, this.system, this.unit, data => this.recipe = data)
         );
       }
     },
diff --git a/app/javascript/components/TheRecipeEditor.vue b/app/javascript/components/TheRecipeEditor.vue
index 6bc1326..7a22e0d 100644
--- a/app/javascript/components/TheRecipeEditor.vue
+++ b/app/javascript/components/TheRecipeEditor.vue
@@ -48,8 +48,7 @@
 
     created() {
       this.loadResource(
-        api.getRecipe(this.recipeId)
-          .then(data => { this.recipe = data; return data; })
+        api.getRecipe(this.recipeId, data => { this.recipe = data; return data; })
       );
     },
 
diff --git a/app/javascript/components/TheRecipeList.vue b/app/javascript/components/TheRecipeList.vue
index 173e974..9d4597c 100644
--- a/app/javascript/components/TheRecipeList.vue
+++ b/app/javascript/components/TheRecipeList.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h1 class="title">Recipes 2</h1>
+    <h1 class="title">Recipes</h1>
 
     <router-link v-if="isLoggedIn" :to="{name: 'new_recipe'}" class="button is-primary">Create Recipe</router-link>
 
@@ -142,8 +142,7 @@
 
       getList: debounce(function() {
         this.loadResource(
-          api.getRecipeList(this.search.page, this.search.per, this.search.sortColumn, this.search.sortDirection, this.search.name, this.search.tags)
-            .then(data => this.recipeData = data)
+          api.getRecipeList(this.search.page, this.search.per, this.search.sortColumn, this.search.sortDirection, this.search.name, this.search.tags, data => this.recipeData = data)
         );
       }, 500, {leading: true, trailing: true}),
 
diff --git a/app/javascript/lib/Api.js b/app/javascript/lib/Api.js
index 12aa395..7a5ef6f 100644
--- a/app/javascript/lib/Api.js
+++ b/app/javascript/lib/Api.js
@@ -25,19 +25,19 @@ class Api {
     }
   }
 
-  parseJSON(response) {
-    return response.json();
-  }
-
-  performRequest(url, method, params = {}) {
+  performRequest(url, method, params = {}, headers = {}) {
     const hasBody = Object.keys(params || {}).length !== 0;
 
-    const headers = new Headers();
-    headers.append('Accept', 'application/json');
-    headers.append('Content-Type', 'application/json');
+    const reqHeaders = new Headers();
+    reqHeaders.append('Accept', 'application/json');
+    reqHeaders.append('Content-Type', 'application/json');
+
+    for (let key in headers) {
+      reqHeaders.append(key, headers[key]);
+    }
 
     const opts = {
-      headers,
+      headers: reqHeaders,
       method: method,
       credentials: "same-origin"
     };
@@ -67,17 +67,47 @@ class Api {
     return queryParams;
   }
 
-  get(url, params = {}) {
-
+  buildGetUrl(url, params = {}) {
     const queryParams = this.objectToUrlParams(params);
-
     if (queryParams.length) {
       url = url + "?" + queryParams.join("&");
     }
+    return url;
+  }
+
+  get(url, params = {}) {
+    url = this.buildGetUrl(url, params);
 
     return this.performRequest(url, "GET");
   }
 
+  cacheFirstGet(url, params = {}, dataHandler) {
+    url = this.buildGetUrl(url, params);
+    let networkDataReceived = false;
+
+    const networkUpdate = this.performRequest(url, "GET", {}, {"Cache-Then-Network": "true"})
+      .then(data => {
+        networkDataReceived = true;
+        return dataHandler(data);
+      });
+
+    return caches.match(url)
+      .then(response => {
+        if (!response) throw Error("No data");
+        return response.json();
+      })
+      .then(data => {
+        // don't overwrite newer network data
+        if (!networkDataReceived) {
+          dataHandler(data);
+        }
+      })
+      .catch(function() {
+        // we didn't get cached data, the network is our last hope:
+        return networkUpdate;
+      });
+  }
+
   post(url, params = {}) {
     return this.performRequest(url, "POST", params);
   }
@@ -90,7 +120,7 @@ class Api {
     return this.performRequest(url, "DELETE", params);
   }
 
-  getRecipeList(page, per, sortColumn, sortDirection, name, tags) {
+  getRecipeList(page, per, sortColumn, sortDirection, name, tags, dataHandler) {
     const params = {
       criteria: {
         page: page || null,
@@ -102,17 +132,17 @@ class Api {
       }
     };
 
-    return this.get("/recipes", params);
+    return this.cacheFirstGet("/recipes", params, dataHandler);
   }
 
-  getRecipe(id, scale = null, system = null, unit = null) {
+  getRecipe(id, scale = null, system = null, unit = null, dataHandler) {
     const params = {
       scale,
       system,
       unit
     };
 
-    return this.get("/recipes/" + id, params);
+    return this.cacheFirstGet("/recipes/" + id, params, dataHandler);
   }
 
   buildRecipeParams(recipe) {
diff --git a/app/javascript/store/index.js b/app/javascript/store/index.js
index 5725898..9f26c2e 100644
--- a/app/javascript/store/index.js
+++ b/app/javascript/store/index.js
@@ -9,6 +9,7 @@ export default new Vuex.Store({
   strict: process.env.NODE_ENV !== 'production',
   state: {
     updateAvailable: false,
+    loadingCount: 0,
     loading: false,
     error: null,
     authChecked: false,
@@ -44,7 +45,12 @@ export default new Vuex.Store({
     },
 
     setLoading(state, value) {
-      state.loading = value;
+      if (value) {
+        state.loadingCount = state.loadingCount + 1;
+      } else {
+        state.loadingCount = state.loadingCount - 1;
+      }
+      state.loading = state.loadingCount !== 0;
     },
 
     setError(state, value) {
diff --git a/app/javascript/styles/_variables.scss b/app/javascript/styles/_variables.scss
index a17308d..bb4405d 100644
--- a/app/javascript/styles/_variables.scss
+++ b/app/javascript/styles/_variables.scss
@@ -7,6 +7,7 @@ $coolors-green: rgba(121, 167, 54, 1);
 $coolors-red: #ab4c34;
 $coolors-yellow: rgba(240, 162, 2, 1);
 
+//$family-sans-serif: "Verdana", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
 $family-serif: Georgia, "Times New Roman", Times, serif;
 
 // Bluma default overrides
diff --git a/app/views/home/sw.js.erb b/app/views/home/sw.js.erb
index 6e24757..feee6d9 100644
--- a/app/views/home/sw.js.erb
+++ b/app/views/home/sw.js.erb
@@ -36,8 +36,10 @@ self.addEventListener('activate', function(event) {
 
 self.addEventListener('fetch', function(event) {
   var reqUrl = new URL(event.request.url);
+  var isCacheThenNetwork = event.request.headers.get("Cache-Then-Network") === "true";
   var x, asset;
 
+  // Cache-first response for static assets
   for (x = 0; x < staticAssets.length; x++) {
     asset = staticAssets[x];
     if (asset === reqUrl.pathname) {
@@ -50,7 +52,20 @@ self.addEventListener('fetch', function(event) {
     }
   }
 
+  // If the 'CacheThenNetwork' header is set, hit the network, cache the page, and return the response
+  if (isCacheThenNetwork) {
+    event.respondWith(caches.open(cacheName).then(function (cache) {
+      return fetch(event.request)
+        .then(function (response) {
+          cache.put(event.request, response.clone());
+          return response;
+        });
+    }));
 
+    return;
+  }
+
+  // Network, falling back to cache by default to support offline browsing of any cached resources
   event.respondWith(caches.open(cacheName).then(function(cache) {
     return fetch(event.request)
       .then(function(response) {