load projects ondemand

src/scripts/app.tag

@@ -50,10 +50,9 @@
       </li>
     </ul>
     <div class="projects-content">
-      <loading if={!state.loaded}></loading>
       <projectsview
         class=""
-        if={active.get("projects") && state.loaded}
+        if={active.get("projects")}
         state={state}
         ref="projectsview"
       >
@@ -62,7 +61,6 @@
 
     <div class="content">
       <postsview
-        cached={cached}
         state={state}
         if={active.get("posts")}
         ref="postsview"
@@ -73,7 +71,6 @@
       >
       </about>
       <links
-        cached={cached}
         state={state}
         if={active.get("links")}
       >
@@ -87,12 +84,7 @@ import './projectsview.tag';
 import './postsview.tag';
 import './about.tag';
 import './links.tag';
-import './loading.tag';
 
-import fetchCached from 'fetch-cached';
-import 'whatwg-fetch';
-import Z from './zipper.js';
-import pathEq from 'ramda/src/pathEq';
 import route from 'riot-route';
 import lens from './lenses.js';
 import { throttle } from 'lodash-es';
@@ -101,8 +93,6 @@ const hashLength = 8;
 
 var self = this;
 
-self.cache = {};
-
 self.showBorder = false;
 self.route = route;
 self.riot = riot;
@@ -124,18 +114,6 @@ document.addEventListener("click", function(event) {
   }
 });
 
