- {back}Message Details
-
+
+ {back}Message Details
+
);
}
@@ -60,57 +64,72 @@ RootPost = React.createClass({
render: function() {
var post = this.props.post;
var message = utils.textToJsx(post.message);
- var isOwner = UserStore.getCurrentId() == post.user_id;
+ var isOwner = UserStore.getCurrentId() === post.user_id;
var timestamp = UserStore.getProfile(post.user_id).update_at;
var channel = ChannelStore.get(post.channel_id);
- var type = "Post";
+ var type = 'Post';
if (post.root_id.length > 0) {
- type = "Comment";
+ type = 'Comment';
}
- var currentUserCss = "";
+ var currentUserCss = '';
if (UserStore.getCurrentId() === post.user_id) {
- currentUserCss = "current--user";
+ currentUserCss = 'current--user';
}
+ var channelName;
if (channel) {
- channelName = (channel.type === 'D') ? "Private Message" : channel.display_name;
+ if (channel.type === 'D') {
+ channelName = 'Private Message';
+ } else {
+ channelName = channel.display_name;
+ }
+ }
+
+ var ownerOptions;
+ if (isOwner) {
+ ownerOptions = (
+
+ );
+ }
+
+ var fileAttachment;
+ if (post.filenames && post.filenames.length > 0) {
+ fileAttachment = (
+
-
{ channelName }
-
- ![]({"/api/v1/users/")
+
+
{ channelName }
+
+ 
-
-
-
-
-
- - { isOwner ? - - : "" } ++
-
+
-
+ + {ownerOptions}
{message}
- { post.filenames && post.filenames.length > 0 ? -- : "" } + {fileAttachment}
@@ -134,78 +153,84 @@ CommentPost = React.createClass({ ChannelStore.setChannelMember(member); }.bind(this), function(err) { - post.did_fail = true; + post.state = Constants.POST_FAILED; PostStore.updatePendingPost(post); this.forceUpdate(); }.bind(this) ); - post.did_fail = false; - post.is_loading = true; + post.state = Constants.POST_LOADING; PostStore.updatePendingPost(post); this.forceUpdate(); }, render: function() { var post = this.props.post; - var commentClass = "post"; - var post = this.props.post; - - var currentUserCss = ""; + var currentUserCss = ''; if (UserStore.getCurrentId() === post.user_id) { - currentUserCss = "current--user"; + currentUserCss = 'current--user'; } - var isOwner = UserStore.getCurrentId() == post.user_id; + var isOwner = UserStore.getCurrentId() === post.user_id; - var type = "Post" + var type = 'Post'; if (post.root_id.length > 0) { - type = "Comment" + type = 'Comment'; } var message = utils.textToJsx(post.message); var timestamp = UserStore.getCurrentUser().update_at; var loading; - var postClass = ""; - if (post.did_fail) { - postClass += " post-fail"; - loading = Retry; - } else if (post.is_loading) { - postClass += " post-waiting"; - loading =
;
+ var postClass = '';
+ if (post.state === Constants.POST_FAILED) {
+ postClass += ' post-fail';
+ loading = Retry;
+ } else if (post.state === Constants.POST_LOADING) {
+ postClass += ' post-waiting';
+ loading = ;
+ }
+
+ var ownerOptions;
+ if (isOwner && post.state !== Constants.POST_FAILED && post.state !== Constants.POST_LOADING) {
+ ownerOptions = (
+
+ );
+ }
+
+ var fileAttachment;
+ if (post.filenames && post.filenames.length > 0) {
+ fileAttachment = (
+ + ); } return ( - --++--@@ -239,8 +264,8 @@ module.exports = React.createClass({ }); }, componentDidUpdate: function() { - $(".post-right__scroll").scrollTop($(".post-right__scroll")[0].scrollHeight); - $(".post-right__scroll").perfectScrollbar('update'); + $('.post-right__scroll').scrollTop($('.post-right__scroll')[0].scrollHeight); + $('.post-right__scroll').perfectScrollbar('update'); this.resize(); }, componentWillUnmount: function() { @@ -296,10 +321,10 @@ module.exports = React.createClass({ }, resize: function() { var height = $(window).height() - $('#error_bar').outerHeight() - 100; - $(".post-right__scroll").css("height", height + "px"); - $(".post-right__scroll").scrollTop(100000); - $(".post-right__scroll").perfectScrollbar(); - $(".post-right__scroll").perfectScrollbar('update'); + $('.post-right__scroll').css('height', height + 'px'); + $('.post-right__scroll').scrollTop(100000); + $('.post-right__scroll').perfectScrollbar(); + $('.post-right__scroll').perfectScrollbar('update'); }, render: function() { @@ -314,7 +339,7 @@ module.exports = React.createClass({ var selected_post = post_list.posts[post_list.order[0]]; var root_post = null; - if (selected_post.root_id == "") { + if (selected_post.root_id == '') { root_post = selected_post; } else { @@ -343,11 +368,11 @@ module.exports = React.createClass({ var searchForm = currentId == null ? null :-
-
-
- { isOwner && !post.did_fail && !post.is_loading ?
-
- : "" }
+ +
-
+
- + {ownerOptions}
{loading}{message}
- { post.filenames && post.filenames.length > 0 ? -- : "" } + {fileAttachment}
; return ( - +- {searchForm}-+{searchForm}+-@@ -356,7 +381,7 @@ module.exports = React.createClass({ return })} +diff --git a/web/react/stores/browser_store.jsx b/web/react/stores/browser_store.jsx index 4eed754cc9..436b8d76d9 100644 --- a/web/react/stores/browser_store.jsx +++ b/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) { diff --git a/web/react/stores/post_store.jsx b/web/react/stores/post_store.jsx index 76b31204f2..7fa9fc1257 100644 --- a/web/react/stores/post_store.jsx +++ b/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(); diff --git a/web/react/stores/socket_store.jsx b/web/react/stores/socket_store.jsx index 8ebb854c94..c3c331828e 100644 --- a/web/react/stores/socket_store.jsx +++ b/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; - - - - diff --git a/web/react/utils/async_client.jsx b/web/react/utils/async_client.jsx index 8fa022cbcd..349fe90213 100644 --- a/web/react/utils/async_client.jsx +++ b/web/react/utils/async_client.jsx @@ -346,24 +346,33 @@ module.exports.search = function(terms) { module.exports.getPosts = function(force, id, maxPosts) { if (PostStore.getCurrentPosts() == null || force) { - var channelId = id ? id : ChannelStore.getCurrentId(); + var channelId = id; + if (channelId == null) { + channelId = ChannelStore.getCurrentId(); + } - if (isCallInProgress('getPosts_'+channelId)) return; + if (isCallInProgress('getPosts_' + channelId)) { + return; + } - var post_list = PostStore.getCurrentPosts(); + var postList = PostStore.getCurrentPosts(); - if (!maxPosts) { maxPosts = Constants.POST_CHUNK_SIZE * Constants.MAX_POST_CHUNKS }; + var max = maxPosts; + if (max == null) { + max = Constants.POST_CHUNK_SIZE * Constants.MAX_POST_CHUNKS; + } // if we already have more than POST_CHUNK_SIZE posts, // let's get the amount we have but rounded up to next multiple of POST_CHUNK_SIZE, // with a max at maxPosts - var numPosts = Math.min(maxPosts, Constants.POST_CHUNK_SIZE); - if (post_list && post_list.order.length > 0) { - numPosts = Math.min(maxPosts, Constants.POST_CHUNK_SIZE * Math.ceil(post_list.order.length / Constants.POST_CHUNK_SIZE)); + var numPosts = Math.min(max, Constants.POST_CHUNK_SIZE); + if (postList && postList.order.length > 0) { + numPosts = Math.min(max, Constants.POST_CHUNK_SIZE * Math.ceil(postList.order.length / Constants.POST_CHUNK_SIZE)); } if (channelId != null) { - callTracker['getPosts_'+channelId] = utils.getTimestamp(); + callTracker['getPosts_' + channelId] = utils.getTimestamp(); + client.getPosts( channelId, 0, @@ -377,15 +386,13 @@ module.exports.getPosts = function(force, id, maxPosts) { post_list: data }); - PostStore.removeNonFailedPendingPosts(channelId); - module.exports.getProfiles(); }, function(err) { dispatchError(err, 'getPosts'); }, function() { - callTracker['getPosts_'+channelId] = 0; + callTracker['getPosts_' + channelId] = 0; } ); } diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx index 1fe0faccf2..41b02c8d6b 100644 --- a/web/react/utils/constants.jsx +++ b/web/react/utils/constants.jsx @@ -15,6 +15,7 @@ module.exports = { RECIEVED_CHANNEL_EXTRA_INFO: null, RECIEVED_POSTS: null, + RECIEVED_POST: null, RECIEVED_SEARCH: null, RECIEVED_POST_SELECTED: null, RECIEVED_MENTION_DATA: null, @@ -62,6 +63,8 @@ module.exports = { GOOGLE_SERVICE: 'google', POST_CHUNK_SIZE: 60, MAX_POST_CHUNKS: 3, + POST_LOADING: "loading", + POST_FAILED: "failed", RESERVED_TEAM_NAMES: [ "www", "web",