Merge pull request #118 from gdpelican/staging-posts

Stage posts while making post request

assets/javascripts/discourse/components/babble-composer.js.es6

@@ -99,24 +99,25 @@ export default Ember.Component.extend({
     },
 
     submit: function(context) {
-      var self = context || this;
-
-      if (self.get('text').trim() === "") {
-        self.set('showError', true)
-        self.set('text', '')
-        return
+      const self = context || this;
+      const text = self.get('text').trim()
+      self.set('text', '')
+
+      if (text === '') {
+        self.set('errorMessage', 'babble.error_message')
+      } else {
+        self.set('processing', true)
+        Discourse.Babble.stagePost(text)
+        Discourse.ajax("/babble/topics/" + self.get('topic.id') + "/post", {
+          type: 'POST',
+          data: { raw: text }
+        })
+        .then(Discourse.Babble.handleNewPost, function() {
+          Discourse.Babble.clearStagedPost()
+          self.set('errorMessage', 'babble.failed_post')
+        })
+        .finally(function() { self.set('processing', false) });
       }
-
-      self.set('processing', true)
-      Discourse.ajax("/babble/topics/" + self.get('topic.id') + "/post", {
-        type: 'POST',
-        data: { raw: self.get('text').trim() }
-      })
-      .then(Discourse.Babble.handleNewPost)
-      .finally(function() {
-        self.set('text', '')
-        self.set('processing', false)
-      });
     }
   }
 

assets/javascripts/discourse/components/babble-post.js.es6

@@ -5,6 +5,7 @@ export default Ember.Component.extend({
   tagName: 'li',
   classNames: ['babble-post'],
 
+  isStaged: Em.computed.equal('post.id', -1),
   userDeleted: Em.computed.empty('post.user_id'),
 
   _init: function() {

assets/javascripts/discourse/lib/babble.js.es6

@@ -60,21 +60,52 @@ export default Ember.Object.create({
     return Discourse.Babble.get('latestPost.user_id') == Discourse.User.current().id
   },
 
-  handleNewPost: function(data) {
+  stagePost: function(text) {
     const self = Discourse.Babble
+    const user = Discourse.User.current()
 
     var postStream = self.get('currentTopic.postStream')
-    var post = postStream.storePost(Post.create(data))
-    post.created_at = moment(data.created_at, 'YYYY-MM-DD HH:mm:ss Z')
-    postStream.appendPost(post)
+    var post = Post.create({
+      raw: text,
+      cooked: text,
+      name: user.get('name'),
+      display_username: user.get('name'),
+      username: user.get('username'),
+      user_id: user.get('id'),
+      user_title: user.get('title'),
+      avatar_template: user.get('avatar_template'),
+      user_custom_fields: user.get('custom_fields'),
+      moderator: user.get('moderator'),
+      admin: user.get('admin')
+    })
+    postStream.set('loadedAllPosts', true)
+    postStream.stagePost(post, user)
+    self.set('latestPost', post)
+  },
+
+  handleNewPost: function(data) {
+    const self = Discourse.Babble
 
+    var postStream = self.get('currentTopic.postStream')
+    var post = Post.create(data)
+    post.set('created_at', moment(data.created_at, 'YYYY-MM-DD HH:mm:ss Z'))
     self.set('latestPost', post)
 
     if (self.lastPostIsMine()) {
+      self.clearStagedPost()
+      postStream.commitPost(post)
       self.set('unreadCount', 0)
     } else {
+      postStream.appendPost(post)
       var topic = self.get('currentTopic')
       self.set('unreadCount', topic.highest_post_number - topic.last_read_post_number)
     }
+  },
+
+  clearStagedPost: function() {
+    const self = Discourse.Babble
+    var postStream = self.get('currentTopic.postStream')
+    var staged = postStream.findLoadedPost(-1)
+    if (staged) { postStream.removePosts([staged]) }
   }
 })

assets/javascripts/discourse/templates/components/babble-composer.hbs

@@ -6,7 +6,7 @@
   <button {{action 'selectEmoji'}} class="btn no-text emoji" title="Emoji :smile:" aria-label="Emoji :smile:">
     <i class="fa fa-smile-o"></i>
   </button>
-  {{#if showError}}
-    <span class="babble-composer-error-message">{{i18n 'babble.error_message'}}</span>
+  {{#if errorMessage}}
+    <span class="babble-composer-error-message">{{i18n errorMessage}}</span>
   {{/if}}
 </div>

assets/javascripts/discourse/templates/components/babble-post.hbs

@@ -1,7 +1,7 @@
 {{post-gap post=post postStream=postStream before="true"}}
 
-<article class="babble-post-container boxed" {{bind-attr id="postElementId" data-post-id="post.id" data-user-id="post.user_id" data-post-number="post.post_number"}}>
-  <div class='row'>
+<article {{bind-attr class="isStaged:babble-post-staged :babble-post-container :boxed" id="postElementId" data-post-id="post.id" data-user-id="post.user_id" data-post-number="post.post_number"}}>
+  <div class="row">
     <div class='babble-post-avatar babble-post-content'>
       <div class="contents">
         {{#if userDeleted}}

assets/stylesheets/babble.scss

@@ -72,6 +72,10 @@
   background-color: transparent !important; /* sorry mom. */
 }
 
+.babble-post-staged {
+  opacity: .5;
+}
+
 .babble-post {
   position: relative;
   list-style-type: none;

config/locales/client.en.yml

@@ -5,6 +5,7 @@ en:
       send: "Send"
       title: "open a chat window for a quick conversation"
       error_message: "Please enter a message!"
+      failed_post: "Could not save that post. Please try again."
       empty_topic_message: "No messages yet! Enter one below to get started."
       topic_visibility_tooltip: "This chat is visible to: {{groupNames}}"
       view_topics_tooltip: "View other chat channels"