-self.cached = fetchCached({
-  fetch: fetch,
-  cache: {
-    get: ((k) => {
-      return new Promise((resolve, reject) => {
-        resolve(self.cache[k]);
-      });
-    }),
-    set: (k, v) => { self.cache[k] = v; }
-  }
-});
-
 RiotControl.on("postswitch",
   (ev) => {
     self.update(
@@ -149,7 +127,6 @@ self.state = {
   "_id" : self.opts.postid.slice(-hashLength),
   "author" : self.opts.author,
   "title" : self.opts.title,
-  "projects" : Z.empty,
   "loaded" : false,
   "initial" : decodeURIComponent(self.opts.initial_post)
 };
@@ -233,22 +210,8 @@ self.one("updated", () => {
   route.start(true);
 });
 
-function loaduser() {
-  /* https://api.github.com/users/${self.username}/repos?sort=updated&direction=desc */
-  self.cached("/blog/ghprojects")
-    .then((resp) => resp.json())
-    .then((resp) => {
-      self.state.projects = Z.fromList(
-                              resp.filter(
-                                pathEq(["fork"], false)));
-
-      self.state.loaded = true;
-      self.update();
-    });
-}
-
 function getcategories() {
-  self.cached("/blog/categories")
+  window.cached("/blog/categories")
     .then((resp) => resp.json())
     .then((resp) => {
       self.categories = resp;
@@ -256,7 +219,6 @@ function getcategories() {
     });
 }
 
-self.on("mount", loaduser);
 self.on("mount", getcategories);
 
 self.on("mount", () => {

src/scripts/links.tag

@@ -45,7 +45,7 @@ self.groups = []
 
 getLinks() {
   self.update({"loading" : true});
-  self.opts.cached("/blog/links/")
+  window.cached("/blog/links/")
   .then((resp) => resp.text())
   .then((resp) => {
     self.update(

src/scripts/post.tag

@@ -10,12 +10,11 @@
       next={next}
     >
     </div>
-    <loading if={loading && opts.state.loaded}></loading>
+    <loading if={loading}></loading>
     <div class="text-break">
       <div class={"" + (loading ? "invisible" : "fadeIn")}>
 
         <social
-          if={false}
           show={!loading}
           ref="social"
           title={opts.state.title}
@@ -66,6 +65,8 @@ self.content = self.opts.state.initial;
 self.prevloading = "";
 self.nextloading = "";
 self.swipe = false;
+self.start = false;
+self.end = false;
 
 RiotControl.on("filtercategory",
   (ev) => {
@@ -73,9 +74,6 @@ RiotControl.on("filtercategory",
     console.log(category);
   });
 
-self.start = false;
-self.end = false;
-
 prev(ev) {
   ev.preventDefault();
   self.end = false;
@@ -148,7 +146,7 @@ updatePost(postcontent) {
 
 nextPost(_id) {
   self.update({"loading" : true});
-  self.opts.cached(`/blog/switchpost/${_id.slice(-hashLength)}/${self.category}`)
+  window.cached(`/blog/switchpost/${_id.slice(-hashLength)}/${self.category}`)
   .then((resp) => resp.text())
   .then((resp) => {
     var content = JSON.parse(resp);
@@ -168,7 +166,7 @@ nextPost(_id) {
 
 prevPost(_id) {
   self.update({"loading" : true});
-  self.opts.cached(`/blog/prevpost/${_id.slice(-hashLength)}/${self.category}`)
+  window.cached(`/blog/prevpost/${_id.slice(-hashLength)}/${self.category}`)
   .then((resp) => resp.text())
   .then((resp) => {
     self.updatePost(JSON.parse(resp))

src/scripts/projects.tag

@@ -6,15 +6,16 @@
         </div>
         <div class="column col-4">
           <figure
-            if={this.avatar_url}
+            if={!loading}
             class="float-left avatar my-avatar avatar-lg"
           >
-            <img src={this.avatar_url}></img>
+            <img src={this.project().owner.avatar_url}></img>
           </figure>
         </div>
       </div>
 
-      <div class="text-break">
+      <loading if={loading}></loading>
+      <div if={!loading} class="text-break">
         <div if={this.swipe} class={"card animated "+this.transition}>
           <div class="card-header">
             <h3 class="card-title project-title">{ this.project().name }</h3>
@@ -60,23 +61,19 @@
     </div>
     </div>
 <script>
+import './loading.tag';
 import Z from './zipper.js';
 import moment from 'moment/min/moment.min';
-
+import pathEq from 'ramda/src/pathEq';
 var cycle_timeout = 12;
 
 var self = this;
 
-self.avatar_url = "";
+self.loading = true;
 self.transition = "";
 self.swipe = true;
 self.moment = moment;
-
-this.on("mount",
-  function() {
-    self.avatar_url = self.project().owner.avatar_url;
-    self.update();
-  });
+self.projects = Z.empty;
 
 var empty_project = {
   "name" : "",
@@ -86,12 +83,12 @@ var empty_project = {
 };
 
 project() {
-  return Z.focus(self.opts.state.projects, empty_project);
+  return Z.focus(self.projects, empty_project);
 }
 
 next() {
   self.update({"swipe" : false});
-  self.opts.state.projects = Z.goRight(self.opts.state.projects);
+  self.projects = Z.goRight(self.projects);
   console.log(self.project());
   self.update(
     {
@@ -103,7 +100,7 @@ next() {
 
 prev() {
   self.update({"swipe" : false});
-  self.opts.state.projects = Z.goLeft(self.opts.state.projects);
+  self.projects = Z.goLeft(self.projects);
   self.update(
     {
       "transition" : "fadeInLeft",
@@ -112,13 +109,29 @@ prev() {
   );
 }
 
+function loaduser() {
+  /* https://api.github.com/users/${self.username}/repos?sort=updated&direction=desc */
+  window.cached("/blog/ghprojects")
+    .then((resp) => resp.json())
+    .then((resp) => {
+      self.projects = Z.fromList(
+                              resp.filter(
+                                pathEq(["fork"], false)));
+
+      self.loading = false;
+      self.update();
+    });
+}
+
 function loopProjects() {
-  if (self.opts.state.projects) {
+  if (self.projects) {
     self.next();
   }
   window.setTimeout(loopProjects, cycle_timeout*1000);
 }
 
+self.on("mount", loaduser);
+
 /* window.setTimeout(loopProjects, cycle_timeout*1000); */
 
 </script>

src/scripts/riotblog.js

@@ -9,6 +9,23 @@ import './grid.js';
 import { default as promise } from 'es6-promise';
 import { default as smooth } from 'smoothscroll-polyfill';
 import 'element-closest';
+import fetchCached from 'fetch-cached';
+import 'whatwg-fetch';
+
+
+window.cache = {};
+
+window.cached = fetchCached({
+  fetch: fetch,
+  cache: {
+    get: ((k) => {
+      return new Promise((resolve, reject) => {
+        resolve(window.cache[k]);
+      });
+    }),
+    set: (k, v) => { window.cache[k] = v; }
+  }
+});
 
 window.addEventListener("load", () => {