boris comment more properly showing

src/components/node/NodeComments/index.tsx

@@ -7,7 +7,7 @@ import { ICommentGroup, IComment } from '~/redux/types';
 import { groupCommentsByUser } from '~/utils/fn';
 import { IUser } from '~/redux/auth/types';
 import { canEditComment } from '~/utils/node';
-import { nodeLockComment, nodeEditComment } from '~/redux/node/actions';
+import { nodeLockComment, nodeEditComment, nodeLoadMoreComments } from '~/redux/node/actions';
 import { INodeState } from '~/redux/node/reducer';
 import { COMMENTS_DISPLAY } from '~/redux/node/constants';
 import { plural } from '~/utils/dom';
@@ -19,11 +19,21 @@ interface IProps {
   user: IUser;
   onDelete: typeof nodeLockComment;
   onEdit: typeof nodeEditComment;
+  onLoadMore: typeof nodeLoadMoreComments;
   order?: 'ASC' | 'DESC';
 }
 
 const NodeComments: FC<IProps> = memo(
-  ({ comments, comment_data, user, onDelete, onEdit, comment_count = 0, order = 'DESC' }) => {
+  ({
+    comments,
+    comment_data,
+    user,
+    onDelete,
+    onEdit,
+    onLoadMore,
+    comment_count = 0,
+    order = 'DESC',
+  }) => {
     const comments_left = useMemo(() => Math.max(0, comment_count - comments.length), [
       comments,
       comment_count,
@@ -34,10 +44,10 @@ const NodeComments: FC<IProps> = memo(
       [comments, order]
     );
 
-    return (
-      <div className={styles.wrap}>
-        {comment_count > 0 && (
-          <div className={styles.more}>
+    const more = useMemo(
+      () =>
+        comments_left > 0 && (
+          <div className={styles.more} onClick={onLoadMore}>
             Показать ещё{' '}
             {plural(
               Math.min(comments_left, COMMENTS_DISPLAY),
@@ -47,7 +57,13 @@ const NodeComments: FC<IProps> = memo(
             )}
             {comments_left > COMMENTS_DISPLAY ? ` из ${comments_left} оставшихся` : ''}
           </div>
-        )}
+        ),
+      [comments_left, onLoadMore, COMMENTS_DISPLAY]
+    );
+
+    return (
+      <div className={styles.wrap}>
+        {order === 'DESC' && more}
 
         {groupped.map(group => (
           <Comment
@@ -59,6 +75,8 @@ const NodeComments: FC<IProps> = memo(
             onEdit={onEdit}
           />
         ))}
+
+        {order === 'ASC' && more}
       </div>
     );
   }

src/components/node/NodeComments/styles.scss

@@ -20,4 +20,11 @@
   text-transform: uppercase;
   color: darken(white, 50%);
   font: $font_14_regular;
+  cursor: pointer;
+  transition: background-color 0.25s;
+  user-select: none;
+
+  &:hover {
+    background-color: lighten($comment_bg, 4%);
+  }
 }