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/fn.ts

@@ -4,12 +4,28 @@ import { nth } from 'ramda';
 import { remove } from 'ramda';
 import { ICommentGroup, IComment } from '~/redux/types';
 import { path } from 'ramda';
+import { isAfter, isValid, parseISO } from 'date-fns';
 
 export const moveArrItem = curry((at, to, list) => insert(to, nth(at, list), remove(at, 1, list)));
 export const objFromArray = (array: any[], key: string) =>
   array.reduce((obj, el) => (key && el[key] ? { ...obj, [el[key]]: el } : obj), {});
 
-export const groupCommentsByUser = (
+const compareCommentDates = (commentDateValue?: string, lastSeenDateValue?: string) => {
+  if (!commentDateValue || !lastSeenDateValue) {
+    return false;
+  }
+
+  const commentDate = parseISO(commentDateValue);
+  const lastSeenDate = parseISO(lastSeenDateValue);
+
+  if (!isValid(commentDate) || !isValid(lastSeenDate)) {
+    return false;
+  }
+
+  return isAfter(commentDate, lastSeenDate);
+};
+
+export const groupCommentsByUser = (lastSeen?: string) => (
   grouppedComments: ICommentGroup[],
   comment: IComment
 ): ICommentGroup[] => {
@@ -28,6 +44,7 @@ export const groupCommentsByUser = (
             user: comment.user,
             comments: [comment],
             ids: [comment.id],
+            hasNew: compareCommentDates(comment.created_at, lastSeen),
           },
         ]
       : [
@@ -37,6 +54,7 @@ export const groupCommentsByUser = (
             ...last,
             comments: [...last.comments, comment],
             ids: [...last.ids, comment.id],
+            hasNew: last.hasNew || compareCommentDates(comment.created_at, lastSeen),
           },
         ]),
   ];

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 || []);
 };