diff --git a/webapp/components/common/comment_icon.jsx b/webapp/components/common/comment_icon.jsx
new file mode 100644
index 0000000000..e8be773e5b
--- /dev/null
+++ b/webapp/components/common/comment_icon.jsx
@@ -0,0 +1,55 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+import Constants from 'utils/constants.jsx';
+import * as Utils from 'utils/utils.jsx';
+
+export default function CommentIcon(props) {
+ let commentCountSpan = '';
+ let iconStyle = 'comment-icon__container';
+ if (props.commentCount > 0) {
+ iconStyle += ' icon--show';
+ commentCountSpan = (
+
+ {props.commentCount}
+
+ );
+ } else if (props.searchStyle !== '') {
+ iconStyle = iconStyle + ' ' + props.searchStyle;
+ }
+
+ let commentIconId = props.idPrefix;
+ if (props.idCount > -1) {
+ commentIconId += props.idCount;
+ }
+
+ return (
+
+
+ {commentCountSpan}
+
+ );
+}
+
+CommentIcon.propTypes = {
+ idPrefix: React.PropTypes.string.isRequired,
+ idCount: React.PropTypes.number,
+ handleCommentClick: React.PropTypes.func.isRequired,
+ searchStyle: React.PropTypes.string,
+ commentCount: React.PropTypes.number
+};
+
+CommentIcon.defaultProps = {
+ idCount: -1,
+ searchStyle: '',
+ commentCount: 0
+};
\ No newline at end of file
diff --git a/webapp/components/post_view/components/post_info.jsx b/webapp/components/post_view/components/post_info.jsx
index 1496429b3a..3833f50587 100644
--- a/webapp/components/post_view/components/post_info.jsx
+++ b/webapp/components/post_view/components/post_info.jsx
@@ -9,6 +9,7 @@ import PostFlagIcon from 'components/common/post_flag_icon.jsx';
import * as GlobalActions from 'actions/global_actions.jsx';
import * as PostActions from 'actions/post_actions.jsx';
+import CommentIcon from 'components/common/comment_icon.jsx';
import * as Utils from 'utils/utils.jsx';
import * as PostUtils from 'utils/post_utils.jsx';
@@ -342,30 +343,13 @@ export default class PostInfo extends React.Component {
let comments = null;
let react = null;
if (!isEphemeral && !isPending && !isSystemMessage) {
- let showCommentClass;
- let commentCountText;
- if (this.props.commentCount >= 1) {
- showCommentClass = ' icon--show';
- commentCountText = this.props.commentCount;
- } else {
- showCommentClass = '';
- commentCountText = '';
- }
-
comments = (
-
-
-
- {commentCountText}
-
-
+