diff --git a/webapp/components/post_view/components/post.jsx b/webapp/components/post_view/components/post.jsx index f5c96d2bc7..8ca84aa205 100644 --- a/webapp/components/post_view/components/post.jsx +++ b/webapp/components/post_view/components/post.jsx @@ -1,32 +1,53 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -import PostHeader from './post_header.jsx'; -import PostBody from './post_body.jsx'; +import React, {Component, PropTypes} from 'react'; + import ProfilePicture from 'components/profile_picture.jsx'; -import Constants from 'utils/constants.jsx'; -const ActionTypes = Constants.ActionTypes; - -import * as Utils from 'utils/utils.jsx'; -import * as PostUtils from 'utils/post_utils.jsx'; import AppDispatcher from 'dispatcher/app_dispatcher.jsx'; -import React from 'react'; +import Constants, {ActionTypes} from 'utils/constants.jsx'; +import * as PostUtils from 'utils/post_utils.jsx'; +import * as Utils from 'utils/utils.jsx'; + +import PostBody from './post_body.jsx'; +import PostHeader from './post_header.jsx'; + +export default class Post extends Component { + static propTypes = { + post: PropTypes.object.isRequired, + parentPost: PropTypes.object, + user: PropTypes.object, + sameUser: PropTypes.bool, + sameRoot: PropTypes.bool, + hideProfilePic: PropTypes.bool, + isLastPost: PropTypes.bool, + 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, + status: PropTypes.string, + isBusy: PropTypes.bool, + childComponentDidUpdateFunction: PropTypes.func + }; -export default class Post extends React.Component { constructor(props) { super(props); - this.handleCommentClick = this.handleCommentClick.bind(this); - this.handleDropdownOpened = this.handleDropdownOpened.bind(this); - this.forceUpdateInfo = this.forceUpdateInfo.bind(this); - this.state = { dropdownOpened: false }; } - handleCommentClick(e) { + + handleCommentClick = (e) => { e.preventDefault(); AppDispatcher.handleServerAction({ @@ -39,12 +60,14 @@ export default class Post extends React.Component { results: null }); } - handleDropdownOpened(opened) { + + handleDropdownOpened = (opened) => { this.setState({ dropdownOpened: opened }); } - forceUpdateInfo() { + + forceUpdateInfo = () => { this.refs.info.forceUpdate(); this.refs.header.forceUpdate(); } @@ -116,26 +139,17 @@ export default class Post extends React.Component { return false; } - render() { - const post = this.props.post; - const parentPost = this.props.parentPost; - const mattermostLogo = Constants.MATTERMOST_ICON_SVG; - if (!post.props) { - post.props = {}; - } + getClassName = (post, isSystemMessage, fromWebhook) => { + let className = 'post'; - let type = 'Post'; - if (post.root_id && post.root_id.length > 0) { - type = 'Comment'; - } - - let hideControls = ''; if (post.state === Constants.POST_DELETED || post.state === Constants.POST_FAILED) { - hideControls = 'post--hide-controls'; + className += ' post--hide-controls'; } - const commentCount = this.props.commentCount; + if (this.props.shouldHighlight) { + className += ' post--highlight'; + } let rootUser; if (this.props.sameRoot) { @@ -145,10 +159,55 @@ export default class Post extends React.Component { } let currentUserCss = ''; - if (this.props.currentUser.id === post.user_id && !post.props.from_webhook && !PostUtils.isSystemMessage(post)) { + if (this.props.currentUser.id === post.user_id && !fromWebhook && !isSystemMessage) { currentUserCss = 'current--user'; } + let sameUserClass = ''; + if (this.props.sameUser) { + sameUserClass = 'same--user'; + } + + let postType = ''; + if (post.root_id && post.root_id.length > 0) { + postType = 'post--comment'; + } else if (this.props.commentCount > 0) { + postType = 'post--root'; + sameUserClass = ''; + rootUser = ''; + } + + if (isSystemMessage) { + className += ' post--system'; + sameUserClass = ''; + currentUserCss = ''; + postType = ''; + rootUser = ''; + } + + if (this.props.compactDisplay) { + className += ' post--compact'; + } + + if (this.state.dropdownOpened) { + className += ' post--hovered'; + } + + if (post.is_pinned) { + className += ' post--pinned'; + } + + return className + ' ' + sameUserClass + ' ' + rootUser + ' ' + postType + ' ' + currentUserCss; + } + + render() { + const post = this.props.post; + const parentPost = this.props.parentPost; + const mattermostLogo = Constants.MATTERMOST_ICON_SVG; + + const isSystemMessage = PostUtils.isSystemMessage(post); + const fromWebhook = post.props && post.props.from_webhook === 'true'; + let timestamp = 0; if (!this.props.user || this.props.user.last_picture_update == null) { timestamp = this.props.currentUser.last_picture_update; @@ -156,36 +215,8 @@ export default class Post extends React.Component { timestamp = this.props.user.last_picture_update; } - let sameUserClass = ''; - if (this.props.sameUser) { - sameUserClass = 'same--user'; - } - - let shouldHighlightClass = ''; - if (this.props.shouldHighlight) { - shouldHighlightClass = 'post--highlight'; - } - - let postType = ''; - if (type !== 'Post') { - postType = 'post--comment'; - } else if (commentCount > 0) { - postType = 'post--root'; - sameUserClass = ''; - rootUser = ''; - } - - let systemMessageClass = ''; - if (PostUtils.isSystemMessage(post)) { - systemMessageClass = 'post--system'; - sameUserClass = ''; - currentUserCss = ''; - postType = ''; - rootUser = ''; - } - let status = this.props.status; - if (post.props && post.props.from_webhook === 'true') { + if (fromWebhook) { status = null; } @@ -198,13 +229,13 @@ export default class Post extends React.Component { /> ); - if (post.props && post.props.from_webhook) { + if (fromWebhook) { profilePic = ( ); - } else if (PostUtils.isSystemMessage(post)) { + } else if (isSystemMessage) { profilePic = ( {profilePic}); - let dropdownOpenedClass = ''; - if (this.state.dropdownOpened) { - dropdownOpenedClass = 'post--hovered'; - } - return (
{ @@ -256,7 +279,7 @@ export default class Post extends React.Component { >
{profilePicContainer} @@ -265,7 +288,7 @@ export default class Post extends React.Component { ref='header' post={post} sameRoot={this.props.sameRoot} - commentCount={commentCount} + commentCount={this.props.commentCount} handleCommentClick={this.handleCommentClick} handleDropdownOpened={this.handleDropdownOpened} isLastComment={this.props.isLastComment} @@ -298,27 +321,3 @@ export default class Post extends React.Component { ); } } - -Post.propTypes = { - post: React.PropTypes.object.isRequired, - parentPost: React.PropTypes.object, - user: React.PropTypes.object, - sameUser: React.PropTypes.bool, - sameRoot: React.PropTypes.bool, - hideProfilePic: React.PropTypes.bool, - isLastPost: React.PropTypes.bool, - isLastComment: React.PropTypes.bool, - shouldHighlight: React.PropTypes.bool, - displayNameType: React.PropTypes.string, - currentUser: React.PropTypes.object.isRequired, - center: React.PropTypes.bool, - compactDisplay: React.PropTypes.bool, - previewCollapsed: React.PropTypes.string, - commentCount: React.PropTypes.number, - isCommentMention: React.PropTypes.bool, - useMilitaryTime: React.PropTypes.bool.isRequired, - isFlagged: React.PropTypes.bool, - status: React.PropTypes.string, - isBusy: React.PropTypes.bool, - childComponentDidUpdateFunction: React.PropTypes.func -}; diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx index e7d55813d0..fb09728043 100644 --- a/webapp/components/rhs_comment.jsx +++ b/webapp/components/rhs_comment.jsx @@ -360,6 +360,28 @@ export default class RhsComment extends React.Component { addReaction(this.props.post.channel_id, this.props.post.id, emojiName); } + getClassName = (post, isSystemMessage) => { + let className = 'post post--thread'; + + if (this.props.currentUser.id === post.user_id) { + className += ' current--user'; + } + + if (isSystemMessage) { + className += ' post--system'; + } + + if (this.props.compactDisplay) { + className += 'post--compact'; + } + + if (post.is_pinned) { + className += ' post--pinned'; + } + + return className; + } + render() { const post = this.props.post; const flagIcon = Constants.FLAG_ICON_SVG; @@ -369,11 +391,6 @@ export default class RhsComment extends React.Component { const isPending = post.state === Constants.POST_FAILED || post.state === Constants.POST_LOADING; const isSystemMessage = PostUtils.isSystemMessage(post); - var currentUserCss = ''; - if (this.props.currentUser.id === post.user_id) { - currentUserCss = 'current--user'; - } - var timestamp = this.props.currentUser.last_picture_update; let status = this.props.status; @@ -445,11 +462,6 @@ export default class RhsComment extends React.Component { postClass += ' post--edited'; } - let systemMessageClass = ''; - if (isSystemMessage) { - systemMessageClass = 'post--system'; - } - let profilePic = (
{profilePicContainer} diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx index 023387bb42..65bc52f730 100644 --- a/webapp/components/rhs_root_post.jsx +++ b/webapp/components/rhs_root_post.jsx @@ -176,6 +176,27 @@ export default class RhsRootPost extends React.Component { addReaction(this.props.post.channel_id, this.props.post.id, emojiName); } + getClassName = (post, isSystemMessage) => { + let className = 'post post--root post--thread'; + if (UserStore.getCurrentId() === post.user_id) { + className += ' current--user'; + } + + if (isSystemMessage) { + className += ' post--system'; + } + + if (this.props.compactDisplay) { + className += 'post--compact'; + } + + if (post.is_pinned) { + className += ' post--pinned'; + } + + return className; + } + render() { const post = this.props.post; const user = this.props.user; @@ -196,16 +217,6 @@ export default class RhsRootPost extends React.Component { type = 'Comment'; } - var userCss = ''; - if (UserStore.getCurrentId() === post.user_id) { - userCss = 'current--user'; - } - - var systemMessageClass = ''; - if (isSystemMessage) { - systemMessageClass = 'post--system'; - } - var channelName; if (channel) { if (channel.type === 'D') { @@ -493,11 +504,7 @@ export default class RhsRootPost extends React.Component { ); } - let compactClass = ''; - let postClass = ''; if (this.props.compactDisplay) { - compactClass = 'post--compact'; - if (post.props && post.props.from_webhook) { profilePic = (
{channelName}