enhance: highlight new comments when shown; nit-fixes and cleanups

fixes:
- sync local commentsViewedAt on comment injection, to avoid double outline on item re-visit
- avoid double highlighting when client-side visiting an item and injecting a new comment

cleanups:
- move ShowNewComments functions to dedicated lib/comments.js
- bust auto-show enhancement due to bad useEffect usage

todos:
- two recursive counts might be too much

Author: Soxasora

components/comment.js

@@ -143,9 +143,16 @@ export default function Comment ({
   useEffect(() => {
     if (router.query.commentsViewedAt &&
         me?.id !== item.user?.id &&
+        !item.newComments &&
         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 && me?.id !== item.user?.id) {
+      ref.current.classList.add('outline-new-injected-comment')
+    }
   }, [item.id])
 
   const bottomedOut = depth === COMMENT_DEPTH_LIMIT || (item.comments?.comments.length === 0 && item.nDirectComments > 0)

components/show-new-comments.js

@@ -1,87 +1,11 @@
 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 { updateAncestorsCommentCount } from '@/lib/comments'
-import { COMMENT_DEPTH_LIMIT } from '@/lib/constants'
+import { prepareComments, dedupeNewComments, collectAllNewComments, showAllNewCommentsRecursively } from '@/lib/comments'
 
-function prepareComments (client, newComments) {
-  return (data) => {
-    // newComments is an array of comment ids that allows us
-    // to read the latest newComments from the cache, guaranteeing that we're not reading stale data
-    const freshNewComments = newComments.map(id => {
-      const fragment = client.cache.readFragment({
-        id: `Item:${id}`,
-        fragment: COMMENT_WITH_NEW_RECURSIVE,
-        fragmentName: 'CommentWithNewRecursive'
-      })
-
-      if (!fragment) {
-        return null
-      }
-
-      return fragment
-    }).filter(Boolean)
-
-    // count the total number of new comments including its nested new comments
-    let totalNComments = freshNewComments.length
-    for (const comment of freshNewComments) {
-      totalNComments += (comment.ncomments || 0)
-    }
-
-    // update all ancestors, but not the item itself
-    const ancestors = data.path.split('.').slice(0, -1)
-    updateAncestorsCommentCount(client.cache, ancestors, totalNComments)
-
-    return {
-      ...data,
-      comments: { ...data.comments, comments: [...freshNewComments, ...data.comments.comments] },
-      ncomments: data.ncomments + totalNComments,
-      newComments: []
-    }
-  }
-}
-
-function showAllNewCommentsRecursively (client, item, currentDepth = 1) {
-  // handle new comments at this item level
-  if (item.newComments && item.newComments.length > 0) {
-    const dedupedNewComments = dedupeNewComments(item.newComments, item.comments?.comments)
-
-    if (dedupedNewComments.length > 0) {
-      const payload = prepareComments(client, dedupedNewComments)
-      commentUpdateFragment(client, item.id, payload)
-    }
-  }
-
-  // recursively handle new comments in child comments
-  if (item.comments?.comments && currentDepth < (COMMENT_DEPTH_LIMIT - 1)) {
-    for (const childComment of item.comments.comments) {
-      showAllNewCommentsRecursively(client, childComment, currentDepth + 1)
-    }
-  }
-}
-
-function dedupeNewComments (newComments, comments) {
-  const existingIds = new Set(comments.map(c => c.id))
-  return newComments.filter(id => !existingIds.has(id))
-}
-
-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))
-    }
-  }
-  return allNewComments
-}
-
-export function ShowNewComments ({ topLevel, sort, comments, itemId, item, setHasNewComments, newComments = [], depth = 1 }) {
+export const ShowNewComments = ({ topLevel, sort, comments, itemId, item, setHasNewComments, newComments = [], depth = 1 }) => {
   const client = useApolloClient()
-
   // if item is provided, we're showing all new comments for a thread,
   // otherwise we're showing new comments for a comment
   const isThread = !topLevel && item?.path.split('.').length === 2

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

lib/comments.js

@@ -1,3 +1,8 @@
+import { COMMENT_DEPTH_LIMIT } from './constants'
+import { commentUpdateFragment, getLatestCommentCreatedAt } from '../components/use-live-comments'
+import { commentsViewedAfterComment } from './new-comments'
+import { COMMENT_WITH_NEW_RECURSIVE } from '../fragments/comments'
+
 export function updateAncestorsCommentCount (cache, ancestors, increment) {
   // update all ancestors
   ancestors.forEach(id => {
@@ -12,3 +17,82 @@ export function updateAncestorsCommentCount (cache, ancestors, increment) {
     })
   })
 }
+
+// live comments - cache manipulations
+export function dedupeNewComments (newComments, comments) {
+  const existingIds = new Set(comments.map(c => c.id))
+  return newComments.filter(id => !existingIds.has(id))
+}
+
+export 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) {
+      allNewComments.push(...collectAllNewComments(comment, currentDepth + 1))
+    }
+  }
+  return allNewComments
+}
+
+export function prepareComments (client, newComments) {
+  return (data) => {
+    // newComments is an array of comment ids that allows us
+    // to read the latest newComments from the cache, guaranteeing that we're not reading stale data
+    const freshNewComments = newComments.map(id => {
+      const fragment = client.cache.readFragment({
+        id: `Item:${id}`,
+        fragment: COMMENT_WITH_NEW_RECURSIVE,
+        fragmentName: 'CommentWithNewRecursive'
+      })
+
+      if (!fragment) {
+        return null
+      }
+
+      return fragment
+    }).filter(Boolean)
+
+    // count the total number of new comments including its nested new comments
+    let totalNComments = freshNewComments.length
+    for (const comment of freshNewComments) {
+      totalNComments += (comment.ncomments || 0)
+    }
+
+    // update all ancestors, but not the item itself
+    const ancestors = data.path.split('.').slice(0, -1)
+    updateAncestorsCommentCount(client.cache, ancestors, totalNComments)
+
+    // update commentsViewedAt with the most recent fresh new comment
+    // quirk: this is not the most recent comment, it's the most recent comment in the freshNewComments array
+    //        as such, the next visit will not outline other new comments that have not been injected yet
+    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] },
+      ncomments: data.ncomments + totalNComments,
+      newComments: []
+    }
+  }
+}
+
+export function showAllNewCommentsRecursively (client, item, currentDepth = 1) {
+  // handle new comments at this item level
+  if (item.newComments && item.newComments.length > 0) {
+    const dedupedNewComments = dedupeNewComments(item.newComments, item.comments?.comments)
+
+    if (dedupedNewComments.length > 0) {
+      const payload = prepareComments(client, dedupedNewComments)
+      commentUpdateFragment(client, item.id, payload)
+    }
+  }
+
+  // recursively handle new comments in child comments
+  if (item.comments?.comments && currentDepth < (COMMENT_DEPTH_LIMIT - 1)) {
+    for (const childComment of item.comments.comments) {
+      showAllNewCommentsRecursively(client, childComment, currentDepth + 1)
+    }
+  }
+}

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;
 }