finalize implenetation of predictive client posts so that users get immediate feedback after posting

web/react/stores/browser_store.jsx

@@ -3,7 +3,9 @@
 
 var UserStore;
 function getPrefix() {
-    if (!UserStore) UserStore = require('./user_store.jsx');
+    if (!UserStore) {
+        UserStore = require('./user_store.jsx');
+    }
     return UserStore.getCurrentId() + '_';
 }
 
@@ -11,15 +13,15 @@ function getPrefix() {
 var BROWSER_STORE_VERSION = '.4';
 
 module.exports = {
-    _initialized: false,
+    initialized: false,
 
-    _initialize: function() {
-        var currentVersion = localStorage.getItem("local_storage_version");
+    initialize: function() {
+        var currentVersion = localStorage.getItem('local_storage_version');
         if (currentVersion !== BROWSER_STORE_VERSION) {
             this.clear();
-            localStorage.setItem("local_storage_version", BROWSER_STORE_VERSION);
+            localStorage.setItem('local_storage_version', BROWSER_STORE_VERSION);
         }
-        this._initialized = true;
+        this.initialized = true;
     },
 
     getItem: function(name, defaultValue) {
@@ -31,19 +33,25 @@ module.exports = {
     },
 
     removeItem: function(name) {
-        if (!this._initialized) this._initialize();
+        if (!this.initialized) {
+            this.initialize();
+        }
 
         localStorage.removeItem(getPrefix() + name);
     },
 
     setGlobalItem: function(name, value) {
-        if (!this._initialized) this._initialize();
+        if (!this.initialized) {
+            this.initialize();
+        }
 
         localStorage.setItem(name, JSON.stringify(value));
     },
 
     getGlobalItem: function(name, defaultValue) {
-        if (!this._initialized) this._initialize();
+        if (!this.initialized) {
+            this.initialize();
+        }
 
         var result = null;
         try {
@@ -58,7 +66,9 @@ module.exports = {
     },
 
     removeGlobalItem: function(name) {
-        if (!this._initialized) this._initialize();
+        if (!this.initialized) {
+            this.initialize();
+        }
 
         localStorage.removeItem(name);
     },
@@ -70,10 +80,12 @@ module.exports = {
 
     /**
      * Preforms the given action on each item that has the given prefix
-     * Signiture for action is action(key, value)
+     * Signature for action is action(key, value)
      */
-    actionOnItemsWithPrefix: function (prefix, action) {
-        if (!this._initialized) this._initialize();
+    actionOnItemsWithPrefix: function(prefix, action) {
+        if (!this.initialized) {
+            this.initialize();
+        }
 
         var globalPrefix = getPrefix();
         var globalPrefixiLen = globalPrefix.length;
@@ -87,14 +99,14 @@ module.exports = {
 
     isLocalStorageSupported: function() {
         try {
-            sessionStorage.setItem("testSession", '1');
-            sessionStorage.removeItem("testSession");
+            sessionStorage.setItem('testSession', '1');
+            sessionStorage.removeItem('testSession');
 
-            localStorage.setItem("testLocal", '1');
-            if (localStorage.getItem("testLocal") != '1') {
+            localStorage.setItem('testLocal', '1');
+            if (localStorage.getItem('testLocal') !== '1') {
                 return false;
             }
-            localStorage.removeItem("testLocal", '1');
+            localStorage.removeItem('testLocal', '1');
 
             return true;
         } catch (e) {

web/react/stores/post_store.jsx

@@ -103,7 +103,38 @@ var PostStore = assign({}, EventEmitter.prototype, {
         this.pStorePosts(channelId, posts);
         this.emitChange();
     },
+    pStorePosts: function pStorePosts(channelId, posts) {
+        BrowserStore.setItem('posts_' + channelId, posts);
+    },
+    getPosts: function getPosts(channelId) {
+        return BrowserStore.getItem('posts_' + channelId);
+    },
+    storePost: function(post) {
+        this.pStorePost(post);
+        this.emitChange();
+    },
+    pStorePost: function(post) {
+        var postList = PostStore.getPosts(post.channel_id);
+        if (!postList) {
+            return;
+        }
+
+        if (post.pending_post_id !== '') {
+            this.removePendingPost(post.channel_id, post.pending_post_id);
+        }
+
+        post.pending_post_id = '';
+
+        postList.posts[post.id] = post;
+        if (postList.order.indexOf(post.id) === -1) {
+            postList.order.unshift(post.id);
+        }
+
+        this.pStorePosts(post.channel_id, postList);
+    },
     storePendingPost: function(post) {
+        post.state = Constants.POST_LOADING;
+
         var postList = this.getPendingPosts(post.channel_id);
         if (!postList) {
             postList = {posts: {}, order: []};
@@ -114,8 +145,29 @@ var PostStore = assign({}, EventEmitter.prototype, {
         this._storePendingPosts(post.channel_id, postList);
         this.emitChange();
     },
-    _storePendingPosts: function(channelId, posts) {
-        BrowserStore.setItem('pending_posts_' + channelId, posts);
+    _storePendingPosts: function(channelId, postList) {
+        var posts = postList.posts;
+
+        // sort failed posts to the bottom
+        postList.order.sort(function postSort(a, b) {
+            if (posts[a].state === Constants.POST_LOADING && posts[b].state === Constants.POST_FAILED) {
+                return 1;
+            }
+            if (posts[a].state === Constants.POST_FAILED && posts[b].state === Constants.POST_LOADING) {
+                return -1;
+            }
+
+            if (posts[a].create_at > posts[b].create_at) {
+                return -1;
+            }
+            if (posts[a].create_at < posts[b].create_at) {
+                return 1;
+            }
+
+            return 0;
+        });
+
+        BrowserStore.setItem('pending_posts_' + channelId, postList);
     },
     getPendingPosts: function(channelId) {
         return BrowserStore.getItem('pending_posts_' + channelId);
@@ -140,8 +192,10 @@ var PostStore = assign({}, EventEmitter.prototype, {
 
         this._storePendingPosts(channelId, postList);
     },
-    clearPendingPosts: function(channelId) {
-        BrowserStore.removeItem('pending_posts_' + channelId);
+    clearPendingPosts: function() {
+        BrowserStore.actionOnItemsWithPrefix('pending_posts_', function clearPending(key) {
+            BrowserStore.removeItem(key);
+        });
     },
     removeNonFailedPendingPosts: function(channelId) {
         var postList = this.getPendingPosts(channelId);
@@ -171,12 +225,6 @@ var PostStore = assign({}, EventEmitter.prototype, {
         this._storePendingPosts(post.channel_id, postList);
         this.emitChange();
     },
-    pStorePosts: function pStorePosts(channelId, posts) {
-        BrowserStore.setItem('posts_' + channelId, posts);
-    },
-    getPosts: function getPosts(channelId) {
-        return BrowserStore.getItem('posts_' + channelId);
-    },
     storeSearchResults: function storeSearchResults(results, isMentionSearch) {
         BrowserStore.setItem('search_results', results);
         BrowserStore.setItem('is_mention_search', Boolean(isMentionSearch));
@@ -248,6 +296,10 @@ PostStore.dispatchToken = AppDispatcher.register(function registry(payload) {
             PostStore.pStorePosts(action.id, action.post_list);
             PostStore.emitChange();
             break;
+        case ActionTypes.RECIEVED_POST:
+            PostStore.pStorePost(action.post);
+            PostStore.emitChange();
+            break;
         case ActionTypes.RECIEVED_SEARCH:
             PostStore.storeSearchResults(action.results, action.is_mention_search);
             PostStore.emitSearchChange();

web/react/stores/socket_store.jsx

@@ -15,72 +15,80 @@ var CHANGE_EVENT = 'change';
 var conn;
 
 var SocketStore = assign({}, EventEmitter.prototype, {
-  initialize: function(self) {
-    if (!UserStore.getCurrentId()) return;
+    initialize: function() {
+        if (!UserStore.getCurrentId()) {
+            return;
+        }
 
-    if (!self) self = this;
-    self.setMaxListeners(0);
+        var self = this;
+        self.setMaxListeners(0);
 
-    if (window["WebSocket"] && !conn) {
-      var protocol = window.location.protocol == "https:" ? "wss://" : "ws://";
-      var port = window.location.protocol == "https:" ? ":8443" : "";
-      var conn_url = protocol + location.host + port + "/api/v1/websocket";
-      console.log("connecting to " + conn_url);
-      conn = new WebSocket(conn_url);
+        if (window.WebSocket && !conn) {
+            var protocol = 'ws://';
+            var port = '';
+            if (window.location.protocol === 'https:') {
+                protocol = 'wss://';
+                port = ':8443';
+            }
+            var connUrl = protocol + location.host + port + '/api/v1/websocket';
+            console.log('connecting to ' + connUrl);
+            conn = new WebSocket(connUrl);
 
-      conn.onclose = function(evt) {
-        console.log("websocket closed");
-        console.log(evt);
-        conn = null;
-        setTimeout(function(){self.initialize(self)}, 3000);
-      };
+            conn.onclose = function closeConn(evt) {
+                console.log('websocket closed');
+                console.log(evt);
+                conn = null;
+                setTimeout(
+                    function reconnect() {
+                        self.initialize();
+                    },
+                    3000
+                );
+            };
 
-      conn.onerror = function(evt) {
-        console.log("websocket error");
-        console.log(evt);
-      };
+            conn.onerror = function connError(evt) {
+                console.log('websocket error');
+                console.log(evt);
+            };
 
-      conn.onmessage = function(evt) {
-        AppDispatcher.handleServerAction({
-          type: ActionTypes.RECIEVED_MSG,
-          msg: JSON.parse(evt.data)
-        });
-      };
+            conn.onmessage = function connMessage(evt) {
+                AppDispatcher.handleServerAction({
+                    type: ActionTypes.RECIEVED_MSG,
+                    msg: JSON.parse(evt.data)
+                });
+            };
+        }
+    },
+    emitChange: function(msg) {
+        this.emit(CHANGE_EVENT, msg);
+    },
+    addChangeListener: function(callback) {
+        this.on(CHANGE_EVENT, callback);
+    },
+    removeChangeListener: function(callback) {
+        this.removeListener(CHANGE_EVENT, callback);
+    },
+    sendMessage: function(msg) {
+        if (conn && conn.readyState === WebSocket.OPEN) {
+            conn.send(JSON.stringify(msg));
+        } else if (!conn || conn.readyState === WebSocket.Closed) {
+            conn = null;
+            this.initialize();
+        }
     }
-  },
-  emitChange: function(msg) {
-    this.emit(CHANGE_EVENT, msg);
-  },
-  addChangeListener: function(callback) {
-    this.on(CHANGE_EVENT, callback);
-  },
-  removeChangeListener: function(callback) {
-    this.removeListener(CHANGE_EVENT, callback);
-  },
-  sendMessage: function (msg) {
-    if (conn && conn.readyState === WebSocket.OPEN) {
-      conn.send(JSON.stringify(msg));
-    } else if (!conn || conn.readyState === WebSocket.Closed) {
-      conn = null;
-      this.initialize();
-    }
-  }
 });
 
 SocketStore.dispatchToken = AppDispatcher.register(function(payload) {
-  var action = payload.action;
+    var action = payload.action;
 
-  switch(action.type) {
-    case ActionTypes.RECIEVED_MSG:
-      SocketStore.emitChange(action.msg);
-      break;
-    default:
-  }
+    switch (action.type) {
+        case ActionTypes.RECIEVED_MSG:
+        SocketStore.emitChange(action.msg);
+        break;
+
+        default:
+    }
 });
 
 SocketStore.initialize();
 module.exports = SocketStore;
-
-
-
-