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

.env.development

@@ -1,2 +1,2 @@
-REACT_APP_API_HOST=https://pig.staging.vault48.org/
+REACT_APP_API_HOST: http://localhost:3334/
-REACT_APP_REMOTE_CURRENT=https://pig.staging.vault48.org/static/
+REACT_APP_REMOTE_CURRENT: https://pig.staging.vault48.org/static/

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;
+  group: ICommentGroup;
-  is_same?: boolean;
+  isSame?: boolean;
-  can_edit?: 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}
+        user={group.user}
-        isSame={is_same}
+        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}
               />

src/components/containers/CommentWrapper/index.tsx

@@ -11,8 +11,8 @@ type IProps = DivProps & {
   user: IUser;
   isEmpty?: boolean;
   isLoading?: boolean;
-  isSame?: boolean;
   isForm?: boolean;
+  isNew?: boolean;
 };
 
 const CommentWrapper: FC<IProps> = ({
@@ -20,16 +20,16 @@ const CommentWrapper: FC<IProps> = ({
   className,
   isEmpty,
   isLoading,
-  isSame,
   isForm,
   children,
+  isNew,
   ...props
 }) => (
   <div
     className={classNames(styles.wrap, className, {
-      is_empty: isEmpty,
+      [styles.is_empty]: isEmpty,
-      is_loading: isLoading,
+      [styles.is_loading]: isLoading,
-      is_same: isSame,
+      [styles.is_new]: isNew,
     })}
     {...props}
   >

src/components/containers/CommentWrapper/styles.module.scss

@@ -1,5 +1,13 @@
 @import "src/styles/variables";
 
+@keyframes highlight {
+  0% { opacity: 0.75; }
+  25% { opacity: 0.5; }
+  50% { opacity: 0.75; }
+  75% { opacity: 0; }
+  100% { opacity: 0; }
+}
+
 .wrap {
   @include outer_shadow;
 
@@ -10,15 +18,27 @@
   min-width: 0;
   border-radius: $radius;
 
-  &:global(.is_empty) {
+  &.is_empty {
     opacity: 0.5;
   }
 
-  &:global(.is_same) {
+  &.is_same {
     margin: 0 !important;
     border-radius: 0;
   }
 
+  &.is_new::after {
+    content: ' ';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    animation: highlight 1s 0.5s forwards;
+    background: transparentize($wisegreen, 0.7);
+    border-radius: $radius;
+  }
+
   @include tablet {
     flex-direction: column;
   }

src/components/node/NodeBottomBlock/index.tsx

@@ -23,6 +23,7 @@ interface IProps {
   commentsCount: number;
   isLoadingComments: boolean;
   related: INodeRelated;
+  lastSeenCurrent?: string;
 }
 
 const NodeBottomBlock: FC<IProps> = ({
@@ -34,6 +35,7 @@ const NodeBottomBlock: FC<IProps> = ({
   commentsCount,
   commentsOrder,
   related,
+  lastSeenCurrent,
 }) => {
   const { inline } = useNodeBlocks(node, isLoading);
   const { is_user } = useUser();
@@ -50,6 +52,7 @@ const NodeBottomBlock: FC<IProps> = ({
             {inline && <div className={styles.inline}>{inline}</div>}
 
             <NodeCommentsBlock
+              lastSeenCurrent={lastSeenCurrent}
               isLoading={isLoading}
               isLoadingComments={isLoadingComments}
               comments={comments}

src/components/node/NodeComments/index.tsx

@@ -12,22 +12,22 @@ import { COMMENTS_DISPLAY } from '~/redux/node/constants';
 import { plural } from '~/utils/dom';
 import { modalShowPhotoswipe } from '~/redux/modal/actions';
 import { useDispatch } from 'react-redux';
+import { useGrouppedComments } from '~/utils/hooks/node/useGrouppedComments';
 
 interface IProps {
   comments: IComment[];
   count: INodeState['comment_count'];
   user: IUser;
   order?: 'ASC' | 'DESC';
+  lastSeenCurrent?: string;
 }
 
-const NodeComments: FC<IProps> = memo(({ comments, user, count = 0, order = 'DESC' }) => {
+const NodeComments: FC<IProps> = memo(
+  ({ comments, user, count = 0, order = 'DESC', lastSeenCurrent }) => {
     const dispatch = useDispatch();
     const left = useMemo(() => Math.max(0, count - comments.length), [comments, count]);
 
-  const groupped: ICommentGroup[] = useMemo(
+    const groupped: ICommentGroup[] = useGrouppedComments(comments, order, lastSeenCurrent);
-    () => (order === 'DESC' ? [...comments].reverse() : comments).reduce(groupCommentsByUser, []),
-    [comments, order]
-  );
 
     const onDelete = useCallback(
       (id: IComment['id'], locked: boolean) => dispatch(nodeLockComment(id, locked)),
@@ -58,16 +58,18 @@ const NodeComments: FC<IProps> = memo(({ comments, user, count = 0, order = 'DES
         {groupped.map(group => (
           <Comment
             key={group.ids.join()}
-          comment_group={group}
+            group={group}
-          can_edit={canEditComment(group, user)}
+            canEdit={canEditComment(group, user)}
             onDelete={onDelete}
             modalShowPhotoswipe={onShowPhotoswipe}
+            isSame={group.user.id === user.id}
           />
         ))}
 
         {order === 'ASC' && more}
       </div>
     );
-});
+  }
+);
 
 export { NodeComments };

src/components/node/NodeCommentsBlock/index.tsx

@@ -10,18 +10,32 @@ interface IProps {
   node: INode;
   comments: IComment[];
   count: number;
+  lastSeenCurrent?: string;
   isLoading: boolean;
   isLoadingComments: boolean;
 }
 
-const NodeCommentsBlock: FC<IProps> = ({ isLoading, isLoadingComments, node, comments, count }) => {
+const NodeCommentsBlock: FC<IProps> = ({
+  isLoading,
+  isLoadingComments,
+  node,
+  comments,
+  count,
+  lastSeenCurrent,
+}) => {
   const user = useUser();
   const { inline } = useNodeBlocks(node, isLoading);
 
   return isLoading || isLoadingComments || (!comments.length && !inline) ? (
     <NodeNoComments is_loading={isLoadingComments || isLoading} />
   ) : (
-    <NodeComments count={count} comments={comments} user={user} order="DESC" />
+    <NodeComments
+      count={count}
+      comments={comments}
+      user={user}
+      order="DESC"
+      lastSeenCurrent={lastSeenCurrent}
+    />
   );
 };
 

src/constants/comment.ts

@@ -36,3 +36,5 @@ export const COMMENT_BLOCK_RENDERERS = {
   [COMMENT_BLOCK_TYPES.MARK]: CommentTextBlock,
   [COMMENT_BLOCK_TYPES.EMBED]: CommentEmbedBlock,
 };
+
+export const NEW_COMMENT_CLASSNAME = 'newComment';

src/layouts/NodeLayout/index.tsx

@@ -36,10 +36,11 @@ const NodeLayout: FC<IProps> = memo(
       comment_count,
       is_loading_comments,
       related,
+      lastSeenCurrent,
     } = useShallowSelect(selectNode);
 
     useNodeCoverImage(current);
-    useScrollToTop([id]);
+    useScrollToTop([id, is_loading_comments]);
     useLoadNode(id, is_loading);
     useOnNodeSeen(current);
 
@@ -65,6 +66,7 @@ const NodeLayout: FC<IProps> = memo(
               related={related}
               isLoadingComments={is_loading_comments}
               isLoading={is_loading}
+              lastSeenCurrent={lastSeenCurrent}
             />
 
             <Footer />

src/redux/node/actions.ts

@@ -74,12 +74,6 @@ export const nodeSetRelated = (related: INodeState['related']) => ({
   type: NODE_ACTIONS.SET_RELATED,
 });
 
-export const nodeSetCommentData = (id: number, comment: Partial<IComment>) => ({
-  id,
-  comment,
-  type: NODE_ACTIONS.SET_COMMENT_DATA,
-});
-
 export const nodeUpdateTags = (id: INode['id'], tags: string[]) => ({
   type: NODE_ACTIONS.UPDATE_TAGS,
   id,

src/redux/node/api.ts

@@ -8,7 +8,7 @@ import {
   ApiGetNodeRelatedRequest,
   ApiGetNodeRelatedResult,
   ApiGetNodeRequest,
-  ApiGetNodeResult,
+  ApiGetNodeResponse,
   ApiLockCommentRequest,
   ApiLockcommentResult,
   ApiLockNodeRequest,
@@ -69,13 +69,13 @@ export const getNodeDiff = ({
     .then(cleanResult);
 
 export const apiGetNode = ({ id }: ApiGetNodeRequest, config?: AxiosRequestConfig) =>
-  api.get<ApiGetNodeResult>(API.NODE.GET_NODE(id), config).then(cleanResult);
+  api.get<ApiGetNodeResponse>(API.NODE.GET_NODE(id), config).then(cleanResult);
 
 export const apiGetNodeWithCancel = ({ id }: ApiGetNodeRequest) => {
   const cancelToken = axios.CancelToken.source();
   return {
     request: api
-      .get<ApiGetNodeResult>(API.NODE.GET_NODE(id), {
+      .get<ApiGetNodeResponse>(API.NODE.GET_NODE(id), {
         cancelToken: cancelToken.token,
       })
       .then(cleanResult),

src/redux/node/constants.ts

@@ -44,7 +44,6 @@ export const NODE_ACTIONS = {
   SET_LOADING_COMMENTS: `${prefix}SET_LOADING_COMMENTS`,
   SET_SENDING_COMMENT: `${prefix}SET_SENDING_COMMENT`,
   SET_CURRENT: `${prefix}SET_CURRENT`,
-  SET_COMMENT_DATA: `${prefix}SET_COMMENT_DATA`,
   SET_EDITOR: `${prefix}SET_EDITOR`,
 
   POST_COMMENT: `${prefix}POST_LOCAL_COMMENT`,

src/redux/node/handlers.ts

@@ -7,7 +7,6 @@ import {
   nodeSetLoadingComments,
   nodeSetSendingComment,
   nodeSetComments,
-  nodeSetCommentData,
   nodeSetTags,
   nodeSetEditor,
   nodeSetCoverImage,
@@ -46,20 +45,6 @@ const setComments = (state: INodeState, { comments }: ReturnType<typeof nodeSetC
 const setRelated = (state: INodeState, { related }: ReturnType<typeof nodeSetRelated>) =>
   assocPath(['related'], related, state);
 
-const setCommentData = (
-  state: INodeState,
-  { id, comment }: ReturnType<typeof nodeSetCommentData>
-) => ({
-  ...state,
-  comment_data: {
-    ...state.comment_data,
-    [id]: {
-      ...(state.comment_data[id] || {}),
-      ...comment,
-    },
-  },
-})
-
 const setTags = (state: INodeState, { tags }: ReturnType<typeof nodeSetTags>) =>
   assocPath(['current', 'tags'], tags, state);
 
@@ -80,7 +65,6 @@ export const NODE_HANDLERS = {
   [NODE_ACTIONS.SET_SENDING_COMMENT]: setSendingComment,
   [NODE_ACTIONS.SET_COMMENTS]: setComments,
   [NODE_ACTIONS.SET_RELATED]: setRelated,
-  [NODE_ACTIONS.SET_COMMENT_DATA]: setCommentData,
   [NODE_ACTIONS.SET_TAGS]: setTags,
   [NODE_ACTIONS.SET_EDITOR]: setEditor,
   [NODE_ACTIONS.SET_COVER_IMAGE]: setCoverImage,

src/redux/node/reducer.ts

@@ -9,7 +9,7 @@ export type INodeState = Readonly<{
   current: INode;
   comments: IComment[];
   related: INodeRelated;
-  comment_data: Record<number, IComment>;
+  lastSeenCurrent?: string;
   comment_count: number;
   current_cover_image?: IFile;
 
@@ -29,11 +29,6 @@ const INITIAL_STATE: INodeState = {
     files: [],
   },
   current: { ...EMPTY_NODE },
-  comment_data: {
-    0: {
-      ...EMPTY_COMMENT,
-    },
-  },
   comment_count: 0,
   comments: [],
   related: {

src/redux/node/sagas.ts

@@ -19,7 +19,6 @@ import {
   nodeLockComment,
   nodePostLocalComment,
   nodeSet,
-  nodeSetCommentData,
   nodeSetComments,
   nodeSetCurrent,
   nodeSetEditor,
@@ -43,9 +42,9 @@ import {
   apiPostNodeLike,
   apiPostNodeTags,
 } from './api';
-import { flowSetNodes, flowSetUpdated } from '../flow/actions';
+import { flowSetNodes } from '../flow/actions';
 import { modalSetShown, modalShowDialog } from '../modal/actions';
-import { selectFlow, selectFlowNodes } from '../flow/selectors';
+import { selectFlowNodes } from '../flow/selectors';
 import { URLS } from '~/constants/urls';
 import { selectNode } from './selectors';
 import { INode, Unwrap } from '../types';
@@ -54,7 +53,6 @@ import { DIALOGS } from '~/redux/modal/constants';
 import { has } from 'ramda';
 import { selectLabListNodes } from '~/redux/lab/selectors';
 import { labSetList } from '~/redux/lab/actions';
-import { INodeRelated } from '~/redux/node/types';
 
 export function* updateNodeEverywhere(node) {
   const {
@@ -119,7 +117,6 @@ function* onNodeGoto({ id, node_type }: ReturnType<typeof nodeGotoNode>) {
   if (node_type) yield put(nodeSetCurrent({ ...EMPTY_NODE, type: node_type }));
 
   yield put(nodeLoadNode(id));
-  yield put(nodeSetCommentData(0, { ...EMPTY_COMMENT }));
   yield put(nodeSetRelated({ albums: {}, similar: [] }));
 }
 
@@ -188,9 +185,9 @@ function* onNodeLoad({ id }: ReturnType<typeof nodeLoadNode>) {
     yield put(nodeSetLoading(true));
     yield put(nodeSetLoadingComments(true));
 
-    const { node }: Unwrap<typeof apiGetNode> = yield call(apiGetNode, { id });
+    const { node, last_seen }: Unwrap<typeof apiGetNode> = yield call(apiGetNode, { id });
 
-    yield put(nodeSetCurrent(node));
+    yield put(nodeSet({ current: node, lastSeenCurrent: last_seen }));
     yield put(nodeSetLoading(false));
   } catch (error) {
     yield put(push(URLS.ERRORS.NOT_FOUND));

src/redux/node/types.ts

@@ -31,7 +31,7 @@ export type PostCellViewResult = unknown; // TODO: update it with actual type
 export type ApiGetNodeRequest = {
   id: string | number;
 };
-export type ApiGetNodeResult = { node: INode };
+export type ApiGetNodeResponse = { node: INode; last_seen?: string };
 
 export type ApiGetNodeRelatedRequest = {
   id: INode['id'];

src/redux/types.ts

@@ -165,6 +165,7 @@ export interface ICommentGroup {
   user: IUser;
   comments: IComment[];
   ids: IComment['id'][];
+  hasNew: boolean;
 }
 
 export type IUploadProgressHandler = (progress: ProgressEvent) => void;

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(() => {
+    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 || []);
 };