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/utils/hooks/node/useGrouppedComments.ts

@@ -0,0 +1,17 @@
+import { IComment } from '~/redux/types';
+import { useMemo } from 'react';
+import { groupCommentsByUser } from '~/utils/fn';
+
+export const useGrouppedComments = (
+  comments: IComment[],
+  order: 'ASC' | 'DESC',
+  lastSeen?: string
+) =>
+  useMemo(
+    () =>
+      (order === 'DESC' ? [...comments].reverse() : comments).reduce(
+        groupCommentsByUser(lastSeen),
+        []
+      ),
+    [comments, order]
+  );

src/utils/hooks/useScrollToTop.ts

@@ -1,7 +1,19 @@
 import { useEffect } from 'react';
+import { NEW_COMMENT_CLASSNAME } from '~/constants/comment';
 
 export const useScrollToTop = (deps?: any[]) => {
   useEffect(() => {
-    window.scrollTo(0, 0);
+    const targetElement = document.querySelector(`.${NEW_COMMENT_CLASSNAME}`);
+
+    if (!targetElement) {
+      window.scrollTo(0, 0);
+      return;
+    }
+
+    const bounds = targetElement.getBoundingClientRect();
+    window.scrollTo({
+      top: bounds.top - 100,
+      behavior: 'smooth',
+    });
   }, deps || []);
 };