diff options
Diffstat (limited to 'web/react/components/post_right.jsx')
| -rw-r--r-- | web/react/components/post_right.jsx | 397 |
1 files changed, 397 insertions, 0 deletions
diff --git a/web/react/components/post_right.jsx b/web/react/components/post_right.jsx new file mode 100644 index 000000000..43be60afa --- /dev/null +++ b/web/react/components/post_right.jsx @@ -0,0 +1,397 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var PostStore = require('../stores/post_store.jsx'); +var ChannelStore = require('../stores/channel_store.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 Constants = require('../utils/constants.jsx'); +var ViewImageModal = require('./view_image.jsx'); +var ActionTypes = Constants.ActionTypes; + +RhsHeaderPost = React.createClass({ + handleClose: function(e) { + e.preventDefault(); + + AppDispatcher.handleServerAction({ + type: ActionTypes.RECIEVED_SEARCH, + results: null + }); + + AppDispatcher.handleServerAction({ + type: ActionTypes.RECIEVED_POST_SELECTED, + results: null + }); + }, + handleBack: function(e) { + e.preventDefault(); + + AppDispatcher.handleServerAction({ + type: ActionTypes.RECIEVED_SEARCH_TERM, + term: this.props.fromSearch, + do_search: true, + is_mention_search: this.props.isMentionSearch + }); + + AppDispatcher.handleServerAction({ + type: ActionTypes.RECIEVED_POST_SELECTED, + results: null + }); + }, + render: function() { + var back = this.props.fromSearch ? <a href="#" onClick={this.handleBack} style={{color:"black"}}>{"< "}</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> + ); + } +}); + +RootPost = React.createClass({ + handleImageClick: function(e) { + this.setState({startImgId: parseInt($(e.target.parentNode).attr('data-img-id'))}); + }, + getInitialState: function() { + return { startImgId: 0 }; + }, + render: function() { + + var postImageModalId = "rhs_view_image_modal_" + this.props.post.id; + var message = utils.textToJsx(this.props.post.message); + var filenames = this.props.post.filenames; + var isOwner = UserStore.getCurrentId() == this.props.post.user_id; + + var type = "Post" + if (this.props.post.root_id.length > 0) { + type = "Comment" + } + + if (filenames) { + var postFiles = []; + var images = []; + var re1 = new RegExp(' ', 'g'); + var re2 = new RegExp('\\(', 'g'); + var re3 = new RegExp('\\)', 'g'); + for (var i = 0; i < filenames.length && i < Constants.MAX_DISPLAY_FILES; i++) { + var fileSplit = filenames[i].split('.'); + if (fileSplit.length < 2) continue; + + var ext = fileSplit[fileSplit.length-1]; + fileSplit.splice(fileSplit.length-1,1) + var filePath = fileSplit.join('.'); + var filename = filePath.split('/')[filePath.split('/').length-1]; + + var ftype = utils.getFileType(ext); + + if (ftype === "image") { + var url = filePath.replace(re1, '%20').replace(re2, '%28').replace(re3, '%29'); + postFiles.push( + <div className="post-image__column" key={filePath}> + <a href="#" onClick={this.handleImageClick} data-img-id={images.length.toString()} data-toggle="modal" data-target={"#" + postImageModalId }><div ref={filePath} className="post__image" style={{backgroundImage: 'url(' + url + '_thumb.jpg)'}}></div></a> + </div> + ); + images.push(filenames[i]); + } else { + postFiles.push( + <div className="post-image__column custom-file" key={filePath}> + <a href={filePath+"."+ext} download={filename+"."+ext}> + <div className={"file-icon "+utils.getIconClassName(ftype)}/> + </a> + </div> + ); + } + } + } + + return ( + <div className="post post--root"> + <div className="post-profile-img__container"> + <img className="post-profile-img" src={"/api/v1/users/" + this.props.post.user_id + "/image"} height="36" width="36" /> + </div> + <div className="post__content"> + <ul className="post-header"> + <li className="post-header-col"><strong><UserProfile userId={this.props.post.user_id} /></strong></li> + <li className="post-header-col"><time className="post-right-root-time">{ utils.displayDate(this.props.post.create_at)+' '+utils.displayTime(this.props.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"> + [...] + </a> + <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={this.props.post.message} data-postid={this.props.post.id} data-channelid={this.props.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={this.props.post.id} data-channelid={this.props.post.channel_id} data-comments={this.props.commentCount}>Delete</a></li> + </ul> + </div> + : "" } + </div> + </li> + </ul> + <div className="post-body"> + <p>{message}</p> + { filenames.length > 0 ? + <div className="post-image__columns"> + { postFiles } + </div> + : "" } + { images.length > 0 ? + <ViewImageModal + channelId={this.props.post.channel_id} + userId={this.props.post.user_id} + modalId={postImageModalId} + startId={this.state.startImgId} + imgCount={this.props.post.img_count} + filenames={images} /> + : "" } + </div> + </div> + <hr /> + </div> + ); + } +}); + +CommentPost = React.createClass({ + handleImageClick: function(e) { + this.setState({startImgId: parseInt($(e.target.parentNode).attr('data-img-id'))}); + }, + getInitialState: function() { + return { startImgId: 0 }; + }, + render: function() { + + var commentClass = "post"; + + var postImageModalId = "rhs_comment_view_image_modal_" + this.props.post.id; + var filenames = this.props.post.filenames; + var isOwner = UserStore.getCurrentId() == this.props.post.user_id; + + var type = "Post" + if (this.props.post.root_id.length > 0) { + type = "Comment" + } + + if (filenames) { + var postFiles = []; + var images = []; + var re1 = new RegExp(' ', 'g'); + var re2 = new RegExp('\\(', 'g'); + var re3 = new RegExp('\\)', 'g'); + for (var i = 0; i < filenames.length && i < Constants.MAX_DISPLAY_FILES; i++) { + var fileSplit = filenames[i].split('.'); + if (fileSplit.length < 2) continue; + + var ext = fileSplit[fileSplit.length-1]; + fileSplit.splice(fileSplit.length-1,1) + var filePath = fileSplit.join('.'); + var filename = filePath.split('/')[filePath.split('/').length-1]; + + var type = utils.getFileType(ext); + + if (type === "image") { + var url = filePath.replace(re1, '%20').replace(re2, '%28').replace(re3, '%29'); + postFiles.push( + <div className="post-image__column" key={filename}> + <a href="#" onClick={this.handleImageClick} data-img-id={images.length.toString()} data-toggle="modal" data-target={"#" + postImageModalId }><div ref={filename} className="post__image" style={{backgroundImage: 'url(' + url + '_thumb.jpg)'}}></div></a> + </div> + ); + images.push(filenames[i]); + } else { + postFiles.push( + <div className="post-image__column custom-file" key={filename}> + <a href={filePath+"."+ext} download={filename+"."+ext}> + <div className={"file-icon "+utils.getIconClassName(type)}/> + </a> + </div> + ); + } + } + } + + var message = utils.textToJsx(this.props.post.message); + + return ( + <div className={commentClass}> + <div className="post-profile-img__container"> + <img className="post-profile-img" src={"/api/v1/users/" + this.props.post.user_id + "/image"} height="36" width="36" /> + </div> + <div className="post__content"> + <ul className="post-header"> + <li className="post-header-col"><strong><UserProfile userId={this.props.post.user_id} /></strong></li> + <li className="post-header-col"><time className="post-right-comment-time">{ utils.displayDateTime(this.props.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"> + [...] + </a> + <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={this.props.post.message} data-postid={this.props.post.id} data-channelid={this.props.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={this.props.post.id} data-channelid={this.props.post.channel_id} data-comments={0}>Delete</a></li> + </ul> + </div> + : "" } + </li> + </ul> + <div className="post-body"> + <p>{message}</p> + { filenames.length > 0 ? + <div className="post-image__columns"> + { postFiles } + </div> + : "" } + { images.length > 0 ? + <ViewImageModal + channelId={this.props.post.channel_id} + userId={this.props.post.user_id} + modalId={postImageModalId} + startId={this.state.startImgId} + imgCount={this.props.post.img_count} + filenames={images} /> + : "" } + </div> + </div> + </div> + ); + } +}); + +function getStateFromStores() { + return { post_list: PostStore.getSelectedPost() }; +} + +module.exports = React.createClass({ + componentDidMount: function() { + PostStore.addSelectedPostChangeListener(this._onChange); + PostStore.addChangeListener(this._onChangeAll); + $(".post-right__scroll").perfectScrollbar(); + this.resize(); + var self = this; + $(window).resize(function(){ + self.resize(); + }); + }, + componentDidUpdate: function() { + this.resize(); + }, + componentWillUnmount: function() { + PostStore.removeSelectedPostChangeListener(this._onChange); + PostStore.removeChangeListener(this._onChangeAll); + }, + _onChange: function() { + if (this.isMounted()) { + var newState = getStateFromStores(); + if (!utils.areStatesEqual(newState, this.state)) { + this.setState(newState); + } + } + }, + _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) { + return; + } + + var currentPosts = PostStore.getPosts(currentSelected.posts[currentSelected.order[0]].channel_id); + + if (!currentPosts || currentPosts.order.length == 0) { + return; + } + + + 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]; + } + + PostStore.storeSelectedPost(currentSelected); + } + + this.setState(getStateFromStores()); + } + }, + getInitialState: function() { + return getStateFromStores(); + }, + 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('update'); + }, + render: function() { + + var post_list = this.state.post_list; + + if (post_list == null) { + return ( + <div></div> + ); + } + + var selected_post = post_list.posts[post_list.order[0]]; + var root_post = null; + + if (selected_post.root_id == "") { + root_post = selected_post; + } + else { + root_post = post_list.posts[selected_post.root_id]; + } + + var posts_array = []; + + for (var postId in post_list.posts) { + var cpost = post_list.posts[postId]; + if (cpost.root_id == root_post.id) { + posts_array.push(cpost); + } + } + + posts_array.sort(function(a,b) { + if (a.create_at < b.create_at) + return -1; + 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 />; + + return ( + <div className="post-right__container"> + <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 key={cpost.id} post={cpost} selected={ (cpost.id == selected_post.id) } /> + })} + </div> + <div className="post-create__container"> + <CreateComment channelId={root_post.channel_id} rootId={root_post.id} /> + </div> + </div> + </div> + </div> + ); + } +}); |