diff --git a/client/coral-embed-stream/src/components/AllCommentsPane.js b/client/coral-embed-stream/src/components/AllCommentsPane.js
index 6c5d6bb23..c141f0618 100644
--- a/client/coral-embed-stream/src/components/AllCommentsPane.js
+++ b/client/coral-embed-stream/src/components/AllCommentsPane.js
@@ -5,7 +5,7 @@ import IgnoredCommentTombstone from './IgnoredCommentTombstone';
import NewCount from './NewCount';
import {TransitionGroup} from 'react-transition-group';
import {forEachError} from 'coral-framework/utils';
-import Comment from '../components/Comment';
+import Comment from '../containers/Comment';
const hasComment = (nodes, id) => nodes.some((node) => node.id === id);
diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js
index 6c231f4ae..39c3b5edf 100644
--- a/client/coral-embed-stream/src/components/Comment.js
+++ b/client/coral-embed-stream/src/components/Comment.js
@@ -24,6 +24,7 @@ import InactiveCommentLabel from './InactiveCommentLabel';
import {EditableCommentContent} from './EditableCommentContent';
import {getActionSummary, iPerformedThisAction, forEachError, isCommentActive} from 'coral-framework/utils';
import t from 'coral-framework/services/i18n';
+import CommentContainer from '../containers/Comment';
const isStaff = (tags) => !tags.every((t) => t.tag.name !== 'STAFF');
const hasTag = (tags, lookupTag) => !!tags.filter((t) => t.tag.name === lookupTag).length;
@@ -86,7 +87,6 @@ export default class Comment extends React.Component {
// Whether the comment should be editable (e.g. after a commenter clicking the 'Edit' button on their own comment)
isEditing: false,
replyBoxVisible: false,
- animateEnter: false,
loadingState: '',
...resetCursors({}, props),
};
@@ -112,22 +112,6 @@ export default class Comment extends React.Component {
}
}
- componentWillEnter(callback) {
- callback();
- const userId = this.props.currentUser ? this.props.currentUser.id : null;
- if (this.props.comment.id.indexOf('pending') >= 0) {
- return;
- }
- if (userId && this.props.comment.user.id === userId) {
-
- // This comment was just added by currentUser.
- if (Date.now() - Number(new Date(this.props.comment.created_at)) < 30 * 1000) {
- return;
- }
- }
- this.setState({animateEnter: true});
- }
-
static propTypes = {
// id of currently opened ReplyBox. tracked in Stream.js
@@ -315,6 +299,7 @@ export default class Comment extends React.Component {
showSignInDialog,
liveUpdates,
commentIsIgnored,
+ animateEnter,
commentClassNames = []
} = this.props;
@@ -367,7 +352,7 @@ export default class Comment extends React.Component {
styles[`rootLevel${depth}`],
{
...conditionalClassNames,
- [styles.enter]: this.state.animateEnter,
+ [styles.enter]: animateEnter,
},
);
@@ -542,7 +527,7 @@ export default class Comment extends React.Component {
{view.map((reply) => {
return commentIsIgnored(reply)
?
- : {
+ class WithAnimateEnter extends React.Component {
+ state = {
+ animateEnter: false,
+ };
+
+ componentWillEnter(callback) {
+ callback();
+ const userId = this.props.currentUser ? this.props.currentUser.id : null;
+ if (this.props.comment.id.indexOf('pending') >= 0) {
+ return;
+ }
+ if (userId && this.props.comment.user.id === userId) {
+
+ // This comment was just added by currentUser.
+ if (Date.now() - Number(new Date(this.props.comment.created_at)) < 30 * 1000) {
+ return;
+ }
+ }
+ this.setState({animateEnter: true});
+ }
+
+ render() {
+ return ;
+ }
+ }
+ return WithAnimateEnter;
+});
+
+const withCommentFragments = withFragments({
root: gql`
fragment CoralEmbedStream_Comment_root on RootQuery {
__typename
@@ -57,4 +91,11 @@ export default withFragments({
${getSlotFragmentSpreads(slots, 'comment')}
}
`
-})(Comment);
+});
+
+const enhance = compose(
+ withAnimateEnter,
+ withCommentFragments,
+);
+
+export default enhance(Comment);