scroll to new comments from recent and notifications

src/components/common/NodeHorizontalCard/index.tsx

@@ -8,6 +8,8 @@ import { URLS } from '~/constants/urls';
 import { INode } from '~/types';
 import { getPrettyDate } from '~/utils/dom';
 
+import { getNewCommentAnchor } from '../../../constants/dom/links';
+
 import styles from './styles.module.scss';
 
 interface Props {
@@ -16,32 +18,30 @@ interface Props {
   onClick?: MouseEventHandler;
 }
 
-const NodeHorizontalCard: FC<Props> = ({ node, hasNew, onClick }) => {
-  return (
-    <Anchor
-      key={node.id}
-      className={styles.item}
-      href={URLS.NODE_URL(node.id)}
-      onClick={onClick}
+const NodeHorizontalCard: FC<Props> = ({ node, hasNew, onClick }) => (
+  <Anchor
+    key={node.id}
+    className={styles.item}
+    href={getNewCommentAnchor(URLS.NODE_URL(node.id))}
+    onClick={onClick}
+  >
+    <div
+      className={classNames(styles.thumb, {
+        [styles.new]: hasNew,
+        [styles.lab]: !node.is_promoted,
+      })}
     >
-      <div
-        className={classNames(styles.thumb, {
-          [styles.new]: hasNew,
-          [styles.lab]: !node.is_promoted,
-        })}
-      >
-        <NodeThumbnail item={node} />
-      </div>
+      <NodeThumbnail item={node} />
+    </div>
 
-      <div className={styles.info}>
-        <div className={styles.title}>{node.title || '...'}</div>
+    <div className={styles.info}>
+      <div className={styles.title}>{node.title || '...'}</div>
 
-        <div className={styles.comment}>
-          <span>{getPrettyDate(node.created_at)}</span>
-        </div>
+      <div className={styles.comment}>
+        <span>{getPrettyDate(node.created_at)}</span>
       </div>
-    </Anchor>
-  );
-};
+    </div>
+  </Anchor>
+);
 
 export { NodeHorizontalCard };

src/components/notifications/NotificationComment/index.tsx

@@ -9,6 +9,8 @@ import { Square } from '~/components/common/Square';
 import { NotificationItem } from '~/types/notifications';
 import { formatText, getURLFromString } from '~/utils/dom';
 
+import { getCommentAnchor } from '../../../constants/dom/links';
+
 import styles from './styles.module.scss';
 
 interface NotificationCommentProps {
@@ -17,7 +19,10 @@ interface NotificationCommentProps {
 }
 
 const NotificationComment: FC<NotificationCommentProps> = ({ item, isNew }) => (
-  <Anchor href={item.url} className={styles.link}>
+  <Anchor
+    href={getCommentAnchor(item.url, item.itemId)}
+    className={styles.link}
+  >
     <div className={classNames(styles.message, { [styles.new]: isNew })}>
       <div className={styles.icon}>
         <Avatar

src/constants/dom/links.ts

@@ -0,0 +1,15 @@
+export const NEW_COMMENT_ANCHOR_NAME = 'new-comment';
+export const COMMENT_ANCHOR_PREFIX = 'comment';
+
+export const getCommentId = (id: number) =>
+  [COMMENT_ANCHOR_PREFIX, id].join('-');
+
+export const getNewCommentAnchor = (url: string) =>
+  [url, NEW_COMMENT_ANCHOR_NAME].join('#');
+
+export const getCommentAnchor = (url: string, commentId: number) =>
+  [url, getCommentId(commentId)].join('#');
+
+export const isCommentAnchor = (hash: string | undefined) =>
+  hash?.startsWith(COMMENT_ANCHOR_PREFIX) ||
+  hash?.startsWith(NEW_COMMENT_ANCHOR_NAME);

src/containers/node/NodeComments/components/Comment/index.tsx

@@ -8,6 +8,7 @@ import { CommentWrapper } from '~/containers/comments/CommentWrapper';
 import { IComment, ICommentGroup, IFile } from '~/types';
 
 import { CommendDeleted } from '../../../../../components/node/CommendDeleted';
+import { getCommentId } from '../../../../../constants/dom/links';
 
 import { CommentContent } from './components/CommentContent';
 import { CommentDistance } from './components/CommentDistance';
@@ -83,18 +84,22 @@ const Comment: FC<Props> = memo(
             );
 
             return (
-              <CommentContent
-                prefix={prefix}
-                saveComment={saveComment}
-                nodeId={nodeId}
-                comment={comment}
-                canEdit={!!canEdit}
-                canLike={!!canLike}
-                onLike={() => onLike(comment.id, !comment.liked)}
-                onDelete={(val: boolean) => onDelete(comment.id, val)}
-                onShowImageModal={onShowImageModal}
-                key={comment.id}
-              />
+              <>
+                <a id={getCommentId(comment.id)} className={styles.anchor} />
+
+                <CommentContent
+                  prefix={prefix}
+                  saveComment={saveComment}
+                  nodeId={nodeId}
+                  comment={comment}
+                  canEdit={!!canEdit}
+                  canLike={!!canLike}
+                  onLike={() => onLike(comment.id, !comment.liked)}
+                  onDelete={(val: boolean) => onDelete(comment.id, val)}
+                  onShowImageModal={onShowImageModal}
+                  key={comment.id}
+                />
+              </>
             );
           })}
         </div>

