Start the migration from iron-router to flow-router

Motivations:

* Iron-Router foces us to use Tracker.nonreactive black magic in order
  to avoid un-necessary re-renders;
* There is a community consensus (supported by some MDG members) that
  the flow-router API is easier to reason about;
* The useraccounts now supports flow router (that was a blocking
  element when I considered the switch ~3months ago)

On the server we use the Picker router, as encouraged by the Kadira
team (which develop both Flow and Picker routers).

In the current state of things there are some bugs related to the
missing Loading architecure. Previously onRendered callback where
always called when the data the component needed was available, now
we have to handle this ourselves, which we will in a following commit.

client/components/boards/boardBody.jade

@@ -1,29 +1,25 @@
-//-
-  XXX This template can't be transformed into a component because it is
-  included by iron-router. That's a bug.
-  See https://github.com/peerlibrary/meteor-blaze-components/issues/44
 template(name="board")
-  +boardComponent
-
-template(name="boardComponent")
-  if this
-    .board-wrapper(class=colorClass)
-      .board-canvas(
-        class=sidebarSize
-        class="{{#if MultiSelection.isActive}}is-multiselection-active{{/if}}"
-        class="{{#if draggingActive.get}}is-dragging-active{{/if}}")
-        if showOverlay.get
-          .board-overlay
-        .lists.js-lists
-          each lists
-            +list(this)
-            if currentCardIsInThisList
-              +cardDetails(currentCard)
-          if currentUser.isBoardMember
-            +addListForm
-      +sidebar
+  if Template.subscriptionsReady
+    if currentBoard
+      .board-wrapper(class=currentBoard.colorClass)
+        .board-canvas(
+          class=currentBoard.sidebarSize
+          class="{{#if MultiSelection.isActive}}is-multiselection-active{{/if}}"
+          class="{{#if draggingActive.get}}is-dragging-active{{/if}}")
+          if showOverlay.get
+            .board-overlay
+          .lists.js-lists
+            each currentBoard.lists
+              +list(this)
+              if currentCardIsInThisList
+                +cardDetails(currentCard)
+            if currentUser.isBoardMember
+              +addListForm
+        +sidebar
+    else
+      +message(label="board-no-found")
   else
-    +message(label="board-no-found")
+    +spinner
 
 template(name="addListForm")
   .list.js-list.list-composer.js-list-composer

client/components/boards/boardBody.js

