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);