src/containers/node/NodeComments/components/Comment/styles.module.scss

@@ -15,3 +15,9 @@
 .highlighted {
   box-shadow: $color_primary 0 0 0px 2px;
 }
+
+.anchor {
+  display: block;
+  position: relative;
+  top: -($header_height * 2);
+}

src/containers/node/NodeComments/index.tsx

@@ -1,9 +1,13 @@
-import { FC, useMemo } from 'react';
+import { FC, useEffect, useMemo } from 'react';
 
 import { observer } from 'mobx-react-lite';
 
 import { LoadMoreButton } from '~/components/input/LoadMoreButton';
 import { ANNOUNCE_USER_ID, BORIS_NODE_ID } from '~/constants/boris/constants';
+import {
+  isCommentAnchor,
+  NEW_COMMENT_ANCHOR_NAME,
+} from '~/constants/dom/links';
 import { Comment } from '~/containers/node/NodeComments/components/Comment';
 import { useGrouppedComments } from '~/hooks/node/useGrouppedComments';
 import { ICommentGroup } from '~/types';
@@ -18,6 +22,11 @@ interface Props {
   order: 'ASC' | 'DESC';
 }
 
+const isFirstGroupWithNewCommentt = (
+  group: ICommentGroup,
+  prevGroup: ICommentGroup | undefined,
+) => group.hasNew && (!prevGroup || !prevGroup.hasNew);
+
 const NodeComments: FC<Props> = observer(({ order }) => {
   const user = useUserContext();
   const { node } = useNodeContext();
@@ -35,7 +44,7 @@ const NodeComments: FC<Props> = observer(({ order }) => {
     onSaveComment,
   } = useCommentContext();
 
-  const groupped: ICommentGroup[] = useGrouppedComments(
+  const groupped = useGrouppedComments(
     comments,
     order,
     lastSeenCurrent ?? undefined,
@@ -59,26 +68,49 @@ const NodeComments: FC<Props> = observer(({ order }) => {
     return null;
   }
 
+  useEffect(() => {
+    const anchor = location.hash?.replace('#', '');
+
+    if (!isLoading && isCommentAnchor(anchor)) {
+      setTimeout(
+        () =>
+          document
+            .getElementById(anchor)
+            ?.scrollIntoView({ behavior: 'smooth' }),
+        300,
+      );
+    }
+  }, [isLoading]);
+
   return (
     <div className={styles.wrap}>
       {order === 'DESC' && more}
 
-      {groupped.map((group) => (
-        <Comment
-          nodeId={node.id!}
-          key={group.ids.join()}
-          group={group}
-          highlighted={
-            node.id === BORIS_NODE_ID && group.user.id === ANNOUNCE_USER_ID
-          }
-          onLike={onLike}
-          canLike={canLikeComment(group, user)}
-          canEdit={canEditComment(group, user)}
-          onDelete={onDeleteComment}
-          onShowImageModal={onShowImageModal}
-          isSame={group.user.id === user.id}
-          saveComment={onSaveComment}
-        />
+      {groupped.map((group, index) => (
+        <>
+          {isFirstGroupWithNewCommentt(group, groupped.at(index - 1)) && (
+            <a
+              id={NEW_COMMENT_ANCHOR_NAME}
+              className={styles.newCommentAnchor}
+            />
+          )}
+
+          <Comment
+            nodeId={node.id!}
+            key={group.ids.join()}
+            group={group}
+            highlighted={
+              node.id === BORIS_NODE_ID && group.user.id === ANNOUNCE_USER_ID
+            }
+            onLike={onLike}
+            canLike={canLikeComment(group, user)}
+            canEdit={canEditComment(group, user)}
+            onDelete={onDeleteComment}
+            onShowImageModal={onShowImageModal}
+            isSame={group.user.id === user.id}
+            saveComment={onSaveComment}
+          />
+        </>
       ))}
 
       {order === 'ASC' && more}

src/containers/node/NodeComments/styles.module.scss

@@ -13,3 +13,9 @@
 .more {
   margin-bottom: $gap;
 }
+
+.newCommentAnchor {
+  position: relative;
+  top: -($header_height * 2);
+  display: block;
+}

src/types/notifications/index.ts

@@ -2,6 +2,7 @@ import { ShallowUser } from '../auth';
 
 export interface NotificationItem {
   id: number;
+  itemId: number;
   url: string;
   type: NotificationType;
   title: string;