highlight and scroll to new comments if authorized (#76)

* added new drone file

* commented-out unnecessary build stages

* commented-out unnecessary build stages

* added dynamic repo

* added dynamic repo

* added registry global env

* added registry global env

* added registry global env

* added template

* added template

* added template

* added template

* added branches to template

* added branches to template

* made build based on template

* made build based on template

* changed env file

* added .env.development file to repo

* fixed branch to develop

* added variables for develop and master

* added variables for develop and master

* added env variables to builder

* added env variables to builder

* added env variables to builder

* changed drone.yml

* added highlight for new comments

* fixed dependencies for useScrollToTop

* added smooth scrolling for comments

* fixed new comments highlight for same user

src/components/comment/Comment/index.tsx

@@ -5,40 +5,44 @@ 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;
   is_loading?: boolean;
-  comment_group: ICommentGroup;
-  is_same?: boolean;
-  can_edit?: boolean;
+  group: ICommentGroup;
+  isSame?: boolean;
+  canEdit?: boolean;
   onDelete: (id: IComment['id'], isLocked: boolean) => void;
   modalShowPhotoswipe: typeof MODAL_ACTIONS.modalShowPhotoswipe;
 };
 
 const Comment: FC<IProps> = memo(
   ({
-    comment_group,
+    group,
     is_empty,
-    is_same,
+    isSame,
     is_loading,
     className,
-    can_edit,
+    canEdit,
     onDelete,
     modalShowPhotoswipe,
     ...props
   }) => {
     return (
       <CommentWrapper
-        className={className}
+        className={classNames(className, {
+          [NEW_COMMENT_CLASSNAME]: group.hasNew,
+        })}
         isEmpty={is_empty}
         isLoading={is_loading}
-        user={comment_group.user}
-        isSame={is_same}
+        user={group.user}
+        isNew={group.hasNew && !isSame}
         {...props}
       >
         <div className={styles.wrap}>
-          {comment_group.comments.map(comment => {
+          {group.comments.map(comment => {
             if (comment.deleted_at) {
               return <CommendDeleted id={comment.id} onDelete={onDelete} key={comment.id} />;
             }
@@ -47,7 +51,7 @@ const Comment: FC<IProps> = memo(
               <CommentContent
                 comment={comment}
                 key={comment.id}
-                can_edit={!!can_edit}
+                can_edit={!!canEdit}
                 onDelete={onDelete}
                 modalShowPhotoswipe={modalShowPhotoswipe}
               />