add caching for fetch

package.json

@@ -32,6 +32,7 @@
     "animate.css": "^3.5.2",
     "axios": "^0.16.2",
     "es6-promise": "^4.1.1",
+    "fetch-cached": "^2.0.3",
     "font-awesome": "^4.7.0",
     "immutable": "^3.8.1",
     "jquery": "^3.2.1",

src/scripts/app.tag

@@ -42,6 +42,7 @@
   </div>
   <div class="content">
     <postsview
+      cached={this.cached}
       state={this.state}
       if={this.active.get("posts")}
       ref="postsview"
@@ -52,6 +53,7 @@
     >
     </about>
     <links
+      cached={this.cached}
       state={this.state}
       if={this.active.get("links")}
     >
@@ -65,11 +67,32 @@ import './about.tag';
 import './links.tag';
 import './loading.tag';
 
+import fetchCached from 'fetch-cached';
 import Z from './zipper.js';
 import {default as R} from 'ramda';
 import route from 'riot-route';
 import lens from './lenses.js';
 
+var self = this;
+
+self.cache = {};
+
+self.cached = fetchCached({
+  fetch: fetch,
+  cache: {
+    get: ((k) => {
+      return new Promise((resolve, reject) => {
+        var result = self.cache[k];
+        if (result == undefined) {
+          resolve(undefined);
+        }
+        resolve(result);
+      });
+    }),
+    set: (k, v) => { self.cache[k] = v; }
+  }
+});
+
 this.R = R;
 this.route = route;
 this.riot = riot;
@@ -98,7 +121,6 @@ this.active = lens.actives({
   "about" : false
 });
 
-var self = this;
 toggleMenu(ev) {
   ev.preventDefault();
   self.update({"menuActive" : !self.menuActive});

src/scripts/links.tag

@@ -37,9 +37,6 @@
     </div>
   </div>
 <script>
-import route from 'riot-route';
-import lens from './lenses.js';
-
 var self = this;
 
 self.loading = false;
@@ -48,7 +45,7 @@ self.groups = []
 
 getLinks() {
   self.update({"loading" : true});
-  fetch(`/blog/links/`)
+  self.opts.cached(`/blog/links/`)
   .then((resp) => resp.text())
   .then((resp) => {
     self.update(

src/scripts/post.tag

@@ -44,7 +44,6 @@
 
 import './raw.tag';
 import './social.tag';
-import 'whatwg-fetch';
 import { default as R } from 'ramda';
 import { default as showdown } from 'showdown';
 import { default as jquery } from 'jquery';
@@ -133,7 +132,7 @@ updatePost(postcontent) {
 
 nextPost(_id) {
   self.update({"loading" : true});
-  fetch(`/blog/switchpost/${_id.slice(-hashLength)}`)
+  self.opts.cached(`/blog/switchpost/${_id.slice(-hashLength)}`)
   .then((resp) => resp.text())
   .then((resp) => {
     var content = JSON.parse(resp);
@@ -153,7 +152,7 @@ nextPost(_id) {
 
 prevPost(_id) {
   self.update({"loading" : true});
-  fetch(`/blog/prevpost/${_id.slice(-hashLength)}`)
+  self.opts.cached(`/blog/prevpost/${_id.slice(-hashLength)}`)
   .then((resp) => resp.text())
   .then((resp) => {
     self.updatePost(JSON.parse(resp))
@@ -169,7 +168,7 @@ getPost(_id) {
   else {
     url = "/blog/switchpost/";
   }
-  fetch(url)
+  self.opts.cached(url)
   .then((resp) => resp.text())
   .then((resp) => { self.updatePost(JSON.parse(resp)) })
 }

src/scripts/postsview.tag

@@ -1,5 +1,9 @@
 <postsview>
   <posts>
-    <post state={this.parent.opts.state}></post>
+    <post
+      cached={this.parent.opts.cached}
+      state={this.parent.opts.state}
+    >
+    </post>
   </posts>
 </postsview>

yarn.lock

@@ -365,6 +365,10 @@ fast-levenshtein@~2.0.4:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
 
+fetch-cached@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/fetch-cached/-/fetch-cached-2.0.3.tgz#a09d8213ddf8f92ebddd0adf38ba47a0740ef496"
+
 filename-regex@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"