added highlight for new comments

src/components/comment/Comment/index.tsx

@@ -5,6 +5,8 @@ import { CommentContent } from '~/components/comment/CommentContent';
 import styles from './styles.module.scss';
 import { CommendDeleted } from '../../node/CommendDeleted';
 import * as MODAL_ACTIONS from '~/redux/modal/actions';
+import classNames from 'classnames';
+import { NEW_COMMENT_CLASSNAME } from '~/constants/comment';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   is_empty?: boolean;
@@ -30,11 +32,14 @@ const Comment: FC<IProps> = memo(
   }) => {
     return (
       <CommentWrapper
-        className={className}
+        className={classNames(className, {
+          [NEW_COMMENT_CLASSNAME]: comment_group.hasNew,
+        })}
         isEmpty={is_empty}
         isLoading={is_loading}
         user={comment_group.user}
         isSame={is_same}
+        isNew={comment_group.hasNew}
         {...props}
       >
         <div className={styles.wrap}>

src/components/containers/CommentWrapper/index.tsx

@@ -13,6 +13,7 @@ type IProps = DivProps & {
   isLoading?: boolean;
   isSame?: boolean;
   isForm?: boolean;
+  isNew?: boolean;
 };
 
 const CommentWrapper: FC<IProps> = ({
@@ -23,13 +24,15 @@ const CommentWrapper: FC<IProps> = ({
   isSame,
   isForm,
   children,
+  isNew,
   ...props
 }) => (
   <div
     className={classNames(styles.wrap, className, {
-      is_empty: isEmpty,
-      is_loading: isLoading,
-      is_same: isSame,
+      [styles.is_empty]: isEmpty,
+      [styles.is_loading]: isLoading,
+      [styles.is_same]: isSame,
+      [styles.is_new]: isNew,
     })}
     {...props}
   >

src/components/containers/CommentWrapper/styles.module.scss

@@ -1,5 +1,13 @@
 @import "src/styles/variables";
 
+@keyframes highlight {
+  0% { opacity: 0.75; }
+  25% { opacity: 0.5; }
+  50% { opacity: 0.75; }
+  75% { opacity: 0; }
+  100% { opacity: 0; }
+}
+
 .wrap {
   @include outer_shadow;
 
@@ -10,15 +18,27 @@
   min-width: 0;
   border-radius: $radius;
 
-  &:global(.is_empty) {
+  &.is_empty {
     opacity: 0.5;
   }
 
-  &:global(.is_same) {
+  &.is_same {
     margin: 0 !important;
     border-radius: 0;
   }
 
+  &.is_new::after {
+    content: ' ';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    animation: highlight 1s 0.25s forwards;
+    background: transparentize($wisegreen, 0.7);
+    border-radius: $radius;
+  }
+
   @include tablet {
     flex-direction: column;
   }

src/components/node/NodeBottomBlock/index.tsx

@@ -23,6 +23,7 @@ interface IProps {
   commentsCount: number;
   isLoadingComments: boolean;
   related: INodeRelated;
+  lastSeenCurrent?: string;
 }
 
 const NodeBottomBlock: FC<IProps> = ({
@@ -34,6 +35,7 @@ const NodeBottomBlock: FC<IProps> = ({
   commentsCount,
   commentsOrder,
   related,
+  lastSeenCurrent,
 }) => {
   const { inline } = useNodeBlocks(node, isLoading);
   const { is_user } = useUser();
@@ -50,6 +52,7 @@ const NodeBottomBlock: FC<IProps> = ({
             {inline && <div className={styles.inline}>{inline}</div>}
 
             <NodeCommentsBlock
+              lastSeenCurrent={lastSeenCurrent}
               isLoading={isLoading}
               isLoadingComments={isLoadingComments}
               comments={comments}

src/components/node/NodeComments/index.tsx

@@ -12,62 +12,63 @@ import { COMMENTS_DISPLAY } from '~/redux/node/constants';
 import { plural } from '~/utils/dom';
 import { modalShowPhotoswipe } from '~/redux/modal/actions';
 import { useDispatch } from 'react-redux';
+import { useGrouppedComments } from '~/utils/hooks/node/useGrouppedComments';
 
 interface IProps {
   comments: IComment[];
   count: INodeState['comment_count'];
   user: IUser;
   order?: 'ASC' | 'DESC';
+  lastSeenCurrent?: string;
 }
 
-const NodeComments: FC<IProps> = memo(({ comments, user, count = 0, order = 'DESC' }) => {
-  const dispatch = useDispatch();
-  const left = useMemo(() => Math.max(0, count - comments.length), [comments, count]);
+const NodeComments: FC<IProps> = memo(
+  ({ comments, user, count = 0, order = 'DESC', lastSeenCurrent }) => {
+    const dispatch = useDispatch();
+    const left = useMemo(() => Math.max(0, count - comments.length), [comments, count]);
 
-  const groupped: ICommentGroup[] = useMemo(
-    () => (order === 'DESC' ? [...comments].reverse() : comments).reduce(groupCommentsByUser, []),
-    [comments, order]
-  );
+    const groupped: ICommentGroup[] = useGrouppedComments(comments, order, lastSeenCurrent);
 
-  const onDelete = useCallback(
-    (id: IComment['id'], locked: boolean) => dispatch(nodeLockComment(id, locked)),
-    [dispatch]
-  );
-  const onLoadMoreComments = useCallback(() => dispatch(nodeLoadMoreComments()), [dispatch]);
-  const onShowPhotoswipe = useCallback(
-    (images: IFile[], index: number) => dispatch(modalShowPhotoswipe(images, index)),
-    [dispatch]
-  );
+    const onDelete = useCallback(
+      (id: IComment['id'], locked: boolean) => dispatch(nodeLockComment(id, locked)),
+      [dispatch]
+    );
+    const onLoadMoreComments = useCallback(() => dispatch(nodeLoadMoreComments()), [dispatch]);
+    const onShowPhotoswipe = useCallback(
+      (images: IFile[], index: number) => dispatch(modalShowPhotoswipe(images, index)),
+      [dispatch]
+    );
 
-  const more = useMemo(
-    () =>
-      left > 0 && (
-        <div className={styles.more} onClick={onLoadMoreComments}>
-          Показать ещё{' '}
-          {plural(Math.min(left, COMMENTS_DISPLAY), 'комментарий', 'комментария', 'комментариев')}
-          {left > COMMENTS_DISPLAY ? ` из ${left} оставшихся` : ''}
-        </div>
-      ),
-    [left, onLoadMoreComments]
-  );
+    const more = useMemo(
+      () =>
+        left > 0 && (
+          <div className={styles.more} onClick={onLoadMoreComments}>
+            Показать ещё{' '}
+            {plural(Math.min(left, COMMENTS_DISPLAY), 'комментарий', 'комментария', 'комментариев')}
+            {left > COMMENTS_DISPLAY ? ` из ${left} оставшихся` : ''}
+          </div>
+        ),
+      [left, onLoadMoreComments]
+    );
 
-  return (
-    <div className={styles.wrap}>
-      {order === 'DESC' && more}
+    return (
+      <div className={styles.wrap}>
+        {order === 'DESC' && more}
 
-      {groupped.map(group => (
-        <Comment
-          key={group.ids.join()}
-          comment_group={group}
-          can_edit={canEditComment(group, user)}
-          onDelete={onDelete}
-          modalShowPhotoswipe={onShowPhotoswipe}
-        />
-      ))}
+        {groupped.map(group => (
+          <Comment
+            key={group.ids.join()}
+            comment_group={group}
+            can_edit={canEditComment(group, user)}
+            onDelete={onDelete}
+            modalShowPhotoswipe={onShowPhotoswipe}
+          />
+        ))}
 
-      {order === 'ASC' && more}
-    </div>
-  );
-});
+        {order === 'ASC' && more}
+      </div>
+    );
+  }
+);
 
 export { NodeComments };

src/components/node/NodeCommentsBlock/index.tsx

@@ -10,18 +10,32 @@ interface IProps {
   node: INode;
   comments: IComment[];
   count: number;
+  lastSeenCurrent?: string;
   isLoading: boolean;
   isLoadingComments: boolean;
 }
 
-const NodeCommentsBlock: FC<IProps> = ({ isLoading, isLoadingComments, node, comments, count }) => {
+const NodeCommentsBlock: FC<IProps> = ({
+  isLoading,
+  isLoadingComments,
+  node,
+  comments,
+  count,
+  lastSeenCurrent,
+}) => {
   const user = useUser();
   const { inline } = useNodeBlocks(node, isLoading);
 
   return isLoading || isLoadingComments || (!comments.length && !inline) ? (
     <NodeNoComments is_loading={isLoadingComments || isLoading} />
   ) : (
-    <NodeComments count={count} comments={comments} user={user} order="DESC" />
+    <NodeComments
+      count={count}
+      comments={comments}
+      user={user}
+      order="DESC"
+      lastSeenCurrent={lastSeenCurrent}
+    />
   );
 };