Animate flash for new comments

client/coral-embed-stream/src/components/Comment.css

@@ -97,3 +97,13 @@
 .Wizard .textAlignRight {
   text-align: right;
 }
+
+@keyframes enter {
+  0% {background-color: rgba(0, 0, 0, 0);}
+  50% {background-color: rgba(255,255,0, 0.2);}
+  100% {background-color: rgba(0, 0, 0, 0);}
+}
+
+.enter {
+  animation: enter 1000ms;
+}

client/coral-embed-stream/src/components/Comment.js

@@ -8,6 +8,9 @@ import Content from 'coral-plugin-commentcontent/CommentContent';
 import PubDate from 'coral-plugin-pubdate/PubDate';
 import {ReplyBox, ReplyButton} from 'coral-plugin-replies';
 import FlagComment from 'coral-plugin-flags/FlagComment';
+import {TransitionGroup} from 'react-transition-group';
+import cn from 'classnames';
+
 import {
   BestButton,
   IfUserCanModifyBest,
@@ -19,7 +22,6 @@ import Slot from 'coral-framework/components/Slot';
 import LoadMore from './LoadMore';
 import IgnoredCommentTombstone from './IgnoredCommentTombstone';
 import {TopRightMenu} from './TopRightMenu';
-import classnames from 'classnames';
 import {EditableCommentContent} from './EditableCommentContent';
 import {getActionSummary, iPerformedThisAction} from 'coral-framework/utils';
 import {getEditableUntilDate} from './util';
@@ -85,9 +87,9 @@ 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,
       ...resetCursors({}, props),
     };
-
   }
 
   componentWillReceiveProps(next) {
@@ -110,6 +112,28 @@ class Comment extends React.Component {
     }
   }
 
+  componentWillAppear(callback) {
+    callback();
+  }
+  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});
+  }
+  componentWillLeave(callback) {
+    callback();
+  }
+
   static propTypes = {
     reactKey: PropTypes.string.isRequired,
 
@@ -325,7 +349,7 @@ class Comment extends React.Component {
 
     return (
       <div
-        className={commentClass}
+        className={cn(commentClass, {[styles.enter]: this.state.animateEnter})}
         id={`c_${comment.id}`}
         style={{marginLeft: depth * 30}}
       >
@@ -362,17 +386,17 @@ class Comment extends React.Component {
               (comment.user.id === currentUser.id))
 
               /* User can edit/delete their own comment for a short window after posting */
-              ? <span className={classnames(styles.topRight)}>
+              ? <span className={cn(styles.topRight)}>
                   {
                     commentIsStillEditable(comment) &&
                     <a
-                      className={classnames(styles.link, {[styles.active]: this.state.isEditing})}
+                      className={cn(styles.link, {[styles.active]: this.state.isEditing})}
                       onClick={this.onClickEdit}>Edit</a>
                   }
                 </span>
 
               /* TopRightMenu allows currentUser to ignore other users' comments */
-              : <span className={classnames(styles.topRight, styles.topRightMenu)}>
+              : <span className={cn(styles.topRight, styles.topRightMenu)}>
                   <TopRightMenu
                     comment={comment}
                     ignoreUser={ignoreUser}
@@ -468,6 +492,8 @@ class Comment extends React.Component {
               assetId={asset.id}
             />
           : null}
+
+        <TransitionGroup>
         {view.map((reply) => {
           return commentIsIgnored(reply)
             ? <IgnoredCommentTombstone key={reply.id} />
@@ -499,6 +525,7 @@ class Comment extends React.Component {
                 comment={reply}
               />;
         })}
+        </TransitionGroup>
         <div className="coral-load-more-replies">
           <LoadMore
             topLevel={false}

client/coral-embed-stream/src/components/Stream.js

@@ -1,7 +1,7 @@
 import React, {PropTypes} from 'react';
 import LoadMore from './LoadMore';
 
-import Comment from '../containers/Comment';
+import Comment from '../components/Comment';
 import SuspendedAccount from './SuspendedAccount';
 import RestrictedMessageBox
   from 'coral-framework/components/RestrictedMessageBox';
@@ -14,6 +14,7 @@ import QuestionBox from 'coral-plugin-questionbox/QuestionBox';
 import IgnoredCommentTombstone from './IgnoredCommentTombstone';
 import NewCount from './NewCount';
 import t, {timeago} from 'coral-framework/services/i18n';
+import {TransitionGroup} from 'react-transition-group';
 
 const hasComment = (nodes, id) => nodes.some((node) => node.id === id);
 
@@ -239,7 +240,7 @@ class Stream extends React.Component {
                 count={comments.nodes.length - view.length}
                 loadMore={this.viewNewComments}
               />
-              <div className="embed__stream">
+              <TransitionGroup component='div' className="embed__stream">
                 {view.map((comment) => {
                   return commentIsIgnored(comment)
                     ? <IgnoredCommentTombstone key={comment.id} />
@@ -273,7 +274,7 @@ class Stream extends React.Component {
                         liveUpdates={false}
                       />;
                 })}
-              </div>
+              </TransitionGroup>
               <LoadMore
                 topLevel={true}
                 moreComments={asset.comments.hasNextPage}

client/coral-embed-stream/src/containers/Embed.js

@@ -37,7 +37,7 @@ class EmbedContainer extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    if (!isEqual(prevProps.root.comment, this.props.root.comment)) {
+    if (!prevProps.root.comment && this.props.root.comment) {
 
       // Scroll to a permalinked comment if one is in the URL once the page is done rendering.
       setTimeout(() => pym.scrollParentToChildEl('coralStream'), 0);

package.json

@@ -104,6 +104,7 @@
     "react-apollo": "^1.1.0",
     "react-recaptcha": "^2.2.6",
     "react-toastify": "^1.5.0",
+    "react-transition-group": "^1.1.3",
     "recompose": "^0.23.1",
     "redis": "^2.7.1",
     "resolve": "^1.3.2",

yarn.lock

@@ -6909,7 +6909,7 @@ react-toastify@^1.5.0:
     prop-types "^15.5.8"
     react-transition-group "^1.1.2"
 
-react-transition-group@^1.1.2:
+react-transition-group@^1.1.2, react-transition-group@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-1.1.3.tgz#5e02cf6e44a863314ff3c68a0c826c2d9d70b221"
   dependencies: