// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. var PostStore = require('../stores/post_store.jsx'); var UserStore = require('../stores/user_store.jsx'); var PreferenceStore = require('../stores/preference_store.jsx'); var Utils = require('../utils/utils.jsx'); var SearchBox = require('./search_bar.jsx'); var CreateComment = require('./create_comment.jsx'); var RhsHeaderPost = require('./rhs_header_post.jsx'); var RootPost = require('./rhs_root_post.jsx'); var Comment = require('./rhs_comment.jsx'); var Constants = require('../utils/constants.jsx'); var FileUploadOverlay = require('./file_upload_overlay.jsx'); export default class RhsThread extends React.Component { constructor(props) { super(props); this.onChange = this.onChange.bind(this); this.onChangeAll = this.onChangeAll.bind(this); this.forceUpdateInfo = this.forceUpdateInfo.bind(this); this.handleResize = this.handleResize.bind(this); const state = this.getStateFromStores(); state.windowWidth = Utils.windowWidth(); state.windowHeight = Utils.windowHeight(); this.state = state; } getStateFromStores() { var postList = PostStore.getSelectedPost(); if (!postList || postList.order.length < 1 || !postList.posts[postList.order[0]]) { return {postList: {}}; } var channelId = postList.posts[postList.order[0]].channel_id; var pendingPostList = PostStore.getPendingPosts(channelId); if (pendingPostList) { for (var pid in pendingPostList.posts) { if (pendingPostList.posts.hasOwnProperty(pid)) { postList.posts[pid] = pendingPostList.posts[pid]; } } } return {postList: postList}; } componentDidMount() { PostStore.addSelectedPostChangeListener(this.onChange); PostStore.addChangeListener(this.onChangeAll); PreferenceStore.addChangeListener(this.forceUpdateInfo); this.resize(); window.addEventListener('resize', this.handleResize); } componentDidUpdate() { if ($('.post-right__scroll')[0]) { $('.post-right__scroll').scrollTop($('.post-right__scroll')[0].scrollHeight); } this.resize(); } componentWillUnmount() { PostStore.removeSelectedPostChangeListener(this.onChange); PostStore.removeChangeListener(this.onChangeAll); PreferenceStore.removeChangeListener(this.forceUpdateInfo); window.removeEventListener('resize', this.handleResize); } forceUpdateInfo() { if (this.state.postList) { for (var postId in this.state.postList.posts) { if (this.refs[postId]) { this.refs[postId].forceUpdate(); } } } } handleResize() { this.setState({ windowWidth: Utils.windowWidth(), windowHeight: Utils.windowHeight() }); } onChange() { var newState = this.getStateFromStores(); if (!Utils.areStatesEqual(newState, this.state)) { this.setState(newState); } } onChangeAll() { // 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 || !currentSelected.posts[currentSelected.order[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) { if (currentPosts.posts.hasOwnProperty(postId)) { currentSelected.posts[postId] = currentPosts.posts[postId]; } } PostStore.storeSelectedPost(currentSelected); } var newState = this.getStateFromStores(); if (!Utils.areStatesEqual(newState, this.state)) { this.setState(newState); } } resize() { var height = this.state.windowHeight - $('#error_bar').outerHeight() - 100; $('.post-right__scroll').css('height', height + 'px'); $('.post-right__scroll').scrollTop(100000); if (this.state.windowWidth > 768) { $('.post-right__scroll').perfectScrollbar(); $('.post-right__scroll').perfectScrollbar('update'); } } render() { var postList = this.state.postList; if (postList == null || !postList.order) { return (
); } var selectedPost = postList.posts[postList.order[0]]; var rootPost = null; if (selectedPost.root_id === '') { rootPost = selectedPost; } else { rootPost = postList.posts[selectedPost.root_id]; } var postsArray = []; for (var postId in postList.posts) { if (postList.posts.hasOwnProperty(postId)) { var cpost = postList.posts[postId]; if (cpost.root_id === rootPost.id) { postsArray.push(cpost); } } } // sort failed posts to bottom, followed by pending, and then regular posts postsArray.sort(function postSort(a, b) { if ((a.state === Constants.POST_LOADING || a.state === Constants.POST_FAILED) && (b.state !== Constants.POST_LOADING && b.state !== Constants.POST_FAILED)) { return 1; } if ((a.state !== Constants.POST_LOADING && a.state !== Constants.POST_FAILED) && (b.state === Constants.POST_LOADING || b.state === Constants.POST_FAILED)) { return -1; } if (a.state === Constants.POST_LOADING && b.state === Constants.POST_FAILED) { return -1; } if (a.state === Constants.POST_FAILED && b.state === Constants.POST_LOADING) { return 1; } if (a.create_at < b.create_at) { return -1; } if (a.create_at > b.create_at) { return 1; } return 0; }); var currentId = UserStore.getCurrentId(); var searchForm; if (currentId != null) { searchForm = ; } return (
{searchForm}
{postsArray.map(function mapPosts(comPost) { return ( ); })}
); } } RhsThread.defaultProps = { fromSearch: '', isMentionSearch: false }; RhsThread.propTypes = { fromSearch: React.PropTypes.string, isMentionSearch: React.PropTypes.bool };