Fix the board component data loading

1 files changed, 77 insertions, 70 deletions

diff --git a/client/components/boards/boardBody.js b/client/components/boards/boardBody.js
index 3757eff9..4ed62bdc 100644
--- a/client/components/boards/boardBody.js
+++ b/client/components/boards/boardBody.js
@@ -1,4 +1,4 @@
-var boardSubsManager = new SubsManager();
+var subManager = new SubsManager();
 
 BlazeComponent.extendComponent({
   template: function() {
@@ -6,12 +6,19 @@ BlazeComponent.extendComponent({
   },
 
   onCreated: function() {
-    this.draggingActive = new ReactiveVar(false);
-    this.showOverlay = new ReactiveVar(false);
+    var self = this;
+    self.draggingActive = new ReactiveVar(false);
+    self.showOverlay = new ReactiveVar(false);
+    self.isBoardReady = new ReactiveVar(false);
 
+    // The pattern we use to manually handle data loading is described here:
+    // https://kadira.io/academy/meteor-routing-guide/content/subscriptions-and-data-management/using-subs-manager
     // 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'));
+    self.autorun(function() {
+      var handle = subManager.subscribe('board', Session.get('currentBoard'));
+      self.isBoardReady.set(handle.ready());
+    });
   },
 
   openNewListForm: function() {
@@ -47,72 +54,6 @@ BlazeComponent.extendComponent({
     return currentCard && currentCard.listId === listId;
   },
 
-  onRendered: function() {
-    var self = this;
-
-    self.scrollLeft();
-
-    var lists = this.find('.js-lists');
-
-    // We want to animate the card details window closing. We rely on CSS
-    // transition for the actual animation.
-    lists._uihooks = {
-      removeElement: function(node) {
-        var removeNode = _.once(function() {
-          node.parentNode.removeChild(node);
-        });
-        if ($(node).hasClass('js-card-details')) {
-          $(node).css({
-            flexBasis: 0,
-            padding: 0
-          });
-          $(lists).one(CSSEvents.transitionend, removeNode);
-        } else {
-          removeNode();
-        }
-      }
-    };
-
-    if (! Meteor.user() || ! Meteor.user().isBoardMember())
-      return;
-
-    self.$(lists).sortable({
-      tolerance: 'pointer',
-      helper: 'clone',
-      items: '.js-list:not(.js-list-composer)',
-      placeholder: 'list placeholder',
-      distance: 7,
-      start: function(evt, ui) {
-        ui.placeholder.height(ui.helper.height());
-        Popup.close();
-      },
-      stop: function() {
-        self.$('.js-lists').find('.js-list:not(.js-list-composer)').each(
-          function(i, list) {
-            var data = Blaze.getData(list);
-            Lists.update(data._id, {
-              $set: {
-                sort: i
-              }
-            });
-          }
-        );
-      }
-    });
-
-    // Disable drag-dropping while in multi-selection mode
-    self.autorun(function() {
-      self.$(lists).sortable('option', 'disabled', MultiSelection.isActive());
-    });
-
-    // If there is no data in the board (ie, no lists) we autofocus the list
-    // creation form by clicking on the corresponding element.
-    var currentBoard = Boards.findOne(Session.get('currentBoard'));
-    if (currentBoard.lists().count() === 0) {
-      this.openNewListForm();
-    }
-  },
-
   sidebarSize: function() {
     var sidebar = this.componentChildren('sidebar')[0];
     if (sidebar && sidebar.isOpen())
@@ -130,6 +71,72 @@ BlazeComponent.extendComponent({
   }
 }).register('board');
 
+Template.boardBody.onRendered(function() {
+  var self = BlazeComponent.getComponentForElement(this.firstNode);
+
+  self.scrollLeft();
+
+  var lists = this.find('.js-lists');
+
+  // We want to animate the card details window closing. We rely on CSS
+  // transition for the actual animation.
+  lists._uihooks = {
+    removeElement: function(node) {
+      var removeNode = _.once(function() {
+        node.parentNode.removeChild(node);
+      });
+      if ($(node).hasClass('js-card-details')) {
+        $(node).css({
+          flexBasis: 0,
+          padding: 0
+        });
+        $(lists).one(CSSEvents.transitionend, removeNode);
+      } else {
+        removeNode();
+      }
+    }
+  };
+
+  if (! Meteor.user() || ! Meteor.user().isBoardMember())
+    return;
+
+  self.$(lists).sortable({
+    tolerance: 'pointer',
+    helper: 'clone',
+    items: '.js-list:not(.js-list-composer)',
+    placeholder: 'list placeholder',
+    distance: 7,
+    start: function(evt, ui) {
+      ui.placeholder.height(ui.helper.height());
+      Popup.close();
+    },
+    stop: function() {
+      self.$('.js-lists').find('.js-list:not(.js-list-composer)').each(
+        function(i, list) {
+          var data = Blaze.getData(list);
+          Lists.update(data._id, {
+            $set: {
+              sort: i
+            }
+          });
+        }
+      );
+    }
+  });
+
+  // Disable drag-dropping while in multi-selection mode
+  self.autorun(function() {
+    self.$(lists).sortable('option', 'disabled', MultiSelection.isActive());
+  });
+
+  // If there is no data in the board (ie, no lists) we autofocus the list
+  // creation form by clicking on the corresponding element.
+  var currentBoard = Boards.findOne(Session.get('currentBoard'));
+  if (currentBoard.lists().count() === 0) {
+    self.openNewListForm();
+  }
+});
+
 BlazeComponent.extendComponent({
   template: function() {
     return 'addListForm';