enhance: highlight new comments when shown; fix: sync local commentsViewedAt on comments injection to avoid double outline on item re-visit

Author: Soxasora

components/comment.js

@@ -144,7 +144,13 @@ export default function Comment ({
     if (router.query.commentsViewedAt &&
         me?.id !== item.user?.id &&
         new Date(item.createdAt).getTime() > router.query.commentsViewedAt) {
-      ref.current.classList.add('outline-new-comment')
+      // an injected new comment has the newComments field, a different class is needed
+      // to reliably outline every new comment
+      if (item.newComments) {
+        ref.current.classList.add('outline-new-injected-comment')
+      } else {
+        ref.current.classList.add('outline-new-comment')
+      }
     }
   }, [item.id])
 

components/show-new-comments.js

@@ -2,9 +2,10 @@ import { useCallback, useMemo } from 'react'
 import { useApolloClient } from '@apollo/client'
 import { COMMENT_WITH_NEW_RECURSIVE } from '../fragments/comments'
 import styles from './comment.module.css'
-import { itemUpdateQuery, commentUpdateFragment } from './use-live-comments'
+import { itemUpdateQuery, commentUpdateFragment, getLatestCommentCreatedAt } from './use-live-comments'
 import { updateAncestorsCommentCount } from '@/lib/comments'
 import { COMMENT_DEPTH_LIMIT } from '@/lib/constants'
+import { commentsViewedAfterComment } from '@/lib/new-comments'
 
 function prepareComments (client, newComments) {
   return (data) => {
@@ -34,6 +35,11 @@ function prepareComments (client, newComments) {
     const ancestors = data.path.split('.').slice(0, -1)
     updateAncestorsCommentCount(client.cache, ancestors, totalNComments)
 
+    // update commentsViewedAt with the most recent comment
+    const latestCommentCreatedAt = getLatestCommentCreatedAt(freshNewComments, data.createdAt)
+    const rootId = data.path.split('.')[0]
+    commentsViewedAfterComment(rootId, latestCommentCreatedAt)
+
     return {
       ...data,
       comments: { ...data.comments, comments: [...freshNewComments, ...data.comments.comments] },
@@ -71,8 +77,6 @@ function collectAllNewComments (item, currentDepth = 1) {
   const allNewComments = [...(item.newComments || [])]
   if (item.comments?.comments && currentDepth < (COMMENT_DEPTH_LIMIT - 1)) {
     for (const comment of item.comments.comments) {
-      console.log('comment', comment)
-      console.log('currentDepth', currentDepth)
       allNewComments.push(...collectAllNewComments(comment, currentDepth + 1))
     }
   }

components/use-live-comments.js

@@ -127,7 +127,7 @@ function mergeNewComment (item, newComment) {
   return { ...item, newComments: [...existingNewComments, newComment.id] }
 }
 
-function getLatestCommentCreatedAt (comments, latest) {
+export function getLatestCommentCreatedAt (comments, latest) {
   return comments.reduce(
     (max, { createdAt }) => (createdAt > max ? createdAt : max),
     latest

styles/globals.scss

@@ -908,10 +908,18 @@ div[contenteditable]:focus,
   box-shadow: inset 0 0 1px 1px rgba(0, 123, 190, 0.25);
 }
 
+.outline-new-injected-comment {
+  box-shadow: inset 0 0 1px 1px rgba(0, 123, 190, 0.25);
+}
+
 .outline-new-comment.outline-new-comment-unset {
   box-shadow: none;
 }
 
+.outline-new-injected-comment.outline-new-comment-unset {
+  box-shadow: none;
+}
+
 .outline-new-comment .outline-new-comment {
   box-shadow: none;
 }