diff options
Diffstat (limited to 'web/react/components/post_right.jsx')
| -rw-r--r-- | web/react/components/post_right.jsx | 341 |
1 files changed, 214 insertions, 127 deletions
diff --git a/web/react/components/post_right.jsx b/web/react/components/post_right.jsx index ad8b54012..c8c51b0c3 100644 --- a/web/react/components/post_right.jsx +++ b/web/react/components/post_right.jsx @@ -3,14 +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({ @@ -43,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> ); } @@ -58,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.displayCommentDateTime(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 /> @@ -118,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.displayCommentDateTime(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> @@ -176,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)) { @@ -208,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]; @@ -237,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(); } }, @@ -248,66 +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="search-bar__container sidebar--right__search-header">{searchForm}</div> - <div className="sidebar-right__body"> + <div className='post-right__container'> + <FileUploadOverlay + overlayType='right' /> + <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> |