@@ -89,7 +103,3 @@ export default class PermalinkView extends React.Component {
);
}
}
-
-PermalinkView.propTypes = {
- params: PropTypes.object.isRequired
-};
diff --git a/webapp/components/post_view/commented_on_files_message/commented_on_files_message.jsx b/webapp/components/post_view/commented_on_files_message/commented_on_files_message.jsx
new file mode 100644
index 0000000000..a09b2b1565
--- /dev/null
+++ b/webapp/components/post_view/commented_on_files_message/commented_on_files_message.jsx
@@ -0,0 +1,51 @@
+// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+
+import * as Utils from 'utils/utils.jsx';
+
+export default class CommentedOnFilesMessage extends React.PureComponent {
+ static propTypes = {
+
+ /*
+ * The id of the post that was commented on
+ */
+ parentPostId: React.PropTypes.string.isRequired,
+
+ /*
+ * An array of file metadata for the parent post
+ */
+ fileInfos: React.PropTypes.arrayOf(React.PropTypes.object),
+
+ actions: React.PropTypes.shape({
+
+ /*
+ * Function to get file metadata for a post
+ */
+ getFilesForPost: React.PropTypes.func.isRequired
+ }).isRequired
+ }
+
+ componentDidMount() {
+ if (!this.props.fileInfos || this.props.fileInfos.length === 0) {
+ this.props.actions.getFilesForPost(this.props.parentPostId);
+ }
+ }
+
+ render() {
+ let message = ' ';
+
+ if (this.props.fileInfos && this.props.fileInfos.length > 0) {
+ message = this.props.fileInfos[0].name;
+
+ if (this.props.fileInfos.length === 2) {
+ message += Utils.localizeMessage('post_body.plusOne', ' plus 1 other file');
+ } else if (this.props.fileInfos.length > 2) {
+ message += Utils.localizeMessage('post_body.plusMore', ' plus {count} other files').replace('{count}', (this.props.fileInfos.length - 1).toString());
+ }
+ }
+
+ return {message};
+ }
+}
diff --git a/webapp/components/post_view/commented_on_files_message/index.js b/webapp/components/post_view/commented_on_files_message/index.js
new file mode 100644
index 0000000000..fd6aa71939
--- /dev/null
+++ b/webapp/components/post_view/commented_on_files_message/index.js
@@ -0,0 +1,36 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {getFilesForPost} from 'mattermost-redux/actions/files';
+
+import {makeGetFilesForPost} from 'mattermost-redux/selectors/entities/files';
+
+import CommentedOnFilesMessage from './commented_on_files_message.jsx';
+
+function makeMapStateToProps() {
+ const selectFileInfosForPost = makeGetFilesForPost();
+
+ return function mapStateToProps(state, ownProps) {
+ let fileInfos;
+ if (ownProps.parentPostId) {
+ fileInfos = selectFileInfosForPost(state, {id: ownProps.parentPostId});
+ }
+
+ return {
+ ...ownProps,
+ fileInfos
+ };
+ };
+}
+
+function mapDispatchToProps(dispatch) {
+ return {
+ actions: bindActionCreators({
+ getFilesForPost
+ }, dispatch)
+ };
+}
+
+export default connect(makeMapStateToProps, mapDispatchToProps)(CommentedOnFilesMessage);
diff --git a/webapp/components/post_view/components/commented_on_files_message_container.jsx b/webapp/components/post_view/components/commented_on_files_message_container.jsx
deleted file mode 100644
index 6ba1de3de3..0000000000
--- a/webapp/components/post_view/components/commented_on_files_message_container.jsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import PropTypes from 'prop-types';
-
-// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
-// See License.txt for license information.
-
-import React from 'react';
-
-import * as AsyncClient from 'utils/async_client.jsx';
-import FileStore from 'stores/file_store.jsx';
-import * as Utils from 'utils/utils.jsx';
-
-export default class CommentedOnFilesMessageContainer extends React.Component {
- static propTypes = {
- parentPostChannelId: PropTypes.string.isRequired,
- parentPostId: PropTypes.string.isRequired
- }
-
- constructor(props) {
- super(props);
-
- this.handleFileChange = this.handleFileChange.bind(this);
-
- this.state = {
- fileInfos: FileStore.getInfosForPost(this.props.parentPostId)
- };
- }
-
- componentDidMount() {
- FileStore.addChangeListener(this.handleFileChange);
-
- if (!FileStore.hasInfosForPost(this.props.parentPostId)) {
- AsyncClient.getFileInfosForPost(this.props.parentPostChannelId, this.props.parentPostId);
- }
- }
-
- componentWillReceiveProps(nextProps) {
- if (nextProps.parentPostId !== this.props.parentPostId) {
- this.setState({
- fileInfos: FileStore.getInfosForPost(this.props.parentPostId)
- });
-
- if (!FileStore.hasInfosForPost(this.props.parentPostId)) {
- AsyncClient.getFileInfosForPost(this.props.parentPostChannelId, this.props.parentPostId);
- }
- }
- }
-
- shouldComponentUpdate(nextProps, nextState) {
- if (nextProps.parentPostId !== this.props.parentPostId) {
- return true;
- }
-
- if (nextProps.parentPostChannelId !== this.props.parentPostChannelId) {
- return true;
- }
-
- // fileInfos are treated as immutable by the FileStore
- if (nextState.fileInfos !== this.state.fileInfos) {
- return true;
- }
-
- return false;
- }
-
- handleFileChange() {
- this.setState({
- fileInfos: FileStore.getInfosForPost(this.props.parentPostId)
- });
- }
-
- componentWillUnmount() {
- FileStore.removeChangeListener(this.handleFileChange);
- }
-
- render() {
- let message = ' ';
-
- if (this.state.fileInfos && this.state.fileInfos.length > 0) {
- message = this.state.fileInfos[0].name;
-
- if (this.state.fileInfos.length === 2) {
- message += Utils.localizeMessage('post_body.plusOne', ' plus 1 other file');
- } else if (this.state.fileInfos.length > 2) {
- message += Utils.localizeMessage('post_body.plusMore', ' plus {count} other files').replace('{count}', (this.state.fileInfos.length - 1).toString());
- }
- }
-
- return {message};
- }
-}
diff --git a/webapp/components/post_view/components/date_separator.jsx b/webapp/components/post_view/components/date_separator.jsx
deleted file mode 100644
index 4648f456c3..0000000000
--- a/webapp/components/post_view/components/date_separator.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import {FormattedDate} from 'react-intl';
-
-export default function DateSeparator(props) {
- return (
- = 0 && i < Constants.TEST_ID_COUNT) ? i : -1}
- sameUser={sameUser}
- sameRoot={sameRoot}
- post={post}
- parentPost={parentPost}
- hideProfilePic={hideProfilePic}
- isLastComment={isLastComment}
- shouldHighlight={shouldHighlight}
- displayNameType={this.props.displayNameType}
- user={profile}
- currentUser={this.props.currentUser}
- center={this.props.displayPostsInCenter}
- commentCount={commentCount}
- isCommentMention={isCommentMention}
- compactDisplay={this.props.compactDisplay}
- previewCollapsed={this.props.previewsCollapsed}
- useMilitaryTime={this.props.useMilitaryTime}
- isFlagged={isFlagged}
- status={status}
- isBusy={this.props.isBusy}
- childComponentDidUpdateFunction={this.childComponentDidUpdate}
- getPostList={this.getPostList}
- />
- );
-
- const currentPostDay = Utils.getDateForUnixTicks(post.create_at);
- if (currentPostDay.toDateString() !== previousPostDay.toDateString()) {
- postCtls.push(
-
-
-
- );
-}
-
-DateSeparator.propTypes = {
- date: PropTypes.instanceOf(Date)
-};
diff --git a/webapp/components/post_view/components/post_attachment_list.jsx b/webapp/components/post_view/components/post_attachment_list.jsx
deleted file mode 100644
index 3d7c0e4cdb..0000000000
--- a/webapp/components/post_view/components/post_attachment_list.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See License.txt for license information.
-
-import PostAttachment from './post_attachment.jsx';
-
-import PropTypes from 'prop-types';
-
-import React from 'react';
-
-export default function PostAttachmentList(props) {
- const content = [];
- props.attachments.forEach((attachment, i) => {
- content.push(
- -
-
-
- {content}
-
- );
-}
-
-PostAttachmentList.propTypes = {
- attachments: PropTypes.array.isRequired
-};
diff --git a/webapp/components/post_view/components/post_list.jsx b/webapp/components/post_view/components/post_list.jsx
deleted file mode 100644
index ec3c8dc6a2..0000000000
--- a/webapp/components/post_view/components/post_list.jsx
+++ /dev/null
@@ -1,690 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See License.txt for license information.
-import $ from 'jquery';
-
-import Post from './post.jsx';
-import FloatingTimestamp from './floating_timestamp.jsx';
-import ScrollToBottomArrows from './scroll_to_bottom_arrows.jsx';
-import NewMessageIndicator from './new_message_indicator.jsx';
-
-import * as GlobalActions from 'actions/global_actions.jsx';
-
-import {createChannelIntroMessage} from 'utils/channel_intro_messages.jsx';
-
-import * as UserAgent from 'utils/user_agent.jsx';
-import * as Utils from 'utils/utils.jsx';
-import * as PostUtils from 'utils/post_utils.jsx';
-import DelayedAction from 'utils/delayed_action.jsx';
-
-import * as ChannelActions from 'actions/channel_actions.jsx';
-
-import Constants from 'utils/constants.jsx';
-const ScrollTypes = Constants.ScrollTypes;
-
-import PostStore from 'stores/post_store.jsx';
-import PreferenceStore from 'stores/preference_store.jsx';
-import ScrollStore from 'stores/scroll_store.jsx';
-import {FormattedDate, FormattedMessage} from 'react-intl';
-
-import PropTypes from 'prop-types';
-
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-const Preferences = Constants.Preferences;
-
-export default class PostList extends React.Component {
- constructor(props) {
- super(props);
-
- this.handleScroll = this.handleScroll.bind(this);
- this.handleScrollStop = this.handleScrollStop.bind(this);
- this.isAtBottom = this.isAtBottom.bind(this);
- this.loadMorePostsTop = this.loadMorePostsTop.bind(this);
- this.loadMorePostsBottom = this.loadMorePostsBottom.bind(this);
- this.createPosts = this.createPosts.bind(this);
- this.updateScrolling = this.updateScrolling.bind(this);
- this.handleResize = this.handleResize.bind(this);
- this.scrollToBottom = this.scrollToBottom.bind(this);
- this.scrollToBottomAnimated = this.scrollToBottomAnimated.bind(this);
- this.handleKeyDown = this.handleKeyDown.bind(this);
- this.childComponentDidUpdate = this.childComponentDidUpdate.bind(this);
- this.checkAndUpdateScrolling = this.checkAndUpdateScrolling.bind(this);
-
- this.jumpToPostNode = null;
- this.wasAtBottom = true;
- this.scrollHeight = 0;
- this.animationFrameId = 0;
-
- this.scrollStopAction = new DelayedAction(this.handleScrollStop);
-
- this.state = {
- isScrolling: false,
- fullWidthIntro: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN,
- topPostId: null,
- unViewedCount: 0
- };
-
- if (props.channel) {
- this.introText = createChannelIntroMessage(props.channel, this.state.fullWidthIntro);
- } else {
- this.introText = this.getArchivesIntroMessage();
- }
- }
-
- componentWillReceiveProps(nextProps) {
- if (this.props.channel && this.props.channel.type === Constants.DM_CHANNEL) {
- const teammateId = Utils.getUserIdFromChannelName(this.props.channel);
- if (!this.props.profiles[teammateId] && nextProps.profiles[teammateId]) {
- this.introText = createChannelIntroMessage(this.props.channel, this.state.fullWidthIntro);
- }
- }
-
- const posts = nextProps.postList.posts;
- const order = nextProps.postList.order;
- let unViewedCount = 0;
-
- // Only count if we're not at the bottom, not in highlight view,
- // or anything else
- if (nextProps.scrollType === Constants.ScrollTypes.FREE) {
- unViewedCount = order.reduce((count, orderId) => {
- const post = posts[orderId];
- if (post.create_at > nextProps.lastViewedBottom &&
- post.user_id !== nextProps.currentUser.id &&
- post.state !== Constants.POST_DELETED) {
- return count + 1;
- }
- return count;
- }, 0);
- }
- this.setState({unViewedCount});
-
- if (this.props.channelId !== nextProps.channelId) {
- PostStore.removePostDraftChangeListener(this.props.channelId, this.handlePostDraftChange);
- PostStore.addPostDraftChangeListener(nextProps.channelId, this.handlePostDraftChange);
- }
- }
-
- handleKeyDown(e) {
- if (e.which === Constants.KeyCodes.ESCAPE && $('.popover.in,.modal.in').length === 0) {
- e.preventDefault();
- ChannelActions.setChannelAsRead();
- }
- }
-
- isAtBottom() {
- if (!this.refs.postlist) {
- return this.wasAtBottom;
- }
-
- // consider the view to be at the bottom if it's within this many pixels of the bottom
- const atBottomMargin = 10;
-
- return this.refs.postlist.clientHeight + this.refs.postlist.scrollTop >= this.refs.postlist.scrollHeight - atBottomMargin;
- }
-
- handleScroll() {
- // HACK FOR RHS -- REMOVE WHEN RHS DIES
- const childNodes = this.refs.postlistcontent.childNodes;
- for (let i = 0; i < childNodes.length; i++) {
- // If the node is 1/3 down the page
- if (childNodes[i].offsetTop >= (this.refs.postlist.scrollTop + (this.refs.postlist.offsetHeight / Constants.SCROLL_PAGE_FRACTION))) {
- this.jumpToPostNode = childNodes[i];
- break;
- }
- }
- if (!this.jumpToPostNode && childNodes.length > 0) {
- this.jumpToPostNode = childNodes[childNodes.length - 1];
- }
-
- this.updateFloatingTimestamp();
-
- if (!this.state.isScrolling) {
- this.setState({
- isScrolling: true
- });
- }
-
- // Postpone all DOM related calculations to next frame.
- // scrollHeight etc might return wrong data at this point
- setTimeout(() => {
- if (!this.refs.postlist) {
- return;
- }
-
- this.wasAtBottom = this.isAtBottom();
- this.props.postListScrolled(this.isAtBottom());
- this.prevScrollHeight = this.refs.postlist.scrollHeight;
- this.prevOffsetTop = this.jumpToPostNode.offsetTop;
- }, 0);
-
- this.scrollStopAction.fireAfter(Constants.SCROLL_DELAY);
- }
-
- handleScrollStop() {
- this.setState({
- isScrolling: false
- });
- }
-
- updateFloatingTimestamp() {
- // skip this in non-mobile view since that's when the timestamp is visible
- if (!Utils.isMobile()) {
- return;
- }
-
- if (this.props.postList) {
- // iterate through posts starting at the bottom since users are more likely to be viewing newer posts
- for (let i = 0; i < this.props.postList.order.length; i++) {
- const id = this.props.postList.order[i];
- const element = this.refs[id];
-
- if (!element || !element.domNode || element.domNode.offsetTop + element.domNode.clientHeight <= this.refs.postlist.scrollTop) {
- // this post is off the top of the screen so the last one is at the top of the screen
- let topPostId;
-
- if (i > 0) {
- topPostId = this.props.postList.order[i - 1];
- } else {
- // the first post we look at should always be on the screen, but handle that case anyway
- topPostId = id;
- }
-
- if (topPostId !== this.state.topPostId) {
- this.setState({
- topPostId
- });
- }
-
- break;
- }
- }
- }
- }
-
- loadMorePostsTop(e) {
- e.preventDefault();
-
- if (this.props.isFocusPost) {
- return GlobalActions.emitLoadMorePostsFocusedTopEvent();
- }
- return GlobalActions.emitLoadMorePostsEvent();
- }
-
- loadMorePostsBottom() {
- GlobalActions.emitLoadMorePostsFocusedBottomEvent();
- }
-
- createPosts(posts, order) {
- const postCtls = [];
- let previousPostDay = new Date(0);
- const userId = this.props.currentUser.id;
- const profiles = this.props.profiles || {};
-
- let renderedLastViewed = false;
-
- for (let i = order.length - 1; i >= 0; i--) {
- const post = posts[order[i]];
- const parentPost = posts[post.parent_id];
- const prevPost = posts[order[i + 1]];
- const postUserId = PostUtils.isSystemMessage(post) ? '' : post.user_id;
-
- // If the post is a comment whose parent has been deleted, don't add it to the list.
- if (parentPost && parentPost.state === Constants.POST_DELETED) {
- continue;
- }
-
- let sameUser = false;
- let sameRoot = false;
- let hideProfilePic = false;
-
- if (prevPost) {
- const postIsComment = PostUtils.isComment(post);
- const prevPostIsComment = PostUtils.isComment(prevPost);
- const postFromWebhook = Boolean(post.props && post.props.from_webhook);
- const prevPostFromWebhook = Boolean(prevPost.props && prevPost.props.from_webhook);
- const prevPostUserId = PostUtils.isSystemMessage(prevPost) ? '' : prevPost.user_id;
-
- // consider posts from the same user if:
- // the previous post was made by the same user as the current post,
- // the previous post was made within 5 minutes of the current post,
- // the current post is not from a webhook
- // the previous post is not from a webhook
- if (prevPostUserId === postUserId &&
- post.create_at - prevPost.create_at <= Constants.POST_COLLAPSE_TIMEOUT &&
- !postFromWebhook && !prevPostFromWebhook) {
- sameUser = true;
- }
-
- // consider posts from the same root if:
- // the current post is a comment,
- // the current post has the same root as the previous post
- if (postIsComment && (prevPost.id === post.root_id || prevPost.root_id === post.root_id)) {
- sameRoot = true;
- }
-
- // consider posts from the same root if:
- // the current post is not a comment,
- // the previous post is not a comment,
- // the previous post is from the same user
- if (!postIsComment && !prevPostIsComment && sameUser) {
- sameRoot = true;
- }
-
- // hide the profile pic if:
- // the previous post was made by the same user as the current post,
- // the previous post is not a comment,
- // the current post is not a comment,
- // the previous post is not from a webhook
- // the current post is not from a webhook
- if (prevPostUserId === postUserId &&
- !prevPostIsComment &&
- !postIsComment &&
- !prevPostFromWebhook &&
- !postFromWebhook) {
- hideProfilePic = true;
- }
- }
-
- // 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
- const isLastComment = PostUtils.isComment(post) && (i === 0 || posts[order[i - 1]].root_id !== post.root_id);
-
- const keyPrefix = post.id ? post.id : i;
-
- const shouldHighlight = this.props.postsToHighlight && this.props.postsToHighlight.hasOwnProperty(post.id);
-
- let profile;
- if (userId === post.user_id) {
- profile = this.props.currentUser;
- } else {
- profile = profiles[post.user_id];
- }
-
- let commentCount = 0;
- let isCommentMention = false;
- let shouldHighlightThreads = false;
- let commentRootId;
- if (parentPost) {
- commentRootId = post.root_id;
- } else {
- commentRootId = post.id;
- }
-
- if (commentRootId) {
- for (const postId in posts) {
- if (posts[postId].root_id === commentRootId && !PostUtils.isSystemMessage(posts[postId])) {
- commentCount += 1;
- if (posts[postId].user_id === userId) {
- shouldHighlightThreads = true;
- }
- }
- }
- }
-
- if (parentPost && commentRootId) {
- const commentsNotifyLevel = this.props.currentUser.notify_props.comments || 'never';
- const notCurrentUser = post.user_id !== userId || (post.props && post.props.from_webhook);
- if (notCurrentUser) {
- if (commentsNotifyLevel === 'any' && (posts[commentRootId].user_id === userId || shouldHighlightThreads)) {
- isCommentMention = true;
- } else if (commentsNotifyLevel === 'root' && posts[commentRootId].user_id === userId) {
- isCommentMention = true;
- }
- }
- }
-
- let isFlagged = false;
- if (this.props.flaggedPosts) {
- isFlagged = this.props.flaggedPosts.get(post.id) === 'true';
- }
-
- let status = '';
- if (this.props.statuses && profile) {
- status = this.props.statuses[profile.id] || 'offline';
- }
-
- const postCtl = (
-
-
-
- );
- }
-
- if ((postUserId !== userId || this.props.ownNewMessage) &&
- this.props.lastViewed !== 0 &&
- post.create_at > this.props.lastViewed &&
- !Utils.isPostEphemeral(post) &&
- !renderedLastViewed) {
- renderedLastViewed = true;
-
- // Temporary fix to solve ie11 rendering issue
- let newSeparatorId = '';
- if (!UserAgent.isInternetExplorer()) {
- newSeparatorId = 'new_message_' + post.id;
- }
- postCtls.push(
- -
-
-
-
-
- );
- }
- postCtls.push(postCtl);
- previousPostDay = currentPostDay;
- }
-
- return postCtls;
- }
-
- updateScrolling() {
- if (this.props.scrollType === ScrollTypes.BOTTOM) {
- this.scrollToBottom();
- } else if (this.props.scrollType === ScrollTypes.NEW_MESSAGE) {
- window.requestAnimationFrame(() => {
- // If separator exists scroll to it. Otherwise scroll to bottom.
- if (this.refs.newMessageSeparator) {
- var objDiv = this.refs.postlist;
- objDiv.scrollTop = this.refs.newMessageSeparator.offsetTop; //scrolls node to top of Div
- } else if (this.refs.postlist) {
- this.scrollToBottom();
- }
- });
-
- // This avoids the scroll jumping from top to bottom after the page has rendered (PLT-5025).
- if (!this.refs.newMessageSeparator) {
- this.scrollToBottom();
- }
- } else if (this.props.scrollType === ScrollTypes.POST && this.props.scrollPostId) {
- window.requestAnimationFrame(() => {
- const postNode = ReactDOM.findDOMNode(this.refs[this.props.scrollPostId]);
- if (postNode == null) {
- return;
- }
- postNode.scrollIntoView();
- if (this.refs.postlist.scrollTop === postNode.offsetTop) {
- this.refs.postlist.scrollTop -= (this.refs.postlist.offsetHeight / Constants.SCROLL_PAGE_FRACTION);
- } else {
- this.refs.postlist.scrollTop -= (this.refs.postlist.offsetHeight / Constants.SCROLL_PAGE_FRACTION) + (this.refs.postlist.scrollTop - postNode.offsetTop);
- }
- });
- } else if (this.props.scrollType === ScrollTypes.SIDEBAR_OPEN) {
- // If we are at the bottom then stay there
- if (this.wasAtBottom) {
- this.refs.postlist.scrollTop = this.refs.postlist.scrollHeight;
- } else {
- window.requestAnimationFrame(() => {
- this.jumpToPostNode.scrollIntoView();
- if (this.refs.postlist.scrollTop === this.jumpToPostNode.offsetTop) {
- this.refs.postlist.scrollTop -= (this.refs.postlist.offsetHeight / Constants.SCROLL_PAGE_FRACTION);
- } else {
- this.refs.postlist.scrollTop -= (this.refs.postlist.offsetHeight / Constants.SCROLL_PAGE_FRACTION) + (this.refs.postlist.scrollTop - this.jumpToPostNode.offsetTop);
- }
- });
- }
- } else if (this.refs.postlist.scrollHeight !== this.prevScrollHeight) {
- window.requestAnimationFrame(() => {
- if (this.jumpToPostNode && this.refs.postlist) {
- this.refs.postlist.scrollTop += (this.jumpToPostNode.offsetTop - this.prevOffsetTop);
- }
- });
- }
- }
-
- handleResize() {
- this.updateScrolling();
- }
-
- scrollToBottom() {
- this.animationFrameId = window.requestAnimationFrame(() => {
- if (this.refs.postlist) {
- this.refs.postlist.scrollTop = this.refs.postlist.scrollHeight;
- }
- });
- }
-
- scrollToBottomAnimated() {
- if (UserAgent.isIos()) {
- // JQuery animation doesn't work on iOS
- this.refs.postlist.scrollTop = this.refs.postlist.scrollHeight;
- } else {
- var postList = $(this.refs.postlist);
-
- postList.animate({scrollTop: this.refs.postlist.scrollHeight}, '500');
- }
- }
-
- getArchivesIntroMessage() {
- return (
- -
-
-
-
-
-
- );
- }
-
- checkAndUpdateScrolling() {
- if (this.props.postList != null && this.refs.postlist) {
- this.updateScrolling();
- }
- }
-
- componentDidMount() {
- if (this.props.postList != null) {
- this.updateScrolling();
- }
-
- window.addEventListener('resize', this.handleResize);
- window.addEventListener('keydown', this.handleKeyDown);
-
- PostStore.addPostDraftChangeListener(this.props.channelId, this.handlePostDraftChange);
- ScrollStore.addPostScrollListener(this.checkAndUpdateScrolling);
- }
-
- handlePostDraftChange = (draft) => {
- // this.state.draft isn't used anywhere, but this will cause an update to the scroll position
- // without causing two updates to trigger when something else changes
- this.setState({
- draft
- });
- }
-
- componentWillUnmount() {
- window.cancelAnimationFrame(this.animationFrameId);
- window.removeEventListener('resize', this.handleResize);
- window.removeEventListener('keydown', this.handleKeyDown);
- ScrollStore.removePostScrollListener(this.checkAndUpdateScrolling);
- this.scrollStopAction.cancel();
-
- PostStore.removePostDraftChangeListener(this.props.channelId, this.handlePostDraftChange);
- }
-
- componentDidUpdate() {
- this.checkAndUpdateScrolling();
- }
-
- childComponentDidUpdate() {
- this.checkAndUpdateScrolling();
- }
-
- getPostList = () => {
- return this.refs.postlist;
- }
-
- render() {
- // Create intro message or top loadmore link
- let moreMessagesTop;
- if (this.props.showMoreMessagesTop) {
- moreMessagesTop = (
-
-
-
-
-
- );
- }
-}
-
-PostList.defaultProps = {
- lastViewed: 0,
- lastViewedBottom: Number.MAX_VALUE,
- ownNewMessage: false
-};
-
-PostList.propTypes = {
- postList: PropTypes.object,
- profiles: PropTypes.object,
- channel: PropTypes.object,
- channelId: PropTypes.string.isRequired,
- currentUser: PropTypes.object,
- scrollPostId: PropTypes.string,
- scrollType: PropTypes.number,
- postListScrolled: PropTypes.func.isRequired,
- showMoreMessagesTop: PropTypes.bool,
- showMoreMessagesBottom: PropTypes.bool,
- lastViewed: PropTypes.number,
- lastViewedBottom: PropTypes.number,
- ownNewMessage: PropTypes.bool,
- postsToHighlight: PropTypes.object,
- displayNameType: PropTypes.string,
- displayPostsInCenter: PropTypes.bool,
- compactDisplay: PropTypes.bool,
- previewsCollapsed: PropTypes.string,
- useMilitaryTime: PropTypes.bool.isRequired,
- isFocusPost: PropTypes.bool,
- flaggedPosts: PropTypes.object,
- statuses: PropTypes.object,
- isBusy: PropTypes.bool
-};
diff --git a/webapp/components/post_view/components/post_message_container.jsx b/webapp/components/post_view/components/post_message_container.jsx
deleted file mode 100644
index 91ca038288..0000000000
--- a/webapp/components/post_view/components/post_message_container.jsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import PropTypes from 'prop-types';
-
-// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
-// See License.txt for license information.
-
-import React from 'react';
-
-import ChannelStore from 'stores/channel_store.jsx';
-import EmojiStore from 'stores/emoji_store.jsx';
-import PreferenceStore from 'stores/preference_store.jsx';
-import {Preferences} from 'utils/constants.jsx';
-import TeamStore from 'stores/team_store.jsx';
-import UserStore from 'stores/user_store.jsx';
-
-import PostMessageView from './post_message_view.jsx';
-
-export default class PostMessageContainer extends React.Component {
- static propTypes = {
- post: PropTypes.object.isRequired,
- options: PropTypes.object,
- lastPostCount: PropTypes.number
- };
-
- static defaultProps = {
- options: {}
- };
-
- constructor(props) {
- super(props);
-
- this.onEmojiChange = this.onEmojiChange.bind(this);
- this.onPreferenceChange = this.onPreferenceChange.bind(this);
- this.onUserChange = this.onUserChange.bind(this);
- this.onChannelChange = this.onChannelChange.bind(this);
-
- const mentionKeys = UserStore.getCurrentMentionKeys();
- mentionKeys.push('@here');
-
- this.state = {
- emojis: EmojiStore.getEmojis(),
- enableFormatting: PreferenceStore.getBool(Preferences.CATEGORY_ADVANCED_SETTINGS, 'formatting', true),
- mentionKeys,
- usernameMap: UserStore.getProfilesUsernameMap(),
- channelNamesMap: ChannelStore.getChannelNamesMap(),
- team: TeamStore.getCurrent()
- };
- }
-
- componentDidMount() {
- EmojiStore.addChangeListener(this.onEmojiChange);
- PreferenceStore.addChangeListener(this.onPreferenceChange);
- UserStore.addChangeListener(this.onUserChange);
- ChannelStore.addChangeListener(this.onChannelChange);
- }
-
- componentWillUnmount() {
- EmojiStore.removeChangeListener(this.onEmojiChange);
- PreferenceStore.removeChangeListener(this.onPreferenceChange);
- UserStore.removeChangeListener(this.onUserChange);
- ChannelStore.removeChangeListener(this.onChannelChange);
- }
-
- onEmojiChange() {
- this.setState({
- emojis: EmojiStore.getEmojis()
- });
- }
-
- onPreferenceChange() {
- this.setState({
- enableFormatting: PreferenceStore.getBool(Preferences.CATEGORY_ADVANCED_SETTINGS, 'formatting', true)
- });
- }
-
- onUserChange() {
- const mentionKeys = UserStore.getCurrentMentionKeys();
- mentionKeys.push('@here');
-
- this.setState({
- mentionKeys,
- usernameMap: UserStore.getProfilesUsernameMap()
- });
- }
-
- onChannelChange() {
- this.setState({
- channelNamesMap: ChannelStore.getChannelNamesMap()
- });
- }
-
- render() {
- return (
-
-
-
-
-
- {moreMessagesTop}
- {postElements}
- {moreMessagesBottom}
-
-
+
+
+ );
+ }
+}
diff --git a/webapp/components/post_view/components/pending_post_options.jsx b/webapp/components/post_view/failed_post_options/failed_post_options.jsx
similarity index 71%
rename from webapp/components/post_view/components/pending_post_options.jsx
rename to webapp/components/post_view/failed_post_options/failed_post_options.jsx
index 9742a74bfd..f28de343b7 100644
--- a/webapp/components/post_view/components/pending_post_options.jsx
+++ b/webapp/components/post_view/failed_post_options/failed_post_options.jsx
@@ -1,19 +1,28 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
-import PostStore from 'stores/post_store.jsx';
-
-import {queuePost} from 'actions/post_actions.jsx';
-
-import Constants from 'utils/constants.jsx';
-
-import {FormattedMessage} from 'react-intl';
-
-import PropTypes from 'prop-types';
+import {createPost} from 'actions/post_actions.jsx';
import React from 'react';
+import PropTypes from 'prop-types';
+import {FormattedMessage} from 'react-intl';
+
+export default class FailedPostOptions extends React.Component {
+ static propTypes = {
+
+ /*
+ * The failed post
+ */
+ post: PropTypes.object.isRequired,
+ actions: PropTypes.shape({
+
+ /**
+ * The function to delete the post
+ */
+ removePost: PropTypes.func.isRequired
+ }).isRequired
+ }
-export default class PendingPostOptions extends React.Component {
constructor(props) {
super(props);
@@ -24,6 +33,7 @@ export default class PendingPostOptions extends React.Component {
this.state = {};
}
+
retryPost(e) {
e.preventDefault();
@@ -33,8 +43,12 @@ export default class PendingPostOptions extends React.Component {
this.submitting = true;
- var post = this.props.post;
- queuePost(post, true, null,
+ const post = {...this.props.post};
+ Reflect.deleteProperty(post, 'id');
+ createPost(post,
+ () => {
+ this.submitting = false;
+ },
(err) => {
if (err.id === 'api.post.create_post.root_id.app_error') {
this.showPostDeletedModal();
@@ -45,18 +59,13 @@ export default class PendingPostOptions extends React.Component {
this.submitting = false;
}
);
-
- post.state = Constants.POST_LOADING;
- PostStore.updatePendingPost(post);
- this.forceUpdate();
}
+
cancelPost(e) {
e.preventDefault();
-
- var post = this.props.post;
- PostStore.removePendingPost(post.channel_id, post.pending_post_id);
- this.forceUpdate();
+ this.props.actions.removePost(this.props.post);
}
+
render() {
return (
);
}
}
-
-PendingPostOptions.propTypes = {
- post: PropTypes.object
-};
diff --git a/webapp/components/post_view/failed_post_options/index.js b/webapp/components/post_view/failed_post_options/index.js
new file mode 100644
index 0000000000..bb8dde8930
--- /dev/null
+++ b/webapp/components/post_view/failed_post_options/index.js
@@ -0,0 +1,24 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {removePost} from 'mattermost-redux/actions/posts';
+
+import FailedPostOptions from './failed_post_options.jsx';
+
+function mapStateToProps(state, ownProps) {
+ return {
+ ...ownProps
+ };
+}
+
+function mapDispatchToProps(dispatch) {
+ return {
+ actions: bindActionCreators({
+ removePost
+ }, dispatch)
+ };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(FailedPostOptions);
diff --git a/webapp/components/post_view/components/floating_timestamp.jsx b/webapp/components/post_view/floating_timestamp.jsx
similarity index 70%
rename from webapp/components/post_view/components/floating_timestamp.jsx
rename to webapp/components/post_view/floating_timestamp.jsx
index 34e6ce006a..f0f6af60e4 100644
--- a/webapp/components/post_view/components/floating_timestamp.jsx
+++ b/webapp/components/post_view/floating_timestamp.jsx
@@ -3,16 +3,15 @@
import {FormattedDate} from 'react-intl';
+import React from 'react';
import PropTypes from 'prop-types';
-import React from 'react';
-import PureRenderMixin from 'react-addons-pure-render-mixin';
-
-export default class FloatingTimestamp extends React.Component {
- constructor(props) {
- super(props);
-
- this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
+export default class FloatingTimestamp extends React.PureComponent {
+ static propTypes = {
+ isScrolling: PropTypes.bool.isRequired,
+ isMobile: PropTypes.bool,
+ createAt: PropTypes.number,
+ isRhsPost: PropTypes.bool
}
render() {
@@ -52,10 +51,3 @@ export default class FloatingTimestamp extends React.Component {
);
}
}
-
-FloatingTimestamp.propTypes = {
- isScrolling: PropTypes.bool.isRequired,
- isMobile: PropTypes.bool,
- createAt: PropTypes.number,
- isRhsPost: PropTypes.bool
-};
diff --git a/webapp/components/post_view/index.js b/webapp/components/post_view/index.js
index b42b486aba..ad0270cdd2 100644
--- a/webapp/components/post_view/index.js
+++ b/webapp/components/post_view/index.js
@@ -3,22 +3,52 @@
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
-import {viewChannel} from 'mattermost-redux/actions/channels';
-import PostViewCache from './post_view_cache.jsx';
+import {makeGetPostsInChannel, makeGetPostsAroundPost} from 'mattermost-redux/selectors/entities/posts';
+import {get} from 'mattermost-redux/selectors/entities/preferences';
+import {getChannel} from 'mattermost-redux/selectors/entities/channels';
+import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
+import {getPosts, getPostsBefore, getPostsAfter, getPostThread} from 'mattermost-redux/actions/posts';
+import {increasePostVisibility} from 'actions/post_actions.jsx';
+import {Preferences} from 'utils/constants.jsx';
-function mapStateToProps(state, ownProps) {
- return {
- ...ownProps
+import PostList from './post_list.jsx';
+
+function makeMapStateToProps() {
+ const getPostsInChannel = makeGetPostsInChannel();
+ const getPostsAroundPost = makeGetPostsAroundPost();
+
+ return function mapStateToProps(state, ownProps) {
+ let posts;
+ if (ownProps.focusedPostId) {
+ posts = getPostsAroundPost(state, ownProps.focusedPostId, ownProps.channelId);
+ } else {
+ posts = getPostsInChannel(state, ownProps.channelId);
+ }
+
+ return {
+ channel: getChannel(state, ownProps.channelId),
+ lastViewedAt: state.views.channel.lastChannelViewTime[ownProps.channelId],
+ posts,
+ postVisibility: state.views.channel.postVisibility[ownProps.channelId],
+ loadingPosts: state.views.channel.loadingPosts[ownProps.channelId],
+ focusedPostId: ownProps.focusedPostId,
+ currentUserId: getCurrentUserId(state),
+ fullWidth: get(state, Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN
+ };
};
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators({
- viewChannel
+ getPosts,
+ getPostsBefore,
+ getPostsAfter,
+ getPostThread,
+ increasePostVisibility
}, dispatch)
};
}
-export default connect(mapStateToProps, mapDispatchToProps)(PostViewCache);
+export default connect(makeMapStateToProps, mapDispatchToProps)(PostList);
diff --git a/webapp/components/post_view/components/new_message_indicator.jsx b/webapp/components/post_view/new_message_indicator.jsx
similarity index 90%
rename from webapp/components/post_view/components/new_message_indicator.jsx
rename to webapp/components/post_view/new_message_indicator.jsx
index cafdc128a0..d5fb6c1d3d 100644
--- a/webapp/components/post_view/components/new_message_indicator.jsx
+++ b/webapp/components/post_view/new_message_indicator.jsx
@@ -1,11 +1,16 @@
-import PropTypes from 'prop-types';
-
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
+
import React from 'react';
+import PropTypes from 'prop-types';
import {FormattedMessage} from 'react-intl';
-export default class NewMessageIndicator extends React.Component {
+export default class NewMessageIndicator extends React.PureComponent {
+ static propTypes = {
+ onClick: PropTypes.func.isRequired,
+ newMessages: PropTypes.number
+ }
+
constructor(props) {
super(props);
this.state = {
@@ -13,6 +18,7 @@ export default class NewMessageIndicator extends React.Component {
rendered: false
};
}
+
componentWillReceiveProps(nextProps) {
if (nextProps.newMessages > 0) {
this.setState({rendered: true}, () => {
@@ -22,6 +28,7 @@ export default class NewMessageIndicator extends React.Component {
this.setState({visible: false});
}
}
+
render() {
let className = 'new-messages__button';
if (this.state.visible > 0) {
@@ -56,11 +63,7 @@ export default class NewMessageIndicator extends React.Component {
this.setState({rendered: this.state.visible});
}
}
+
NewMessageIndicator.defaultProps = {
newMessages: 0
};
-
-NewMessageIndicator.propTypes = {
- onClick: PropTypes.func.isRequired,
- newMessages: PropTypes.number
-};
diff --git a/webapp/components/post_view/post/index.js b/webapp/components/post_view/post/index.js
new file mode 100644
index 0000000000..1e195f920e
--- /dev/null
+++ b/webapp/components/post_view/post/index.js
@@ -0,0 +1,33 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {connect} from 'react-redux';
+
+import {getCurrentUser, getUser, getStatusForUserId} from 'mattermost-redux/selectors/entities/users';
+import {get} from 'mattermost-redux/selectors/entities/preferences';
+import {getPost} from 'mattermost-redux/selectors/entities/posts';
+
+import {Preferences} from 'utils/constants.jsx';
+
+import Post from './post.jsx';
+
+function mapStateToProps(state, ownProps) {
+ const detailedPost = ownProps.post;
+ return {
+ post: getPost(state, detailedPost.id),
+ lastPostCount: ownProps.lastPostCount,
+ user: getUser(state, ownProps.post.user_id),
+ status: getStatusForUserId(state, ownProps.post.user_id),
+ currentUser: getCurrentUser(state),
+ isFirstReply: Boolean(detailedPost.isFirstReply && detailedPost.commentedOnPost),
+ highlight: detailedPost.highlight,
+ consecutivePostByUser: detailedPost.consecutivePostByUser,
+ previousPostIsComment: detailedPost.previousPostIsComment,
+ replyCount: detailedPost.replyCount,
+ isCommentMention: detailedPost.isCommentMention,
+ center: get(state, Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED,
+ compactDisplay: get(state, Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT
+ };
+}
+
+export default connect(mapStateToProps)(Post);
diff --git a/webapp/components/post_view/components/post.jsx b/webapp/components/post_view/post/post.jsx
similarity index 63%
rename from webapp/components/post_view/components/post.jsx
rename to webapp/components/post_view/post/post.jsx
index b9823396d9..eda4405bb8 100644
--- a/webapp/components/post_view/components/post.jsx
+++ b/webapp/components/post_view/post/post.jsx
@@ -1,46 +1,99 @@
-import PropTypes from 'prop-types';
-
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
-import React, {Component} from 'react';
-
+import PostHeader from 'components/post_view/post_header';
+import PostBody from 'components/post_view/post_body';
import ProfilePicture from 'components/profile_picture.jsx';
+import Constants from 'utils/constants.jsx';
+const ActionTypes = Constants.ActionTypes;
+import {Posts} from 'mattermost-redux/constants';
+
+import * as Utils from 'utils/utils.jsx';
+import * as PostUtils from 'utils/post_utils.jsx';
import AppDispatcher from 'dispatcher/app_dispatcher.jsx';
-import Constants, {ActionTypes} from 'utils/constants.jsx';
-import * as PostUtils from 'utils/post_utils.jsx';
-import * as Utils from 'utils/utils.jsx';
+import React from 'react';
+import PropTypes from 'prop-types';
-import PostBody from './post_body.jsx';
-import PostHeader from './post_header.jsx';
-
-export default class Post extends Component {
+export default class Post extends React.PureComponent {
static propTypes = {
+
+ /**
+ * The post to render
+ */
post: PropTypes.object.isRequired,
- parentPost: PropTypes.object,
+
+ /**
+ * The user who created the post
+ */
user: PropTypes.object,
- sameUser: PropTypes.bool,
- sameRoot: PropTypes.bool,
- hideProfilePic: PropTypes.bool,
- lastPostCount: PropTypes.number,
- isLastComment: PropTypes.bool,
- shouldHighlight: PropTypes.bool,
- displayNameType: PropTypes.string,
- currentUser: PropTypes.object.isRequired,
- center: PropTypes.bool,
- compactDisplay: PropTypes.bool,
- previewCollapsed: PropTypes.string,
- commentCount: PropTypes.number,
- isCommentMention: PropTypes.bool,
- useMilitaryTime: PropTypes.bool.isRequired,
- isFlagged: PropTypes.bool,
+
+ /**
+ * The status of the poster
+ */
status: PropTypes.string,
+
+ /**
+ * The logged in user
+ */
+ currentUser: PropTypes.object.isRequired,
+
+ /**
+ * Set to center the post
+ */
+ center: PropTypes.bool,
+
+ /**
+ * Set to render post compactly
+ */
+ compactDisplay: PropTypes.bool,
+
+ /**
+ * Set to render a preview of the parent post above this reply
+ */
+ isFirstReply: PropTypes.bool,
+
+ /**
+ * Set to highlight the background of the post
+ */
+ highlight: PropTypes.bool,
+
+ /**
+ * Set to render this post as if it was attached to the previous post
+ */
+ consecutivePostByUser: PropTypes.bool,
+
+ /**
+ * Set if the previous post is a comment
+ */
+ previousPostIsComment: PropTypes.bool,
+
+ /**
+ * Set to render this comment as a mention
+ */
+ isCommentMention: PropTypes.bool,
+
+ /**
+ * The number of replies in the same thread as this post
+ */
+ replyCount: PropTypes.number,
+
+ /**
+ * Set to mark the poster as in a webrtc call
+ */
isBusy: PropTypes.bool,
- childComponentDidUpdateFunction: PropTypes.func,
+
+ /**
+ * The post count used for selenium tests
+ */
+ lastPostCount: PropTypes.number,
+
+ /**
+ * Function to get the post list HTML element
+ */
getPostList: PropTypes.func.isRequired
- };
+ }
constructor(props) {
super(props);
@@ -75,91 +128,23 @@ export default class Post extends Component {
this.refs.header.forceUpdate();
}
- shouldComponentUpdate(nextProps, nextState) {
- if (!Utils.areObjectsEqual(nextProps.post, this.props.post)) {
- return true;
- }
-
- if (nextProps.sameRoot !== this.props.sameRoot) {
- return true;
- }
-
- if (nextProps.sameUser !== this.props.sameUser) {
- return true;
- }
-
- if (nextProps.displayNameType !== this.props.displayNameType) {
- return true;
- }
-
- if (nextProps.commentCount !== this.props.commentCount) {
- return true;
- }
-
- if (nextProps.isCommentMention !== this.props.isCommentMention) {
- return true;
- }
-
- if (nextProps.shouldHighlight !== this.props.shouldHighlight) {
- return true;
- }
-
- if (nextProps.center !== this.props.center) {
- return true;
- }
-
- if (nextProps.compactDisplay !== this.props.compactDisplay) {
- return true;
- }
-
- if (nextProps.previewCollapsed !== this.props.previewCollapsed) {
- return true;
- }
-
- if (nextProps.useMilitaryTime !== this.props.useMilitaryTime) {
- return true;
- }
-
- if (nextProps.isFlagged !== this.props.isFlagged) {
- return true;
- }
-
- if (nextProps.status !== this.props.status) {
- return true;
- }
-
- if (!Utils.areObjectsEqual(nextProps.user, this.props.user)) {
- return true;
- }
-
- if (nextState.dropdownOpened !== this.state.dropdownOpened) {
- return true;
- }
-
- if (nextProps.isBusy !== this.props.isBusy) {
- return true;
- }
-
- if (nextProps.lastPostCount !== this.props.lastPostCount) {
- return true;
- }
-
- return false;
- }
-
getClassName = (post, isSystemMessage, fromWebhook) => {
let className = 'post';
- if (post.state === Constants.POST_DELETED || post.state === Constants.POST_FAILED) {
+ if (post.failed || post.state === Posts.POST_DELETED) {
className += ' post--hide-controls';
}
- if (this.props.shouldHighlight) {
+ if (this.props.highlight) {
className += ' post--highlight';
}
- let rootUser;
- if (this.props.sameRoot) {
+ let rootUser = '';
+ if (this.props.isFirstReply) {
+ rootUser = 'other--root';
+ } else if (!post.root_id && !this.props.previousPostIsComment && this.props.consecutivePostByUser) {
+ rootUser = 'same--root';
+ } else if (post.root_id) {
rootUser = 'same--root';
} else {
rootUser = 'other--root';
@@ -171,14 +156,14 @@ export default class Post extends Component {
}
let sameUserClass = '';
- if (this.props.sameUser) {
+ if (this.props.consecutivePostByUser) {
sameUserClass = 'same--user';
}
let postType = '';
if (post.root_id && post.root_id.length > 0) {
postType = 'post--comment';
- } else if (this.props.commentCount > 0) {
+ } else if (this.props.replyCount > 0) {
postType = 'post--root';
sameUserClass = '';
rootUser = '';
@@ -209,7 +194,6 @@ export default class Post extends Component {
render() {
const post = this.props.post;
- const parentPost = this.props.parentPost;
const mattermostLogo = Constants.MATTERMOST_ICON_SVG;
const isSystemMessage = PostUtils.isSystemMessage(post);
@@ -242,7 +226,7 @@ export default class Post extends Component {
src={PostUtils.getProfilePicSrcForPost(post, timestamp)}
/>
);
- } else if (isSystemMessage) {
+ } else if (PostUtils.isSystemMessage(post)) {
profilePic = (
+
+
+