{inner}
- { filenames && filenames.length > 0 ? -
+ {comment}
+
);
}
diff --git a/web/react/components/post_info.jsx b/web/react/components/post_info.jsx
index 8eaaf4e8c8..f6ab0ed8a2 100644
--- a/web/react/components/post_info.jsx
+++ b/web/react/components/post_info.jsx
@@ -12,41 +12,68 @@ module.exports = React.createClass({
},
render: function() {
var post = this.props.post;
- var isOwner = UserStore.getCurrentId() == post.user_id;
- var isAdmin = UserStore.getCurrentUser().roles.indexOf("admin") > -1
+ var isOwner = UserStore.getCurrentId() === post.user_id;
+ var isAdmin = UserStore.getCurrentUser().roles.indexOf('admin') > -1;
- var type = "Post"
- if (post.root_id.length > 0) {
- type = "Comment"
+ var type = 'Post';
+ if (post.root_id && post.root_id.length > 0) {
+ type = 'Comment';
}
- var comments = "";
- var lastCommentClass = this.props.isLastComment ? " comment-icon__container__show" : " comment-icon__container__hide";
- if (this.props.commentCount >= 1) {
- comments = {this.props.commentCount};
+ var comments = '';
+ var lastCommentClass = ' comment-icon__container__hide';
+ if (this.props.isLastComment) {
+ lastCommentClass = ' comment-icon__container__show';
+ }
+
+ if (this.props.commentCount >= 1 && post.state !== Constants.POST_FAILED && post.state !== Constants.POST_LOADING) {
+ comments = {this.props.commentCount};
+ }
+
+ var showDropdown = isOwner || (this.props.allowReply === 'true' && type !== 'Comment');
+ if (post.state === Constants.POST_FAILED || post.state === Constants.POST_LOADING) {
+ showDropdown = false;
+ }
+
+ var dropdownContents = [];
+ var dropdown;
+ if (showDropdown) {
+ var dataComments = 0;
+ if (type === 'Post') {
+ dataComments = this.props.commentCount;
+ }
+
+ if (isOwner) {
+ dropdownContents.push({loading}{inner}
+ {fileAttachmentHolder} + {embed}-
-
-
- - - { comments } - +
-
+ + {dropdown} ++ {comments} +
-
- - { isOwner ? - - : "" } ++
-
+
-
+ + {ownerOptions}
+{message}
- { post.filenames && post.filenames.length > 0 ? -- : "" } + {fileAttachment}
@@ -119,56 +139,104 @@ RootPost = React.createClass({ }); CommentPost = React.createClass({ + retryComment: function(e) { + e.preventDefault(); + + var post = this.props.post; + client.createPost(post, post.channel_id, + function success(data) { + AsyncClient.getPosts(true); + + var channel = ChannelStore.get(post.channel_id); + var member = ChannelStore.getMember(post.channel_id); + member.msg_count = channel.total_msg_count; + member.last_viewed_at = (new Date()).getTime(); + ChannelStore.setChannelMember(member); + + AppDispatcher.handleServerAction({ + type: ActionTypes.RECIEVED_POST, + post: data + }); + }.bind(this), + function fail() { + post.state = Constants.POST_FAILED; + PostStore.updatePendingPost(post); + this.forceUpdate(); + }.bind(this) + ); + + post.state = Constants.POST_LOADING; + PostStore.updatePendingPost(post); + this.forceUpdate(); + }, render: function() { var post = this.props.post; - var commentClass = "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; - return ( ---+ var 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 = (
+
- --
-
-
- { isOwner ?
-
- : "" }
+ );
+ }
+
+ var fileAttachment;
+ if (post.filenames && post.filenames.length > 0) {
+ fileAttachment = (
+
+ ); + } + + return ( + ++++
+@@ -177,31 +245,45 @@ CommentPost = React.createClass({ }); function getStateFromStores() { - return { post_list: PostStore.getSelectedPost() }; + var postList = PostStore.getSelectedPost(); + if (!postList || postList.order.length < 1) { + return {postList: {}}; + } + + var channelId = postList.posts[postList.order[0]].channel_id; + var pendingPostList = PostStore.getPendingPosts(channelId); + + if (pendingPostList) { + for (var pid in pendingPostList.posts) { + postList.posts[pid] = pendingPostList.posts[pid]; + } + } + + return {postList: postList}; } module.exports = React.createClass({ componentDidMount: function() { - PostStore.addSelectedPostChangeListener(this._onChange); - PostStore.addChangeListener(this._onChangeAll); - UserStore.addStatusesChangeListener(this._onTimeChange); + PostStore.addSelectedPostChangeListener(this.onChange); + PostStore.addChangeListener(this.onChangeAll); + UserStore.addStatusesChangeListener(this.onTimeChange); this.resize(); var self = this; - $(window).resize(function(){ + $(window).resize(function() { self.resize(); }); }, 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() { - PostStore.removeSelectedPostChangeListener(this._onChange); - PostStore.removeChangeListener(this._onChangeAll); - UserStore.removeStatusesChangeListener(this._onTimeChange); + PostStore.removeSelectedPostChangeListener(this.onChange); + PostStore.removeChangeListener(this.onChangeAll); + UserStore.removeStatusesChangeListener(this.onTimeChange); }, - _onChange: function() { + onChange: function() { if (this.isMounted()) { var newState = getStateFromStores(); if (!utils.areStatesEqual(newState, this.state)) { @@ -209,24 +291,22 @@ module.exports = React.createClass({ } } }, - _onChangeAll: function() { + onChangeAll: function() { if (this.isMounted()) { - // if something was changed in the channel like adding a // comment or post then lets refresh the sidebar list var currentSelected = PostStore.getSelectedPost(); - if (!currentSelected || currentSelected.order.length == 0) { + if (!currentSelected || currentSelected.order.length === 0) { return; } var currentPosts = PostStore.getPosts(currentSelected.posts[currentSelected.order[0]].channel_id); - if (!currentPosts || currentPosts.order.length == 0) { + if (!currentPosts || currentPosts.order.length === 0) { return; } - - if (currentPosts.posts[currentPosts.order[0]].channel_id == currentSelected.posts[currentSelected.order[0]].channel_id) { + if (currentPosts.posts[currentPosts.order[0]].channel_id === currentSelected.posts[currentSelected.order[0]].channel_id) { currentSelected.posts = {}; for (var postId in currentPosts.posts) { currentSelected.posts[postId] = currentPosts.posts[postId]; @@ -238,9 +318,11 @@ module.exports = React.createClass({ this.setState(getStateFromStores()); } }, - _onTimeChange: function() { - for (var id in this.state.post_list.posts) { - if (!this.refs[id]) continue; + onTimeChange: function() { + for (var id in this.state.postList.posts) { + if (!this.refs[id]) { + continue; + } this.refs[id].forceUpdate(); } }, @@ -249,68 +331,70 @@ 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() { + var postList = this.state.postList; - var post_list = this.state.post_list; - - if (post_list == null) { + if (postList == null) { return ( ); } - var selected_post = post_list.posts[post_list.order[0]]; - var root_post = null; + var selectedPost = postList.posts[postList.order[0]]; + var rootPost = null; - if (selected_post.root_id == "") { - root_post = selected_post; - } - else { - root_post = post_list.posts[selected_post.root_id]; + if (selectedPost.root_id === '') { + rootPost = selectedPost; + } else { + rootPost = postList.posts[selectedPost.root_id]; } - var posts_array = []; + var postsArray = []; - for (var postId in post_list.posts) { - var cpost = post_list.posts[postId]; - if (cpost.root_id == root_post.id) { - posts_array.push(cpost); + for (var postId in postList.posts) { + var cpost = postList.posts[postId]; + if (cpost.root_id === rootPost.id) { + postsArray.push(cpost); } } - posts_array.sort(function(a,b) { - if (a.create_at < b.create_at) + postsArray.sort(function postSort(a, b) { + if (a.create_at < b.create_at) { return -1; - if (a.create_at > b.create_at) + } + if (a.create_at > b.create_at) { return 1; + } return 0; }); - var results = this.state.results; var currentId = UserStore.getCurrentId(); - var searchForm = currentId == null ? null :-
+
- + {ownerOptions}
-{message}
- { post.filenames && post.filenames.length > 0 ? -- : "" } + +{loading}{message}
+ {fileAttachment}; + var searchForm; + if (currentId != null) { + searchForm = ; + } return ( - +- {searchForm}-+{searchForm}+- -- - { posts_array.map(function(cpost) { - 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 9ebdf734ce..3e4fde30aa 100644 --- a/web/react/stores/post_store.jsx +++ b/web/react/stores/post_store.jsx @@ -19,7 +19,6 @@ var MENTION_DATA_CHANGE_EVENT = 'mention_data_change'; var ADD_MENTION_EVENT = 'add_mention'; var PostStore = assign({}, EventEmitter.prototype, { - emitChange: function emitChange() { this.emit(CHANGE_EVENT); }, @@ -110,6 +109,108 @@ var PostStore = assign({}, EventEmitter.prototype, { 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: []}; + } + + postList.posts[post.pending_post_id] = post; + postList.order.unshift(post.pending_post_id); + this._storePendingPosts(post.channel_id, postList); + this.emitChange(); + }, + _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); + }, + removePendingPost: function(channelId, pendingPostId) { + this._removePendingPost(channelId, pendingPostId); + this.emitChange(); + }, + _removePendingPost: function(channelId, pendingPostId) { + var postList = this.getPendingPosts(channelId); + if (!postList) { + return; + } + + if (pendingPostId in postList.posts) { + delete postList.posts[pendingPostId]; + } + var index = postList.order.indexOf(pendingPostId); + if (index >= 0) { + postList.order.splice(index, 1); + } + + this._storePendingPosts(channelId, postList); + }, + clearPendingPosts: function() { + BrowserStore.actionOnItemsWithPrefix('pending_posts_', function clearPending(key) { + BrowserStore.removeItem(key); + }); + }, + updatePendingPost: function(post) { + var postList = this.getPendingPosts(post.channel_id); + if (!postList) { + postList = {posts: {}, order: []}; + } + + if (postList.order.indexOf(post.pending_post_id) === -1) { + return; + } + + postList.posts[post.pending_post_id] = post; + this._storePendingPosts(post.channel_id, postList); + this.emitChange(); + }, storeSearchResults: function storeSearchResults(results, isMentionSearch) { BrowserStore.setItem('search_results', results); BrowserStore.setItem('is_mention_search', Boolean(isMentionSearch)); @@ -181,6 +282,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 8b6d821d60..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, @@ -383,7 +392,7 @@ module.exports.getPosts = function(force, id, maxPosts) { 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", diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index c7add21a27..e665be6b9c 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -315,6 +315,21 @@ body.ios { font-size: 0.97em; white-space: pre-wrap; } + + .post-loading-gif { + height:10px; + width:10px; + margin-top:6px; + } + + .post-fail { + color: #D58A8A; + } + + .post-waiting { + color: #999; + } + .comment-icon__container { margin-left: 7px; fill: $primary-color;+ + {postsArray.map(function mapPosts(comPost) { + return-; })} -+ +
-
+
+
Beginning of Channel
; + var moreMessages =Beginning of Channel
; - var userStyle = { color: UserStore.getCurrentUser().props.theme } + var userStyle = {color: UserStore.getCurrentUser().props.theme}; if (channel != null) { if (order.length > 0 && order.length % Constants.POST_CHUNK_SIZE === 0) { - more_messages = Load more messages; + moreMessages = Load more messages; } else if (channel.type === 'D') { - var teammate = utils.getDirectTeammate(channel.id) + var teammate = utils.getDirectTeammate(channel.id); if (teammate) { - var teammate_name = teammate.nickname.length > 0 ? teammate.nickname : teammate.username; - more_messages = ( -
-
-
+ var teammateName = teammate.username;
+ if (teammate.nickname.length > 0) {
+ teammateName = teammate.nickname;
+ }
+
+ moreMessages = (
+
+
+
-
+
);
} else {
- more_messages = (
-
- {"This is the start of your private message history with " + teammate_name + "." }
- {"Private messages and files shared here are not shown to people outside this area."}
+
+ {'This is the start of your private message history with ' + teammateName + '.'}
+ {'Private messages and files shared here are not shown to people outside this area.'}
-
{"This is the start of your private message history with this " + strings.Team + "mate. Private messages and files shared here are not shown to people outside this area."}
+ moreMessages = ( +
+
);
}
} else if (channel.type === 'P' || channel.type === 'O') {
- var ui_name = channel.display_name
+ var uiName = channel.display_name;
var members = ChannelStore.getCurrentExtraInfo().members;
- var creator_name = "";
+ var creatorName = '';
for (var i = 0; i < members.length; i++) {
if (members[i].roles.indexOf('admin') > -1) {
- creator_name = members[i].username;
+ creatorName = members[i].username;
break;
}
}
if (ChannelStore.isDefault(channel)) {
- more_messages = (
- {'This is the start of your private message history with this ' + strings.Team + 'mate. Private messages and files shared here are not shown to people outside this area.'}
-
Beginning of {ui_name}
-- Welcome to {ui_name}! + moreMessages = ( +
+
);
} else if (channel.name === Constants.OFFTOPIC_CHANNEL) {
- more_messages = (
- Beginning of {uiName}
+
+ Welcome to {uiName}!
- {"This is the first channel " + strings.Team + "mates see when they"}
+ {'This is the first channel ' + strings.Team + 'mates see when they'}
sign up - use it for posting updates everyone needs to know.
@@ -384,29 +412,44 @@ module.exports = React.createClass({
-
Beginning of {ui_name}
-- {"This is the start of " + ui_name + ", a channel for non-work-related conversations."} + moreMessages = ( +
+
);
} else {
- var ui_type = channel.type === 'P' ? "private group" : "channel";
- more_messages = (
- Beginning of {uiName}
+
+ {'This is the start of ' + uiName + ', a channel for non-work-related conversations.'}
-
-
-
Beginning of {ui_name}
-- { creator_name != "" ? "This is the start of the " + ui_name + " " + ui_type + ", created by " + creator_name + " on " + utils.displayDate(channel.create_at) + "." - : "This is the start of the " + ui_name + " " + ui_type + ", created on "+ utils.displayDate(channel.create_at) + "." } - { channel.type === 'P' ? " Only invited members can see this private group." : " Any member can join and read this channel." } + var uiType; + var memberMessage; + if (channel.type === 'P') { + uiType = 'private group'; + memberMessage = ' Only invited members can see this private group.'; + } else { + uiType = 'channel'; + memberMessage = ' Any member can join and read this channel.'; + } + + var createMessage; + if (creatorName !== '') { + createMessage = 'This is the start of the ' + uiName + ' ' + uiType + ', created by ' + creatorName + ' on ' + utils.displayDate(channel.create_at) + '.'; + } else { + createMessage = 'This is the start of the ' + uiName + ' ' + uiType + ', created on ' + utils.displayDate(channel.create_at) + '.'; + } + + moreMessages = ( +
+
);
}
@@ -419,17 +462,25 @@ module.exports = React.createClass({
var previousPostDay = new Date(0);
var currentPostDay;
- for (var i = order.length-1; i >= 0; i--) {
+ for (var i = order.length - 1; i >= 0; i--) {
var post = posts[order[i]];
- var parentPost = post.parent_id ? posts[post.parent_id] : null;
+ var parentPost = null;
+ if (post.parent_id) {
+ parentPost = posts[post.parent_id];
+ }
var sameUser = '';
var sameRoot = false;
var hideProfilePic = false;
- var prevPost = (i < order.length - 1) ? posts[order[i + 1]] : null;
+ var prevPost;
+ if (i < order.length - 1) {
+ prevPost = posts[order[i + 1]];
+ }
if (prevPost) {
- sameUser = (prevPost.user_id === post.user_id) && (post.create_at - prevPost.create_at <= 1000*60*5) ? "same--user" : "";
+ if ((prevPost.user_id === post.user_id) && (post.create_at - prevPost.create_at <= 1000 * 60 * 5)) {
+ sameUser = 'same--user';
+ }
sameRoot = utils.isComment(post) && (prevPost.id === post.root_id || prevPost.root_id === post.root_id);
// we only hide the profile pic if the previous post is not a comment, the current post is not a comment, and the previous post was made by the same user as the current post
@@ -438,7 +489,7 @@ module.exports = React.createClass({
// check if it's the last comment in a consecutive string of comments on the same post
// it is the last comment if it is last post in the channel or the next post has a different root post
- var isLastComment = utils.isComment(post) && (i === 0 || posts[order[i-1]].root_id != post.root_id);
+ var isLastComment = utils.isComment(post) && (i === 0 || posts[order[i - 1]].root_id !== post.root_id);
var postCtl = (
Beginning of {uiName}
+
+ {createMessage}
+ {memberMessage}
-
{currentPostDay.toDateString()}
+
+
+
);
}
- if (post.create_at > last_viewed && !rendered_last_viewed) {
- rendered_last_viewed = true;
+ if (post.user_id !== userId && post.create_at > lastViewed && !renderedLastViewed) {
+ renderedLastViewed = true;
postCtls.push(
- +
{currentPostDay.toDateString()}
-
-
-
New Messages
+
+
+
);
}
@@ -469,15 +520,15 @@ module.exports = React.createClass({
previousPostDay = currentPostDay;
}
} else {
- postCtls.push(+
New Messages
-
-
- { more_messages }
- { postCtls }
+
+
diff --git a/web/react/components/post_right.jsx b/web/react/components/post_right.jsx
index e46979ff7c..175e1080da 100644
--- a/web/react/components/post_right.jsx
+++ b/web/react/components/post_right.jsx
@@ -3,15 +3,17 @@
var PostStore = require('../stores/post_store.jsx');
var ChannelStore = require('../stores/channel_store.jsx');
-var UserProfile = require( './user_profile.jsx' );
+var UserProfile = require('./user_profile.jsx');
var UserStore = require('../stores/user_store.jsx');
var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
var utils = require('../utils/utils.jsx');
-var SearchBox =require('./search_bar.jsx');
-var CreateComment = require( './create_comment.jsx' );
+var SearchBox = require('./search_bar.jsx');
+var CreateComment = require('./create_comment.jsx');
var Constants = require('../utils/constants.jsx');
var FileAttachmentList = require('./file_attachment_list.jsx');
var FileUploadOverlay = require('./file_upload_overlay.jsx');
+var client = require('../utils/client.jsx');
+var AsyncClient = require('../utils/async_client.jsx');
var ActionTypes = Constants.ActionTypes;
RhsHeaderPost = React.createClass({
@@ -44,12 +46,15 @@ RhsHeaderPost = React.createClass({
});
},
render: function() {
- var back = this.props.fromSearch ? : "";
+ var back;
+ if (this.props.fromSearch) {
+ back = ;
+ }
return (
-
+
+ {moreMessages}
+ {postCtls}
- {back}Message Details
-
+
+ {back}Message Details
+
);
}
@@ -59,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 }
-
-
+
+
{ channelName }
+
+
-
-
-
-