diff options
Diffstat (limited to 'web/react/components')
-rw-r--r-- | web/react/components/channel_loader.jsx | 17 | ||||
-rw-r--r-- | web/react/components/create_comment.jsx | 41 | ||||
-rw-r--r-- | web/react/components/create_post.jsx | 66 | ||||
-rw-r--r-- | web/react/components/post.jsx | 42 | ||||
-rw-r--r-- | web/react/components/post_body.jsx | 71 | ||||
-rw-r--r-- | web/react/components/post_info.jsx | 85 | ||||
-rw-r--r-- | web/react/components/post_list.jsx | 443 | ||||
-rw-r--r-- | web/react/components/post_right.jsx | 338 |
8 files changed, 685 insertions, 418 deletions
diff --git a/web/react/components/channel_loader.jsx b/web/react/components/channel_loader.jsx index 6b80f6012..525b67b5c 100644 --- a/web/react/components/channel_loader.jsx +++ b/web/react/components/channel_loader.jsx @@ -9,6 +9,7 @@ var BrowserStore = require('../stores/browser_store.jsx'); var AsyncClient = require('../utils/async_client.jsx'); var SocketStore = require('../stores/socket_store.jsx'); var ChannelStore = require('../stores/channel_store.jsx'); +var PostStore = require('../stores/post_store.jsx'); var Constants = require('../utils/constants.jsx'); module.exports = React.createClass({ @@ -24,20 +25,24 @@ module.exports = React.createClass({ AsyncClient.getMyTeam(); /* End of async loads */ + /* Perform pending post clean-up */ + PostStore.clearPendingPosts(); + /* End pending post clean-up */ /* Start interval functions */ - setInterval(function(){AsyncClient.getStatuses();}, 30000); + setInterval( + function pollStatuses() { + AsyncClient.getStatuses(); + }, 30000); /* End interval functions */ - /* Start device tracking setup */ - var iOS = /(iPad|iPhone|iPod)/g.test( navigator.userAgent ); + var iOS = (/(iPad|iPhone|iPod)/g).test(navigator.userAgent); if (iOS) { - $("body").addClass("ios"); + $('body').addClass('ios'); } /* End device tracking setup */ - /* Start window active tracking setup */ window.isActive = true; @@ -57,7 +62,7 @@ module.exports = React.createClass({ }, _onSocketChange: function(msg) { if (msg && msg.user_id) { - UserStore.setStatus(msg.user_id, "online"); + UserStore.setStatus(msg.user_id, 'online'); } }, render: function() { diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx index 885efab7a..1de768872 100644 --- a/web/react/components/create_comment.jsx +++ b/web/react/components/create_comment.jsx @@ -1,17 +1,20 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. +var AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); var client = require('../utils/client.jsx'); -var AsyncClient =require('../utils/async_client.jsx'); +var AsyncClient = require('../utils/async_client.jsx'); var SocketStore = require('../stores/socket_store.jsx'); var ChannelStore = require('../stores/channel_store.jsx'); +var UserStore = require('../stores/user_store.jsx'); var PostStore = require('../stores/post_store.jsx'); var Textbox = require('./textbox.jsx'); var MsgTyping = require('./msg_typing.jsx'); var FileUpload = require('./file_upload.jsx'); var FilePreview = require('./file_preview.jsx'); - +var utils = require('../utils/utils.jsx'); var Constants = require('../utils/constants.jsx'); +var ActionTypes = Constants.ActionTypes; module.exports = React.createClass({ lastTime: 0, @@ -26,6 +29,8 @@ module.exports = React.createClass({ return; } + this.setState({submitting: true, serverError: null}); + var post = {}; post.filenames = []; post.message = this.state.messageText; @@ -39,18 +44,23 @@ module.exports = React.createClass({ return; } + var user_id = UserStore.getCurrentId(); + post.channel_id = this.props.channelId; post.root_id = this.props.rootId; - post.parent_id = this.props.parentId; + post.parent_id = this.props.rootId; post.filenames = this.state.previews; + var time = utils.getTimestamp(); + post.pending_post_id = user_id + ':'+ time; + post.user_id = user_id; + post.create_at = time; - this.setState({submitting: true, serverError: null}); + PostStore.storePendingPost(post); + PostStore.storeCommentDraft(this.props.rootId, null); + this.setState({messageText: '', submitting: false, postError: null, previews: [], serverError: null}); client.createPost(post, ChannelStore.getCurrent(), function(data) { - PostStore.storeCommentDraft(this.props.rootId, null); - this.setState({messageText: '', submitting: false, postError: null, serverError: null}); - this.clearPreviews(); AsyncClient.getPosts(true, this.props.channelId); var channel = ChannelStore.get(this.props.channelId); @@ -58,19 +68,27 @@ module.exports = React.createClass({ member.msg_count = channel.total_msg_count; member.last_viewed_at = Date.now(); ChannelStore.setChannelMember(member); + + AppDispatcher.handleServerAction({ + type: ActionTypes.RECIEVED_POST, + post: data + }); }.bind(this), function(err) { var state = {}; - state.serverError = err.message; - state.submitting = false; if (err.message === 'Invalid RootId parameter') { if ($('#post_deleted').length > 0) { $('#post_deleted').modal('show'); } + PostStore.removePendingPost(post.pending_post_id); } else { - this.setState(state); + post.state = Constants.POST_FAILED; + PostStore.updatePendingPost(post); } + + state.submitting = false; + this.setState(state); }.bind(this) ); }, @@ -137,9 +155,6 @@ module.exports = React.createClass({ this.setState({serverError: err}); } }, - clearPreviews: function() { - this.setState({previews: []}); - }, removePreview: function(id) { var previews = this.state.previews; var uploadsInProgress = this.state.uploadsInProgress; diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx index 377e7bd34..3714560ea 100644 --- a/web/react/components/create_post.jsx +++ b/web/react/components/create_post.jsx @@ -65,22 +65,47 @@ module.exports = React.createClass({ post.channel_id = this.state.channelId; post.filenames = this.state.previews; - client.createPost(post, ChannelStore.getCurrent(), + var time = utils.getTimestamp(); + var userId = UserStore.getCurrentId(); + post.pending_post_id = userId + ':' + time; + post.user_id = userId; + post.create_at = time; + post.root_id = this.state.rootId; + post.parent_id = this.state.parentId; + + var channel = ChannelStore.get(this.state.channelId); + + PostStore.storePendingPost(post); + PostStore.storeDraft(channel.id, null); + this.setState({messageText: '', submitting: false, postError: null, previews: [], serverError: null}); + + client.createPost(post, channel, function(data) { - PostStore.storeDraft(data.channel_id, null); - this.setState({messageText: '', submitting: false, postError: null, previews: [], serverError: null}); this.resizePostHolder(); AsyncClient.getPosts(true); - var channel = ChannelStore.get(this.state.channelId); - var member = ChannelStore.getMember(this.state.channelId); + var member = ChannelStore.getMember(channel.id); member.msg_count = channel.total_msg_count; member.last_viewed_at = Date.now(); ChannelStore.setChannelMember(member); + + AppDispatcher.handleServerAction({ + type: ActionTypes.RECIEVED_POST, + post: data + }); }.bind(this), function(err) { var state = {}; - state.serverError = err.message; + + if (err.message === 'Invalid RootId parameter') { + if ($('#post_deleted').length > 0) { + $('#post_deleted').modal('show'); + } + PostStore.removePendingPost(post.pending_post_id); + } else { + post.state = Constants.POST_FAILED; + PostStore.updatePendingPost(post); + } state.submitting = false; this.setState(state); @@ -195,20 +220,33 @@ module.exports = React.createClass({ var channelId = ChannelStore.getCurrentId(); if (this.state.channelId !== channelId) { var draft = PostStore.getCurrentDraft(); - this.setState({ - channelId: channelId, messageText: draft['message'], initialText: draft['message'], submitting: false, - serverError: null, postError: null, previews: draft['previews'], uploadsInProgress: draft['uploadsInProgress'] - }); + + var previews = []; + var messageText = ''; + var uploadsInProgress = 0; + if (draft && draft.previews && draft.message) { + previews = draft.previews; + messageText = draft.message; + uploadsInProgress = draft.uploadsInProgress; + } + + this.setState({channelId: channelId, messageText: messageText, initialText: messageText, submitting: false, serverError: null, postError: null, previews: previews, uploadsInProgress: uploadsInProgress}); } }, getInitialState: function() { PostStore.clearDraftUploads(); var draft = PostStore.getCurrentDraft(); - return { - channelId: ChannelStore.getCurrentId(), messageText: draft['message'], uploadsInProgress: draft['uploadsInProgress'], - previews: draft['previews'], submitting: false, initialText: draft['message'] - }; + var previews = []; + var messageText = ''; + var uploadsInProgress = 0; + if (draft && draft.previews && draft.message) { + previews = draft.previews; + messageText = draft.message; + uploadsInProgress = draft.uploadsInProgress; + } + + return {channelId: ChannelStore.getCurrentId(), messageText: messageText, uploadsInProgress: uploadsInProgress, previews: previews, submitting: false, initialText: messageText}; }, getFileCount: function(channelId) { if (channelId === this.state.channelId) { diff --git a/web/react/components/post.jsx b/web/react/components/post.jsx index f099c67ab..b798dc7ca 100644 --- a/web/react/components/post.jsx +++ b/web/react/components/post.jsx @@ -7,6 +7,10 @@ var PostInfo = require('./post_info.jsx'); var AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); var Constants = require('../utils/constants.jsx'); var UserStore = require('../stores/user_store.jsx'); +var PostStore = require('../stores/post_store.jsx'); +var ChannelStore = require('../stores/channel_store.jsx'); +var client = require('../utils/client.jsx'); +var AsyncClient = require('../utils/async_client.jsx'); var ActionTypes = Constants.ActionTypes; module.exports = React.createClass({ @@ -32,6 +36,36 @@ module.exports = React.createClass({ this.refs.info.forceUpdate(); this.refs.header.forceUpdate(); }, + retryPost: function(e) { + e.preventDefault(); + + var post = this.props.post; + client.createPost(post, post.channel_id, + function(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(err) { + post.state = Constants.POST_FAILED; + PostStore.updatePendingPost(post); + this.forceUpdate(); + }.bind(this) + ); + + post.state = Constants.POST_LOADING; + PostStore.updatePendingPost(post); + this.forceUpdate(); + }, getInitialState: function() { return { }; }, @@ -40,9 +74,9 @@ module.exports = React.createClass({ var parentPost = this.props.parentPost; var posts = this.props.posts; - 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 commentCount = 0; @@ -79,7 +113,7 @@ module.exports = React.createClass({ : null } <div className="post__content"> <PostHeader ref="header" post={post} sameRoot={this.props.sameRoot} commentCount={commentCount} handleCommentClick={this.handleCommentClick} isLastComment={this.props.isLastComment} /> - <PostBody post={post} sameRoot={this.props.sameRoot} parentPost={parentPost} posts={posts} handleCommentClick={this.handleCommentClick} /> + <PostBody post={post} sameRoot={this.props.sameRoot} parentPost={parentPost} posts={posts} handleCommentClick={this.handleCommentClick} retryPost={this.retryPost} /> <PostInfo ref="info" post={post} sameRoot={this.props.sameRoot} commentCount={commentCount} handleCommentClick={this.handleCommentClick} allowReply="true" /> </div> </div> diff --git a/web/react/components/post_body.jsx b/web/react/components/post_body.jsx index 860c96d84..e5ab5b624 100644 --- a/web/react/components/post_body.jsx +++ b/web/react/components/post_body.jsx @@ -4,15 +4,16 @@ var FileAttachmentList = require('./file_attachment_list.jsx'); var UserStore = require('../stores/user_store.jsx'); var utils = require('../utils/utils.jsx'); +var Constants = require('../utils/constants.jsx'); module.exports = React.createClass({ componentWillReceiveProps: function(nextProps) { var linkData = utils.extractLinks(nextProps.post.message); - this.setState({ links: linkData["links"], message: linkData["text"] }); + this.setState({links: linkData.links, message: linkData.text}); }, getInitialState: function() { var linkData = utils.extractLinks(this.props.post.message); - return { links: linkData["links"], message: linkData["text"] }; + return {links: linkData.links, message: linkData.text}; }, render: function() { var post = this.props.post; @@ -20,43 +21,52 @@ module.exports = React.createClass({ var parentPost = this.props.parentPost; var inner = utils.textToJsx(this.state.message); - var comment = ""; - var reply = ""; - var postClass = ""; + var comment = ''; + var reply = ''; + var postClass = ''; if (parentPost) { var profile = UserStore.getProfile(parentPost.user_id); - var apostrophe = ""; - var name = "..."; + var apostrophe = ''; + var name = '...'; if (profile != null) { if (profile.username.slice(-1) === 's') { - apostrophe = "'"; + apostrophe = '\''; } else { - apostrophe = "'s"; + apostrophe = '\'s'; } - name = <a className="theme" onClick={function(){ utils.searchForTerm(profile.username); }}>{profile.username}</a>; + name = <a className='theme' onClick={function searchName() { utils.searchForTerm(profile.username); }}>{profile.username}</a>; } - var message = "" - if(parentPost.message) { - message = utils.replaceHtmlEntities(parentPost.message) + var message = ''; + if (parentPost.message) { + message = utils.replaceHtmlEntities(parentPost.message); } else if (parentPost.filenames.length) { message = parentPost.filenames[0].split('/').pop(); if (parentPost.filenames.length === 2) { - message += " plus 1 other file"; + message += ' plus 1 other file'; } else if (parentPost.filenames.length > 2) { - message += " plus " + (parentPost.filenames.length - 1) + " other files"; + message += ' plus ' + (parentPost.filenames.length - 1) + ' other files'; } } comment = ( - <p className="post-link"> - <span>Commented on {name}{apostrophe} message: <a className="theme" onClick={this.props.handleCommentClick}>{message}</a></span> + <p className='post-link'> + <span>Commented on {name}{apostrophe} message: <a className='theme' onClick={this.props.handleCommentClick}>{message}</a></span> </p> ); - postClass += " post-comment"; + postClass += ' post-comment'; + } + + var loading; + if (post.state === Constants.POST_FAILED) { + postClass += ' post-fail'; + loading = <a className='theme post-retry pull-right' href='#' onClick={this.props.retryPost}>Retry</a>; + } else if (post.state === Constants.POST_LOADING) { + postClass += ' post-waiting'; + loading = <img className='post-loading-gif pull-right' src='/static/images/load.gif'/>; } var embed; @@ -64,18 +74,21 @@ module.exports = React.createClass({ embed = utils.getEmbed(this.state.links[0]); } + var fileAttachmentHolder = ''; + if (filenames && filenames.length > 0) { + fileAttachmentHolder = (<FileAttachmentList + filenames={filenames} + modalId={'view_image_modal_' + post.id} + channelId={post.channel_id} + userId={post.user_id} />); + } + return ( - <div className="post-body"> - { comment } - <p key={post.id+"_message"} className={postClass}><span>{inner}</span></p> - { filenames && filenames.length > 0 ? - <FileAttachmentList - filenames={filenames} - modalId={"view_image_modal_" + post.id} - channelId={post.channel_id} - userId={post.user_id} /> - : "" } - { embed } + <div className='post-body'> + {comment} + <p key={post.id + '_message'} className={postClass}>{loading}<span>{inner}</span></p> + {fileAttachmentHolder} + {embed} </div> ); } diff --git a/web/react/components/post_info.jsx b/web/react/components/post_info.jsx index 8eaaf4e8c..f6ab0ed8a 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 = <a href="#" className={"comment-icon__container theme" + lastCommentClass} onClick={this.props.handleCommentClick}><span className="comment-icon" dangerouslySetInnerHTML={{__html: Constants.COMMENT_ICON }} />{this.props.commentCount}</a>; + 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 = <a href='#' className={'comment-icon__container theme' + lastCommentClass} onClick={this.props.handleCommentClick}><span className='comment-icon' dangerouslySetInnerHTML={{__html: Constants.COMMENT_ICON}} />{this.props.commentCount}</a>; + } + + 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(<li role='presentation'><a href='#' role='menuitem' data-toggle='modal' data-target='#edit_post' data-title={type} data-message={post.message} data-postid={post.id} data-channelid={post.channel_id} data-comments={dataComments}>Edit</a></li>); + } + + if (isOwner || isAdmin) { + dropdownContents.push(<li role='presentation'><a href='#' role='menuitem' data-toggle='modal' data-target='#delete_post' data-title={type} data-postid={post.id} data-channelid={post.channel_id} data-comments={dataComments}>Delete</a></li>); + } + + if (this.props.allowReply === 'true') { + dropdownContents.push(<li role='presentation'><a className='reply-link theme' href='#' onClick={this.props.handleCommentClick}>Reply</a></li>); + } + + dropdown = ( + <div> + <a href='#' className='dropdown-toggle theme' type='button' data-toggle='dropdown' aria-expanded='false' /> + <ul className='dropdown-menu' role='menu'> + {dropdownContents} + </ul> + </div> + ); } return ( - <ul className="post-header post-info"> - <li className="post-header-col"><time className="post-profile-time">{ utils.displayDateTime(post.create_at) }</time></li> - <li className="post-header-col post-header__reply"> - <div className="dropdown"> - { isOwner || (this.props.allowReply === "true" && type != "Comment") ? - <div> - <a href="#" className="dropdown-toggle theme" type="button" data-toggle="dropdown" aria-expanded="false" /> - <ul className="dropdown-menu" role="menu"> - { isOwner ? <li role="presentation"><a href="#" role="menuitem" data-toggle="modal" data-target="#edit_post" data-title={type} data-message={post.message} data-postid={post.id} data-channelid={post.channel_id} data-comments={type === "Post" ? this.props.commentCount : 0}>Edit</a></li> - : "" } - { isOwner || isAdmin ? <li role="presentation"><a href="#" role="menuitem" data-toggle="modal" data-target="#delete_post" data-title={type} data-postid={post.id} data-channelid={post.channel_id} data-comments={type === "Post" ? this.props.commentCount : 0}>Delete</a></li> - : "" } - { this.props.allowReply === "true" ? <li role="presentation"><a className="reply-link theme" href="#" onClick={this.props.handleCommentClick}>Reply</a></li> - : "" } - </ul> - </div> - : "" } - </div> - { comments } - </li> + <ul className='post-header post-info'> + <li className='post-header-col'><time className='post-profile-time'>{utils.displayDateTime(post.create_at)}</time></li> + <li className='post-header-col post-header__reply'> + <div className='dropdown'> + {dropdown} + </div> + {comments} + </li> </ul> ); } diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index 8c76eb82c..c210853ac 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -4,7 +4,7 @@ var PostStore = require('../stores/post_store.jsx'); var ChannelStore = require('../stores/channel_store.jsx'); var UserStore = require('../stores/user_store.jsx'); -var UserProfile = require( './user_profile.jsx' ); +var UserProfile = require('./user_profile.jsx'); var AsyncClient = require('../utils/async_client.jsx'); var Post = require('./post.jsx'); var LoadingScreen = require('./loading_screen.jsx'); @@ -18,16 +18,28 @@ var ActionTypes = Constants.ActionTypes; function getStateFromStores() { var channel = ChannelStore.getCurrent(); - if (channel == null) channel = {}; + if (channel == null) { + channel = {}; + } + + var postList = PostStore.getCurrentPosts(); + var pendingPostList = PostStore.getPendingPosts(channel.id); + + if (pendingPostList) { + postList.order = pendingPostList.order.concat(postList.order); + for (var pid in pendingPostList.posts) { + postList.posts[pid] = pendingPostList.posts[pid]; + } + } return { - post_list: PostStore.getCurrentPosts(), + postList: postList, channel: channel }; } module.exports = React.createClass({ - displayName: "PostList", + displayName: 'PostList', scrollPosition: 0, preventScrollTrigger: false, gotMorePosts: false, @@ -37,74 +49,75 @@ module.exports = React.createClass({ componentDidMount: function() { var user = UserStore.getCurrentUser(); if (user.props && user.props.theme) { - utils.changeCss('div.theme', 'background-color:'+user.props.theme+';'); - utils.changeCss('.btn.btn-primary', 'background: ' + user.props.theme+';'); - utils.changeCss('.modal .modal-header', 'background: ' + user.props.theme+';'); - utils.changeCss('.mention', 'background: ' + user.props.theme+';'); - utils.changeCss('.mention-link', 'color: ' + user.props.theme+';'); - utils.changeCss('.mention-link', 'color: ' + user.props.theme+';'); - utils.changeCss('.mention-link', 'color: ' + user.props.theme+';'); - utils.changeCss('.search-item-container:hover', 'background: ' + utils.changeOpacity(user.props.theme, 0.05) +';'); - utils.changeCss('@media(max-width: 768px){.search-bar__container', 'background: ' + user.props.theme+';}'); + utils.changeCss('div.theme', 'background-color:' + user.props.theme + ';'); + utils.changeCss('.btn.btn-primary', 'background: ' + user.props.theme + ';'); + utils.changeCss('.modal .modal-header', 'background: ' + user.props.theme + ';'); + utils.changeCss('.mention', 'background: ' + user.props.theme + ';'); + utils.changeCss('.mention-link', 'color: ' + user.props.theme + ';'); + utils.changeCss('@media(max-width: 768px){.search-bar__container', 'background: ' + user.props.theme + ';}'); + utils.changeCss('.search-item-container:hover', 'background: ' + utils.changeOpacity(user.props.theme, 0.05) + ';'); } - if (user.props.theme != '#000000' && user.props.theme != '#585858') { - utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, -10) +';'); - utils.changeCss('a.theme', 'color:'+user.props.theme+'; fill:'+user.props.theme+'!important;'); - } else if (user.props.theme == '#000000') { - utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, +50) +';'); + + if (user.props.theme !== '#000000' && user.props.theme !== '#585858') { + utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, -10) + ';'); + utils.changeCss('a.theme', 'color:' + user.props.theme + '; fill:' + user.props.theme + '!important;'); + } else if (user.props.theme === '#000000') { + utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, +50) + ';'); $('.team__header').addClass('theme--black'); - } else if (user.props.theme == '#585858') { - utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, +10) +';'); + } else if (user.props.theme === '#585858') { + utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, +10) + ';'); $('.team__header').addClass('theme--gray'); } - PostStore.addChangeListener(this._onChange); - ChannelStore.addChangeListener(this._onChange); - UserStore.addStatusesChangeListener(this._onTimeChange); - SocketStore.addChangeListener(this._onSocketChange); + PostStore.addChangeListener(this.onChange); + ChannelStore.addChangeListener(this.onChange); + UserStore.addStatusesChangeListener(this.onTimeChange); + SocketStore.addChangeListener(this.onSocketChange); - $(".post-list-holder-by-time").perfectScrollbar(); + $('.post-list-holder-by-time').perfectScrollbar(); this.resize(); - var post_holder = $(".post-list-holder-by-time")[0]; - this.scrollPosition = $(post_holder).scrollTop() + $(post_holder).innerHeight(); - this.oldScrollHeight = post_holder.scrollHeight; + var postHolder = $('.post-list-holder-by-time')[0]; + this.scrollPosition = $(postHolder).scrollTop() + $(postHolder).innerHeight(); + this.oldScrollHeight = postHolder.scrollHeight; this.oldZoom = (window.outerWidth - 8) / window.innerWidth; - $('.modal').on('show.bs.modal', function () { + $('.modal').on('show.bs.modal', function onShow() { $('.modal-body').css('overflow-y', 'auto'); $('.modal-body').css('max-height', $(window).height() * 0.7); }); // Timeout exists for the DOM to fully render before making changes var self = this; - $(window).resize(function(){ - $(post_holder).perfectScrollbar('update'); + $(window).resize(function resize() { + $(postHolder).perfectScrollbar('update'); // this only kind of works, detecting zoom in browsers is a nightmare var newZoom = (window.outerWidth - 8) / window.innerWidth; - if (self.scrollPosition >= post_holder.scrollHeight || (self.oldScrollHeight != post_holder.scrollHeight && self.scrollPosition >= self.oldScrollHeight) || self.oldZoom != newZoom) self.resize(); + if (self.scrollPosition >= postHolder.scrollHeight || (self.oldScrollHeight !== postHolder.scrollHeight && self.scrollPosition >= self.oldScrollHeight) || self.oldZoom !== newZoom) { + self.resize(); + } self.oldZoom = newZoom; if ($('#create_post').length > 0) { var height = $(window).height() - $('#create_post').height() - $('#error_bar').outerHeight() - 50; - $(".post-list-holder-by-time").css("height", height + "px"); + $('.post-list-holder-by-time').css('height', height + 'px'); } }); - $(post_holder).scroll(function(e){ + $(postHolder).scroll(function scroll() { if (!self.preventScrollTrigger) { - self.scrollPosition = $(post_holder).scrollTop() + $(post_holder).innerHeight(); + self.scrollPosition = $(postHolder).scrollTop() + $(postHolder).innerHeight(); } self.preventScrollTrigger = false; }); - $('body').on('click.userpopover', function(e){ - if ($(e.target).attr('data-toggle') !== 'popover' - && $(e.target).parents('.popover.in').length === 0) { + $('body').on('click.userpopover', function popOver(e) { + if ($(e.target).attr('data-toggle') !== 'popover' && + $(e.target).parents('.popover.in').length === 0) { $('.user-popover').popover('hide'); } }); @@ -112,67 +125,62 @@ module.exports = React.createClass({ $('.post-list__content div .post').removeClass('post--last'); $('.post-list__content div:last-child .post').addClass('post--last'); - $('body').on('mouseenter mouseleave', '.post', function(ev){ - if(ev.type === 'mouseenter'){ + $('body').on('mouseenter mouseleave', '.post', function mouseOver(ev) { + if (ev.type === 'mouseenter') { $(this).parent('div').prev('.date-separator, .new-separator').addClass('hovered--after'); $(this).parent('div').next('.date-separator, .new-separator').addClass('hovered--before'); - } - else { + } else { $(this).parent('div').prev('.date-separator, .new-separator').removeClass('hovered--after'); $(this).parent('div').next('.date-separator, .new-separator').removeClass('hovered--before'); } }); - $('body').on('mouseenter mouseleave', '.post.post--comment.same--root', function(ev){ - if(ev.type === 'mouseenter'){ + $('body').on('mouseenter mouseleave', '.post.post--comment.same--root', function mouseOver(ev) { + if (ev.type === 'mouseenter') { $(this).parent('div').prev('.date-separator, .new-separator').addClass('hovered--comment'); $(this).parent('div').next('.date-separator, .new-separator').addClass('hovered--comment'); - } - else { + } else { $(this).parent('div').prev('.date-separator, .new-separator').removeClass('hovered--comment'); $(this).parent('div').next('.date-separator, .new-separator').removeClass('hovered--comment'); } }); - }, componentDidUpdate: function() { this.resize(); - var post_holder = $(".post-list-holder-by-time")[0]; - this.scrollPosition = $(post_holder).scrollTop() + $(post_holder).innerHeight(); - this.oldScrollHeight = post_holder.scrollHeight; + var postHolder = $('.post-list-holder-by-time')[0]; + this.scrollPosition = $(postHolder).scrollTop() + $(postHolder).innerHeight(); + this.oldScrollHeight = postHolder.scrollHeight; $('.post-list__content div .post').removeClass('post--last'); $('.post-list__content div:last-child .post').addClass('post--last'); }, componentWillUnmount: function() { - PostStore.removeChangeListener(this._onChange); - ChannelStore.removeChangeListener(this._onChange); - UserStore.removeStatusesChangeListener(this._onTimeChange); - SocketStore.removeChangeListener(this._onSocketChange); + PostStore.removeChangeListener(this.onChange); + ChannelStore.removeChangeListener(this.onChange); + UserStore.removeStatusesChangeListener(this.onTimeChange); + SocketStore.removeChangeListener(this.onSocketChange); $('body').off('click.userpopover'); - $('.modal').off('show.bs.modal') + $('.modal').off('show.bs.modal'); }, resize: function() { - var post_holder = $(".post-list-holder-by-time")[0]; + var postHolder = $('.post-list-holder-by-time')[0]; this.preventScrollTrigger = true; if (this.gotMorePosts) { this.gotMorePosts = false; - $(post_holder).scrollTop($(post_holder).scrollTop() + (post_holder.scrollHeight-this.oldScrollHeight) ); + $(postHolder).scrollTop($(postHolder).scrollTop() + (postHolder.scrollHeight - this.oldScrollHeight)); + } else if ($('#new_message')[0] && !this.scrolledToNew) { + $(postHolder).scrollTop($(postHolder).scrollTop() + $('#new_message').offset().top - 63); + this.scrolledToNew = true; } else { - if ($("#new_message")[0] && !this.scrolledToNew) { - $(post_holder).scrollTop($(post_holder).scrollTop() + $("#new_message").offset().top - 63); - this.scrolledToNew = true; - } else { - $(post_holder).scrollTop(post_holder.scrollHeight); - } + $(postHolder).scrollTop(postHolder.scrollHeight); } - $(post_holder).perfectScrollbar('update'); + $(postHolder).perfectScrollbar('update'); }, - _onChange: function() { + onChange: function() { var newState = getStateFromStores(); if (!utils.areStatesEqual(newState, this.state)) { - if (this.state.post_list && this.state.post_list.order) { - if (this.state.channel.id === newState.channel.id && this.state.post_list.order.length != newState.post_list.order.length && newState.post_list.order.length > Constants.POST_CHUNK_SIZE) { + if (this.state.postList && this.state.postList.order) { + if (this.state.channel.id === newState.channel.id && this.state.postList.order.length !== newState.postList.order.length && newState.postList.order.length > Constants.POST_CHUNK_SIZE) { this.gotMorePosts = true; } } @@ -182,112 +190,127 @@ module.exports = React.createClass({ this.setState(newState); } }, - _onSocketChange: function(msg) { - if (msg.action == "posted") { - var post = JSON.parse(msg.props.post); - - var post_list = PostStore.getPosts(msg.channel_id); - if (!post_list) return; - - post_list.posts[post.id] = post; - if (post_list.order.indexOf(post.id) === -1) { - post_list.order.unshift(post.id); + onSocketChange: function(msg) { + var postList; + var post; + if (msg.action === 'posted') { + post = JSON.parse(msg.props.post); + PostStore.storePost(post); + } else if (msg.action === 'post_edited') { + if (this.state.channel.id === msg.channel_id) { + this.setState({postList: postList}); } + PostStore.storePosts(post.channel_id, postList); + } else if (msg.action === 'post_edited') { if (this.state.channel.id === msg.channel_id) { - this.setState({ post_list: post_list }); - }; - - PostStore.storePosts(post.channel_id, post_list); - } else if (msg.action == "post_edited") { - if (this.state.channel.id == msg.channel_id) { - var post_list = this.state.post_list; - if (!(msg.props.post_id in post_list.posts)) return; + postList = this.state.postList; + if (!(msg.props.post_id in postList.posts)) { + return; + } - var post = post_list.posts[msg.props.post_id]; + post = postList.posts[msg.props.post_id]; post.message = msg.props.message; - post_list.posts[post.id] = post; - this.setState({ post_list: post_list }); + postList.posts[post.id] = post; + this.setState({postList: postList}); - PostStore.storePosts(msg.channel_id, post_list); + PostStore.storePosts(msg.channel_id, postList); } else { AsyncClient.getPosts(true, msg.channel_id); } - } else if (msg.action == "post_deleted") { + } else if (msg.action === 'post_deleted') { var activeRoot = $(document.activeElement).closest('.comment-create-body')[0]; - var activeRootPostId = activeRoot && activeRoot.id.length > 0 ? activeRoot.id : ""; + var activeRootPostId = ''; + if (activeRoot && activeRoot.id.length > 0) { + activeRootPostId = activeRoot.id; + } - if (this.state.channel.id == msg.channel_id) { - var post_list = this.state.post_list; - if (!(msg.props.post_id in this.state.post_list.posts)) return; + if (this.state.channel.id === msg.channel_id) { + postList = this.state.postList; + if (!(msg.props.post_id in this.state.postList.posts)) { + return; + } - delete post_list.posts[msg.props.post_id]; - var index = post_list.order.indexOf(msg.props.post_id); - if (index > -1) post_list.order.splice(index, 1); + delete postList.posts[msg.props.post_id]; + var index = postList.order.indexOf(msg.props.post_id); + if (index > -1) { + postList.order.splice(index, 1); + } - this.setState({ post_list: post_list }); + this.setState({postList: postList}); - PostStore.storePosts(msg.channel_id, post_list); + PostStore.storePosts(msg.channel_id, postList); } else { AsyncClient.getPosts(true, msg.channel_id); } - if (activeRootPostId === msg.props.post_id && UserStore.getCurrentId() != msg.user_id) { + if (activeRootPostId === msg.props.post_id && UserStore.getCurrentId() !== msg.user_id) { $('#post_deleted').modal('show'); } - } else if (msg.action == "new_user") { + } else if (msg.action === 'new_user') { AsyncClient.getProfiles(); } }, - _onTimeChange: function() { - if (!this.state.post_list) return; - for (var id in this.state.post_list.posts) { - if (!this.refs[id]) continue; + onTimeChange: function() { + if (!this.state.postList) { + return; + } + + for (var id in this.state.postList.posts) { + if (!this.refs[id]) { + continue; + } this.refs[id].forceUpdateInfo(); } }, getMorePosts: function(e) { e.preventDefault(); - if (!this.state.post_list) return; + if (!this.state.postList) { + return; + } - var posts = this.state.post_list.posts; - var order = this.state.post_list.order; - var channel_id = this.state.channel.id; + var posts = this.state.postList.posts; + var order = this.state.postList.order; + var channelId = this.state.channel.id; - $(this.refs.loadmore.getDOMNode()).text("Retrieving more messages..."); + $(this.refs.loadmore.getDOMNode()).text('Retrieving more messages...'); var self = this; - var currentPos = $(".post-list").scrollTop; + var currentPos = $('.post-list').scrollTop; Client.getPosts( - channel_id, + channelId, order.length, Constants.POST_CHUNK_SIZE, - function(data) { - $(self.refs.loadmore.getDOMNode()).text("Load more messages"); + function success(data) { + $(self.refs.loadmore.getDOMNode()).text('Load more messages'); - if (!data) return; + if (!data) { + return; + } - if (data.order.length === 0) return; + if (data.order.length === 0) { + return; + } - var post_list = {} - post_list.posts = $.extend(posts, data.posts); - post_list.order = order.concat(data.order); + var postList = {}; + postList.posts = $.extend(posts, data.posts); + postList.order = order.concat(data.order); AppDispatcher.handleServerAction({ type: ActionTypes.RECIEVED_POSTS, - id: channel_id, - post_list: post_list + id: channelId, + postList: postList }); Client.getProfiles(); - $(".post-list").scrollTop(currentPos); + $('.post-list').scrollTop(currentPos); }, - function(err) { - $(self.refs.loadmore.getDOMNode()).text("Load more messages"); - AsyncClient.dispatchError(err, "getPosts"); + function fail(err) { + $(self.refs.loadmore.getDOMNode()).text('Load more messages'); + AsyncClient.dispatchError(err, 'getPosts'); } ); }, @@ -298,81 +321,86 @@ module.exports = React.createClass({ var order = []; var posts; - var last_viewed = Number.MAX_VALUE; + var lastViewed = Number.MAX_VALUE; - if (ChannelStore.getCurrentMember() != null) - last_viewed = ChannelStore.getCurrentMember().last_viewed_at; + if (ChannelStore.getCurrentMember() != null) { + lastViewed = ChannelStore.getCurrentMember().lastViewed_at; + } - if (this.state.post_list != null) { - posts = this.state.post_list.posts; - order = this.state.post_list.order; + if (this.state.postList != null) { + posts = this.state.postList.posts; + order = this.state.postList.order; } - var rendered_last_viewed = false; + var renderedLastViewed = false; - var user_id = ""; + var userId = ''; if (UserStore.getCurrentId()) { - user_id = UserStore.getCurrentId(); + userId = UserStore.getCurrentId(); } else { return <div/>; } var channel = this.state.channel; - var more_messages = <p className="beginning-messages-text">Beginning of Channel</p>; + var moreMessages = <p className='beginning-messages-text'>Beginning of Channel</p>; - 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 = <a ref="loadmore" className="more-messages-text theme" href="#" onClick={this.getMorePosts}>Load more messages</a>; + moreMessages = <a ref='loadmore' className='more-messages-text theme' href='#' onClick={this.getMorePosts}>Load more messages</a>; } 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 = ( - <div className="channel-intro"> - <div className="post-profile-img__container channel-intro-img"> - <img className="post-profile-img" src={"/api/v1/users/" + teammate.id + "/image?time=" + teammate.update_at} height="50" width="50" /> + var teammateName = teammate.username; + if (teammate.nickname.length > 0) { + teammateName = teammate.nickname; + } + + moreMessages = ( + <div className='channel-intro'> + <div className='post-profile-img__container channel-intro-img'> + <img className='post-profile-img' src={'/api/v1/users/' + teammate.id + '/image?time=' + teammate.update_at} height='50' width='50' /> </div> - <div className="channel-intro-profile"> + <div className='channel-intro-profile'> <strong><UserProfile userId={teammate.id} /></strong> </div> - <p className="channel-intro-text"> - {"This is the start of your private message history with " + teammate_name + "." }<br/> - {"Private messages and files shared here are not shown to people outside this area."} + <p className='channel-intro-text'> + {'This is the start of your private message history with ' + teammateName + '.'}<br/> + {'Private messages and files shared here are not shown to people outside this area.'} </p> - <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}><i className="fa fa-pencil"></i>Set a description</a> + <a className='intro-links' href='#' style={userStyle} data-toggle='modal' data-target='#edit_channel' data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}><i className='fa fa-pencil'></i>Set a description</a> </div> ); } else { - more_messages = ( - <div className="channel-intro"> - <p className="channel-intro-text">{"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."}</p> + moreMessages = ( + <div className='channel-intro'> + <p className='channel-intro-text'>{'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.'}</p> </div> ); } } 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 = ( - <div className="channel-intro"> - <h4 className="channel-intro__title">Beginning of {ui_name}</h4> - <p className="channel-intro__content"> - Welcome to {ui_name}! + moreMessages = ( + <div className='channel-intro'> + <h4 className='channel-intro__title'>Beginning of {uiName}</h4> + <p className='channel-intro__content'> + Welcome to {uiName}! <br/><br/> - {"This is the first channel " + strings.Team + "mates see when they"} + {'This is the first channel ' + strings.Team + 'mates see when they'} <br/> sign up - use it for posting updates everyone needs to know. <br/><br/> @@ -384,29 +412,44 @@ module.exports = React.createClass({ </div> ); } else if (channel.name === Constants.OFFTOPIC_CHANNEL) { - more_messages = ( - <div className="channel-intro"> - <h4 className="channel-intro__title">Beginning of {ui_name}</h4> - <p className="channel-intro__content"> - {"This is the start of " + ui_name + ", a channel for non-work-related conversations."} + moreMessages = ( + <div className='channel-intro'> + <h4 className='channel-intro__title'>Beginning of {uiName}</h4> + <p className='channel-intro__content'> + {'This is the start of ' + uiName + ', a channel for non-work-related conversations.'} <br/> </p> - <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={ui_name} data-channelid={channel.id}><i className="fa fa-pencil"></i>Set a description</a> + <a className='intro-links' href='#' style={userStyle} data-toggle='modal' data-target='#edit_channel' data-desc={channel.description} data-title={uiName} data-channelid={channel.id}><i className='fa fa-pencil'></i>Set a description</a> </div> ); } else { - var ui_type = channel.type === 'P' ? "private group" : "channel"; - more_messages = ( - <div className="channel-intro"> - <h4 className="channel-intro__title">Beginning of {ui_name}</h4> - <p className="channel-intro__content"> - { 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 = ( + <div className='channel-intro'> + <h4 className='channel-intro__title'>Beginning of {uiName}</h4> + <p className='channel-intro__content'> + {createMessage} + {memberMessage} <br/> </p> - <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}><i className="fa fa-pencil"></i>Set a description</a> - <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#channel_invite"><i className="fa fa-user-plus"></i>Invite others to this {ui_type}</a> + <a className='intro-links' href='#' style={userStyle} data-toggle='modal' data-target='#edit_channel' data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}><i className='fa fa-pencil'></i>Set a description</a> + <a className='intro-links' href='#' style={userStyle} data-toggle='modal' data-target='#channel_invite'><i className='fa fa-user-plus'></i>Invite others to this {uiType}</a> </div> ); } @@ -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 = ( <Post ref={post.id} sameUser={sameUser} sameRoot={sameRoot} post={post} parentPost={parentPost} key={post.id} @@ -447,21 +498,21 @@ module.exports = React.createClass({ ); currentPostDay = utils.getDateForUnixTicks(post.create_at); - if (currentPostDay.toDateString() != previousPostDay.toDateString()) { + if (currentPostDay.toDateString() !== previousPostDay.toDateString()) { postCtls.push( - <div key={currentPostDay.toDateString()} className="date-separator"> - <hr className="separator__hr" /> - <div className="separator__text">{currentPostDay.toDateString()}</div> + <div key={currentPostDay.toDateString()} className='date-separator'> + <hr className='separator__hr' /> + <div className='separator__text'>{currentPostDay.toDateString()}</div> </div> ); } - 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( - <div key="unviewed" className="new-separator"> - <hr id="new_message" className="separator__hr" /> - <div className="separator__text">New Messages</div> + <div key='unviewed' className='new-separator'> + <hr id='new_message' className='separator__hr' /> + <div className='separator__text'>New Messages</div> </div> ); } @@ -469,15 +520,15 @@ module.exports = React.createClass({ previousPostDay = currentPostDay; } } else { - postCtls.push(<LoadingScreen position="absolute" />); + postCtls.push(<LoadingScreen position='absolute' />); } return ( - <div ref="postlist" className="post-list-holder-by-time"> - <div className="post-list__table"> - <div className="post-list__content"> - { more_messages } - { postCtls } + <div ref='postlist' className='post-list-holder-by-time'> + <div className='post-list__table'> + <div className='post-list__content'> + {moreMessages} + {postCtls} </div> </div> </div> diff --git a/web/react/components/post_right.jsx b/web/react/components/post_right.jsx index e46979ff7..175e1080d 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 ? <a href="#" onClick={this.handleBack} className="sidebar--right__back"><i className="fa fa-chevron-left"></i></a> : ""; + var back; + if (this.props.fromSearch) { + back = <a href='#' onClick={this.handleBack} className='sidebar--right__back'><i className='fa fa-chevron-left'></i></a>; + } return ( - <div className="sidebar--right__header"> - <span className="sidebar--right__title">{back}Message Details</span> - <button type="button" className="sidebar--right__close" aria-label="Close" onClick={this.handleClose}></button> + <div className='sidebar--right__header'> + <span className='sidebar--right__title'>{back}Message Details</span> + <button type='button' className='sidebar--right__close' aria-label='Close' onClick={this.handleClose}></button> </div> ); } @@ -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 = ( + <div> + <a href='#' className='dropdown-toggle theme' type='button' data-toggle='dropdown' aria-expanded='false' /> + <ul className='dropdown-menu' role='menu'> + <li role='presentation'><a href='#' role='menuitem' data-toggle='modal' data-target='#edit_post' data-title={type} data-message={post.message} data-postid={post.id} data-channelid={post.channel_id}>Edit</a></li> + <li role='presentation'><a href='#' role='menuitem' data-toggle='modal' data-target='#delete_post' data-title={type} data-postid={post.id} data-channelid={post.channel_id} data-comments={this.props.commentCount}>Delete</a></li> + </ul> + </div> + ); + } + + var fileAttachment; + if (post.filenames && post.filenames.length > 0) { + fileAttachment = ( + <FileAttachmentList + filenames={post.filenames} + modalId={'rhs_view_image_modal_' + post.id} + channelId={post.channel_id} + userId={post.user_id} /> + ); } return ( - <div className={"post post--root " + currentUserCss}> - <div className="post-right-channel__name">{ channelName }</div> - <div className="post-profile-img__container"> - <img className="post-profile-img" src={"/api/v1/users/" + post.user_id + "/image?time=" + timestamp} height="36" width="36" /> + <div className={'post post--root ' + currentUserCss}> + <div className='post-right-channel__name'>{ channelName }</div> + <div className='post-profile-img__container'> + <img className='post-profile-img' src={'/api/v1/users/' + post.user_id + '/image?time=' + timestamp} height='36' width='36' /> </div> - <div className="post__content"> - <ul className="post-header"> - <li className="post-header-col"><strong><UserProfile userId={post.user_id} /></strong></li> - <li className="post-header-col"><time className="post-right-root-time">{ utils.displayDate(post.create_at)+' '+utils.displayTime(post.create_at) }</time></li> - <li className="post-header-col post-header__reply"> - <div className="dropdown"> - { isOwner ? - <div> - <a href="#" className="dropdown-toggle theme" type="button" data-toggle="dropdown" aria-expanded="false" /> - <ul className="dropdown-menu" role="menu"> - <li role="presentation"><a href="#" role="menuitem" data-toggle="modal" data-target="#edit_post" data-title={type} data-message={post.message} data-postid={post.id} data-channelid={post.channel_id}>Edit</a></li> - <li role="presentation"><a href="#" role="menuitem" data-toggle="modal" data-target="#delete_post" data-title={type} data-postid={post.id} data-channelid={post.channel_id} data-comments={this.props.commentCount}>Delete</a></li> - </ul> - </div> - : "" } + <div className='post__content'> + <ul className='post-header'> + <li className='post-header-col'><strong><UserProfile userId={post.user_id} /></strong></li> + <li className='post-header-col'><time className='post-right-root-time'>{utils.displayDate(post.create_at) + ' ' + utils.displayTime(post.create_at)}</time></li> + <li className='post-header-col post-header__reply'> + <div className='dropdown'> + {ownerOptions} </div> </li> </ul> - <div className="post-body"> + <div className='post-body'> <p>{message}</p> - { post.filenames && post.filenames.length > 0 ? - <FileAttachmentList - filenames={post.filenames} - modalId={"rhs_view_image_modal_" + post.id} - channelId={post.channel_id} - userId={post.user_id} /> - : "" } + {fileAttachment} </div> </div> <hr /> @@ -119,56 +139,104 @@ RootPost = React.createClass({ }); CommentPost = React.createClass({ - render: function() { + 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) + ); - var commentClass = "post"; + post.state = Constants.POST_LOADING; + PostStore.updatePendingPost(post); + this.forceUpdate(); + }, + render: function() { + 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.state === Constants.POST_FAILED) { + postClass += ' post-fail'; + loading = <a className='theme post-retry pull-right' href='#' onClick={this.retryComment}>Retry</a>; + } else if (post.state === Constants.POST_LOADING) { + postClass += ' post-waiting'; + loading = <img className='post-loading-gif pull-right' src='/static/images/load.gif'/>; + } + + var ownerOptions; + if (isOwner && post.state !== Constants.POST_FAILED && post.state !== Constants.POST_LOADING) { + ownerOptions = ( + <div className='dropdown' onClick={function(e){$('.post-list-holder-by-time').scrollTop($('.post-list-holder-by-time').scrollTop() + 50);}}> + <a href='#' className='dropdown-toggle theme' type='button' data-toggle='dropdown' aria-expanded='false' /> + <ul className='dropdown-menu' role='menu'> + <li role='presentation'><a href='#' role='menuitem' data-toggle='modal' data-target='#edit_post' data-title={type} data-message={post.message} data-postid={post.id} data-channelid={post.channel_id}>Edit</a></li> + <li role='presentation'><a href='#' role='menuitem' data-toggle='modal' data-target='#delete_post' data-title={type} data-postid={post.id} data-channelid={post.channel_id} data-comments={0}>Delete</a></li> + </ul> + </div> + ); + } + + var fileAttachment; + if (post.filenames && post.filenames.length > 0) { + fileAttachment = ( + <FileAttachmentList + filenames={post.filenames} + modalId={'rhs_comment_view_image_modal_' + post.id} + channelId={post.channel_id} + userId={post.user_id} /> + ); + } + return ( - <div className={commentClass + " " + currentUserCss}> - <div className="post-profile-img__container"> - <img className="post-profile-img" src={"/api/v1/users/" + post.user_id + "/image?time=" + timestamp} height="36" width="36" /> + <div className={'post ' + currentUserCss}> + <div className='post-profile-img__container'> + <img className='post-profile-img' src={'/api/v1/users/' + post.user_id + '/image?time=' + timestamp} height='36' width='36' /> </div> - <div className="post__content"> - <ul className="post-header"> - <li className="post-header-col"><strong><UserProfile userId={post.user_id} /></strong></li> - <li className="post-header-col"><time className="post-right-comment-time">{ utils.displayDateTime(post.create_at) }</time></li> - <li className="post-header-col post-header__reply"> - { isOwner ? - <div className="dropdown" onClick={function(e){$('.post-list-holder-by-time').scrollTop($(".post-list-holder-by-time").scrollTop() + 50);}}> - <a href="#" className="dropdown-toggle theme" type="button" data-toggle="dropdown" aria-expanded="false" /> - <ul className="dropdown-menu" role="menu"> - <li role="presentation"><a href="#" role="menuitem" data-toggle="modal" data-target="#edit_post" data-title={type} data-message={post.message} data-postid={post.id} data-channelid={post.channel_id}>Edit</a></li> - <li role="presentation"><a href="#" role="menuitem" data-toggle="modal" data-target="#delete_post" data-title={type} data-postid={post.id} data-channelid={post.channel_id} data-comments={0}>Delete</a></li> - </ul> - </div> - : "" } + <div className='post__content'> + <ul className='post-header'> + <li className='post-header-col'><strong><UserProfile userId={post.user_id} /></strong></li> + <li className='post-header-col'><time className='post-right-comment-time'>{utils.displayDateTime(post.create_at)}</time></li> + <li className='post-header-col post-header__reply'> + {ownerOptions} </li> </ul> - <div className="post-body"> - <p>{message}</p> - { post.filenames && post.filenames.length > 0 ? - <FileAttachmentList - filenames={post.filenames} - modalId={"rhs_comment_view_image_modal_" + post.id} - channelId={post.channel_id} - userId={post.user_id} /> - : "" } + <div className='post-body'> + <p className={postClass}>{loading}{message}</p> + {fileAttachment} </div> </div> </div> @@ -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 ( <div></div> ); } - 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 : <SearchBox />; + var searchForm; + if (currentId != null) { + searchForm = <SearchBox />; + } return ( - <div className="post-right__container"> + <div className='post-right__container'> <FileUploadOverlay overlayType='right' /> - <div className="search-bar__container sidebar--right__search-header">{searchForm}</div> - <div className="sidebar-right__body"> + <div className='search-bar__container sidebar--right__search-header'>{searchForm}</div> + <div className='sidebar-right__body'> <RhsHeaderPost fromSearch={this.props.fromSearch} isMentionSearch={this.props.isMentionSearch} /> - <div className="post-right__scroll"> - <RootPost post={root_post} commentCount={posts_array.length}/> - <div className="post-right-comments-container"> - { posts_array.map(function(cpost) { - return <CommentPost ref={cpost.id} key={cpost.id} post={cpost} selected={ (cpost.id == selected_post.id) } /> + <div className='post-right__scroll'> + <RootPost post={rootPost} commentCount={postsArray.length}/> + <div className='post-right-comments-container'> + {postsArray.map(function mapPosts(comPost) { + return <CommentPost ref={comPost.id} key={comPost.id} post={comPost} selected={(comPost.id === selectedPost.id)} />; })} </div> - <div className="post-create__container"> - <CreateComment channelId={root_post.channel_id} rootId={root_post.id} /> + <div className='post-create__container'> + <CreateComment channelId={rootPost.channel_id} rootId={rootPost.id} /> </div> </div> </div> |