@@ -1,11 +1,17 @@
+var boardSubsManager = new SubsManager();
+
 BlazeComponent.extendComponent({
   template: function() {
-    return 'boardComponent';
+    return 'board';
   },
 
   onCreated: function() {
     this.draggingActive = new ReactiveVar(false);
     this.showOverlay = new ReactiveVar(false);
+
+    // XXX The boardId should be readed from some sort the component "props",
+    // unfortunatly, Blaze doesn't have this notion.
+    boardSubsManager.subscribe('board', Session.get('currentBoard'));
   },
 
   openNewListForm: function() {
@@ -67,7 +73,7 @@ BlazeComponent.extendComponent({
       }
     };
 
-    if (! Meteor.userId() || ! Meteor.user().isBoardMember())
+    if (! Meteor.user() || ! Meteor.user().isBoardMember())
       return;
 
     self.$(lists).sortable({
@@ -101,7 +107,8 @@ BlazeComponent.extendComponent({
 
     // If there is no data in the board (ie, no lists) we autofocus the list
     // creation form by clicking on the corresponding element.
-    if (self.data().lists().count() === 0) {
+    var currentBoard = Boards.findOne(Session.get('currentBoard'));
+    if (currentBoard.lists().count() === 0) {
       this.openNewListForm();
     }
   },
@@ -121,7 +128,7 @@ BlazeComponent.extendComponent({
       }
     }];
   }
-}).register('boardComponent');
+}).register('board');
 
 BlazeComponent.extendComponent({
   template: function() {

client/components/boards/boardHeader.jade

@@ -1,20 +1,20 @@
 template(name="headerBoard")
   h1.header-board-menu
     a(class="{{#if currentUser.isBoardAdmin}}js-edit-board-title{{else}}is-disabled{{/if}}")
-      = title
+      = currentBoard.title
 
   .board-header-btns.left
     unless isSandstorm
       if currentUser
         a.board-header-btn.js-star-board(class="{{#if isStarred}}is-active{{/if}}"
-          title="{{#if isStarred}}{{_ 'click-to-unstar'}}{{else}}{{_ 'click-to-star'}}{{/if}} {{_ 'starred-boards-description'}}")
-          i.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}")
+          title="{{#if currentBoard.isStarred}}{{_ 'click-to-unstar'}}{{else}}{{_ 'click-to-star'}}{{/if}} {{_ 'starred-boards-description'}}")
+          i.fa(class="fa-star{{#unless currentBoard.isStarred}}-o{{/unless}}")
           if showStarCounter
-            span {{_ 'board-nb-stars' stars}}
+            span {{_ 'board-nb-stars' currentBoard.stars}}
 
       a.board-header-btn(class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}")
-        i.fa(class="{{#if isPublic}}fa-globe{{else}}fa-lock{{/if}}")
-        span {{_ permission}}
+        i.fa(class="{{#if currentBoard.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
+        span {{_ currentBoard.permission}}
 
   .board-header-btns.right
     a.board-header-btn.js-open-filter-view(

client/components/boards/boardList.jade

@@ -1,16 +1,9 @@
-//-
-  XXX This template can't be transformed into a component because it is
-  included by iron-router. That's a bug.
-  See https://github.com/peerlibrary/meteor-blaze-components/issues/44
-template(name="boards")
-  +boardList
-
 template(name="boardList")
   if boards.count
     ul.board-list.clearfix
       each boards
         li(class="{{#if isStarred}}starred{{/if}}" class=colorClass)
-          a.js-open-board(href="{{ pathFor route='Board' boardId=_id }}")
+          a.js-open-board(href="{{pathFor 'board' id=_id slug=slug}}")
             span.details
               span.board-list-item-name= title
               i.fa.fa-star-o.js-star-board(

client/components/boards/router.js

@@ -1,58 +0,0 @@
-Meteor.subscribe('boards');
-
-var boardSubsManager = new SubsManager();
-
-Router.route('/boards', {
-  name: 'Boards',
-  template: 'boards',
-  authenticated: true,
-  onBeforeAction: function() {
-    Session.set('currentBoard', '');
-    Filter.reset();
-    this.next();
-  }
-});
-
-Router.route('/boards/:_id/:slug', {
-  name: 'Board',
-  template: 'board',
-  onAfterAction: function() {
-    // XXX We probably shouldn't rely on Session
-    Session.set('sidebarIsOpen', true);
-    Session.set('menuWidgetIsOpen', false);
-  },
-  waitOn: function() {
-    var params = this.params;
-    Session.set('currentBoard', params._id);
-    Session.set('currentCard', null);
-
-    return boardSubsManager.subscribe('board', params._id, params.slug);
-  },
-  data: function() {
-    return Boards.findOne(this.params._id);
-  }
-});
-
-Router.route('/boards/:boardId/:slug/:cardId', {
-  name: 'Card',
-  template: 'board',
-  noEscapeActions: true,
-  onAfterAction: function() {
-    Tracker.nonreactive(function() {
-      if (! Session.get('currentCard') && Sidebar) {
-        Sidebar.hide();
-      }
-    });
-    EscapeActions.executeUpTo('popup');
-    var params = this.params;
-    Session.set('currentBoard', params.boardId);
-    Session.set('currentCard', params.cardId);
-  },
-  waitOn: function() {
-    var params = this.params;
-    return boardSubsManager.subscribe('board', params.boardId, params.slug);
-  },
-  data: function() {
-    return Boards.findOne(this.params.boardId);
-  }
-});

client/components/lists/main.js

@@ -21,7 +21,7 @@ BlazeComponent.extendComponent({
   // comment below provides further details.
   onRendered: function() {
     var self = this;
-    if (! Meteor.userId() || ! Meteor.user().isBoardMember())
+    if (! Meteor.user() || ! Meteor.user().isBoardMember())
       return;
 
     var boardComponent = self.componentParent();

client/components/main/header.jade

@@ -10,13 +10,13 @@ template(name="header")
         #header-quick-access
           ul
             li
-              +linkTo(route="Boards")
+              a(href="{{pathFor 'home'}}")
                 span.fa.fa-home
                 | All boards
             each currentUser.starredBoards
               li.separator -
               li(class="{{#if $.Session.equals 'currentBoard' _id}}current{{/if}}")
-                +linkTo(route="Board" data=this)
+                a(href="{{pathFor 'board' id=_id slug=slug}}")
                   = title
             else
               li.current Star a board to add a shortcut in this bar.

client/components/main/layouts.jade

@@ -8,15 +8,15 @@ template(name="userFormsLayout")
   section.auth-layout
     h1.at-form-landing-logo
       img(src="/logo.png" title="LibreBoard")
-    +yield
+    +Template.dynamic(template=content)
 
 template(name="defaultLayout")
   #surface
     +header
     #content
-      +yield
+      +Template.dynamic(template=content)
 
-template(name="notfound")
+template(name="notFound")
   +message(label='page-not-found')
 
 template(name="message")

client/components/main/layouts.js

@@ -0,0 +1,5 @@
+Meteor.subscribe('boards');
+
+Template.userFormsLayout.onRendered(function() {
+  EscapeActions.executeAll();
+});

client/components/main/router.js

@@ -1,5 +0,0 @@
-Router.route('/', {
-  name: 'Home',
-  redirectLoggedInUsers: true,
-  authenticated: true
-});

client/components/sidebar/sidebar.js

@@ -162,7 +162,7 @@ Template.labelsWidget.events({
 // fields of the current board document.
 var draggableMembersLabelsWidgets = function() {
   var self = this;
-  if (! Meteor.userId() || ! Meteor.user().isBoardMember())
+  if (! Meteor.user() || ! Meteor.user().isBoardMember())
     return;
 
   self.autorun(function() {

client/components/sidebar/sidebarArchives.jade

@@ -10,7 +10,7 @@ template(name="archivesSidebar")
         | -
         a.js-delete-card Delete
       if cardIsInArchivedList
-        p.quiet.small (warning: this card is in an archived list) <br>
+        p.quiet.small (warning: this card is in an archived list)
     else
       p.no-items-message No archived cards.
 

client/components/users/router.js

@@ -1,15 +0,0 @@
-Router.route('/profile/:username', {
-  name: 'Profile',
-  template: 'profile',
-  waitOn: function() {
-    return Meteor.subscribe('profile', this.params.username);
-  },
-  data: function() {
-    var params = this.params;
-    return {
-      profile: function() {
-        return Users.findOne({ username: params.username });
-      }
-    };
-  }
-});