Replace the component bounded `cachedValue` by a global `UnsavedEdits`

This new draft saving system is currently only implemented for the
card description and comment. We need better a component
inheritance/composition model to support this for all editable fields.

Fixes #186

1 files changed, 70 insertions, 34 deletions

diff --git a/client/components/activities/comments.js b/client/components/activities/comments.js
index d41b86dd..a3af7ba6 100644
--- a/client/components/activities/comments.js
+++ b/client/components/activities/comments.js
@@ -1,47 +1,83 @@
-var commentFormIsOpen = new ReactiveVar(false);
+let commentFormIsOpen = new ReactiveVar(false);
 
-Template.commentForm.helpers({
-  commentFormIsOpen: function() {
-    return commentFormIsOpen.get();
-  }
-});
+BlazeComponent.extendComponent({
+  template() {
+    return 'commentForm';
+  },
 
-Template.commentForm.events({
-  'click .js-new-comment:not(.focus)': function() {
-    commentFormIsOpen.set(true);
+  onDestroyed() {
+    commentFormIsOpen.set(false);
   },
-  'submit .js-new-comment-form': function(evt, tpl) {
-    var input = tpl.$('.js-new-comment-input');
-    if ($.trim(input.val())) {
-      CardComments.insert({
-        boardId: this.boardId,
-        cardId: this._id,
-        text: input.val()
-      });
-      input.val('');
-      input.blur();
-      commentFormIsOpen.set(false);
-      Tracker.flush();
-      autosize.update(input);
-    }
-    evt.preventDefault();
+
+  commentFormIsOpen() {
+    return commentFormIsOpen.get();
   },
-  // Pressing Ctrl+Enter should submit the form
-  'keydown form textarea': function(evt, tpl) {
-    if (evt.keyCode === 13 && (evt.metaKey || evt.ctrlKey)) {
-      tpl.find('button[type=submit]').click();
-    }
+
+  getInput() {
+    return this.$('.js-new-comment-input');
+  },
+
+  events() {
+    return [{
+      'click .js-new-comment:not(.focus)': function() {
+        commentFormIsOpen.set(true);
+      },
+      'submit .js-new-comment-form': function(evt) {
+        let input = this.getInput();
+        if ($.trim(input.val())) {
+          CardComments.insert({
+            boardId: this.boardId,
+            cardId: this._id,
+            text: input.val()
+          });
+          resetCommentInput(input);
+          Tracker.flush();
+          autosize.update(input);
+        }
+        evt.preventDefault();
+      },
+      // Pressing Ctrl+Enter should submit the form
+      'keydown form textarea': function(evt) {
+        if (evt.keyCode === 13 && (evt.metaKey || evt.ctrlKey)) {
+          this.find('button[type=submit]').click();
+        }
+      }
+    }];
   }
-});
+}).register('commentForm');
 
-Template.commentForm.onDestroyed(function() {
+// XXX This should be a static method of the `commentForm` component
+function resetCommentInput(input) {
+  input.val('');
+  input.blur();
   commentFormIsOpen.set(false);
-});
+}
+
+// XXX This should handled a `onUpdated` callback of the `commentForm` component
+// but since this callback doesn't exists, and `onRendered` is not called if the
+// data is not destroyed and recreated, we simulate the desired callback using
+// Tracker.autorun to register the component dependencies, and re-run when these
+// dependencies are invalidated. A better component API would remove this hack.
+Tracker.autorun(() => {
+  Session.get('currentCard');
+  Tracker.afterFlush(() => {
+    autosize.update($('.js-new-comment-input'));
+  });
+})
 
 EscapeActions.register('inlinedForm',
   function() {
-    commentFormIsOpen.set(false);
-    $('.js-new-comment-input').blur();
+    const draftKey = {
+      fieldName: 'cardComment',
+      docId: Session.get('currentCard')
+    };
+    let commentInput = $('.js-new-comment-input');
+    if ($.trim(commentInput.val())) {
+      UnsavedEdits.set(draftKey, commentInput.val());
+    } else {
+      UnsavedEdits.reset(draftKey);
+    }
+    resetCommentInput(commentInput);
   },
   function() { return commentFormIsOpen.get(); }, {
     noClickEscapeOn: '.js-new-comment'