Fix drag and drop on Sandstorm

This bug was introduced with the introduction of fast-render in
41b23f8. With fast-render data is available instantly after the page
logging, but calls to `Meteor.userId()` still return `null` as the
user isn't authenticated on the DDP channel yet (previously the data
was loaded on DDP after user authentication). Which mean that we know
need to reactively activate Drag and Drop on user log in.

I'm not sure why I was not able to reproduce this bug outside of
Sandstorm.

Fixes #453

3 files changed, 27 insertions, 13 deletions

diff --git a/client/components/boards/boardBody.js b/client/components/boards/boardBody.js
index aa55baad..9c1625cd 100644
--- a/client/components/boards/boardBody.js
+++ b/client/components/boards/boardBody.js
@@ -135,9 +135,6 @@ Template.boardBody.onRendered(function() {
     },
   };
 
-  if (!Meteor.user() || !Meteor.user().isBoardMember())
-    return;
-
   $(self.listsDom).sortable({
     tolerance: 'pointer',
     helper: 'clone',
@@ -163,16 +160,21 @@ Template.boardBody.onRendered(function() {
     },
   });
 
-  // Disable drag-dropping while in multi-selection mode
+  function userIsMember() {
+    return Meteor.user() && Meteor.user().isBoardMember();
+  }
+
+  // Disable drag-dropping while in multi-selection mode, or if the current user
+  // is not a board member
   self.autorun(() => {
     $(self.listsDom).sortable('option', 'disabled',
-      MultiSelection.isActive());
+      MultiSelection.isActive() || !userIsMember());
   });
 
   // If there is no data in the board (ie, no lists) we autofocus the list
   // creation form by clicking on the corresponding element.
   const currentBoard = Boards.findOne(Session.get('currentBoard'));
-  if (currentBoard.lists().count() === 0) {
+  if (userIsMember() && currentBoard.lists().count() === 0) {
     self.openNewListForm();
   }
 });
diff --git a/client/components/lists/list.js b/client/components/lists/list.js
index f5410ed0..e454cb48 100644
--- a/client/components/lists/list.js
+++ b/client/components/lists/list.js
@@ -22,9 +22,6 @@ BlazeComponent.extendComponent({
   // callback, we basically solve all issues related to reactive updates. A
   // comment below provides further details.
   onRendered() {
-    if (!Meteor.user() || !Meteor.user().isBoardMember())
-      return;
-
     const boardComponent = this.parentComponent();
     const itemsSelector = '.js-minicard:not(.placeholder, .js-card-composer)';
     const $cards = this.$('.js-minicards');
@@ -85,6 +82,15 @@ BlazeComponent.extendComponent({
       },
     });
 
+    function userIsMember() {
+      return Meteor.user() && Meteor.user().isBoardMember();
+    }
+
+    // Disable drag-dropping if the current user is not a board member
+    this.autorun(() => {
+      $cards.sortable('option', 'disabled', !userIsMember());
+    });
+
     // We want to re-run this function any time a card is added.
     this.autorun(() => {
       const currentBoardId = Tracker.nonreactive(() => {
diff --git a/client/components/sidebar/sidebar.js b/client/components/sidebar/sidebar.js
index 35651622..15a4ce44 100644
--- a/client/components/sidebar/sidebar.js
+++ b/client/components/sidebar/sidebar.js
@@ -195,9 +195,6 @@ Template.labelsWidget.events({
 // autorun function and register a dependency on the both members and labels
 // fields of the current board document.
 function draggableMembersLabelsWidgets() {
-  if (!Meteor.user() || !Meteor.user().isBoardMember())
-    return;
-
   this.autorun(() => {
     const currentBoardId = Tracker.nonreactive(() => {
       return Session.get('currentBoard');
@@ -209,7 +206,8 @@ function draggableMembersLabelsWidgets() {
       },
     });
     Tracker.afterFlush(() => {
-      this.$('.js-member,.js-label').draggable({
+      const $draggables = this.$('.js-member,.js-label');
+      $draggables.draggable({
         appendTo: 'body',
         helper: 'clone',
         revert: 'invalid',
@@ -220,6 +218,14 @@ function draggableMembersLabelsWidgets() {
           EscapeActions.executeUpTo('popup-back');
         },
       });
+
+      function userIsMember() {
+        return Meteor.user() && Meteor.user().isBoardMember();
+      }
+
+      this.autorun(() => {
+        $draggables.draggable('option', 'disabled', !userIsMember());
+      });
     });
   });
 }