enhance: highlight new comment with injected field, recursive injection in every case but top level; cleanups

cleanups:
- better separation of concerns for lib/comments.js
- don't show new comment count, avoiding useless complexity
- simpler topLevel/nested logic
- add comments

Author: Soxasora

api/typeDefs/item.js

@@ -150,6 +150,7 @@ export default gql`
     nDirectComments: Int!
     comments(sort: String, cursor: String): Comments!
     newComments(rootId: ID, after: Date): Comments!
+    injected: Boolean!
     path: String
     position: Int
     prior: Int

components/comment.js

@@ -140,19 +140,35 @@ export default function Comment ({
     }
   }, [item.id, cache, router.query.commentId])
 
+  const unsetOutline = () => {
+    ref.current.classList.add('outline-new-comment-unset')
+    // if the comment is injected, we need to change injected to false
+    // so that the next time the comment is rendered, it won't be outlined
+    if (item.injected) {
+      cache.writeFragment({
+        id: `Item:${item.id}`,
+        fragment: gql`
+          fragment CommentInjected on Item {
+            injected @client
+          }`,
+        data: {
+          injected: false
+        }
+      })
+    }
+  }
+
   useEffect(() => {
+    // an injected new comment needs a different class to reliably outline every new comment
+    if (item.injected && me?.id !== item.user?.id) {
+      ref.current.classList.add('outline-new-injected-comment')
+    }
+
     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)
@@ -167,8 +183,8 @@ export default function Comment ({
   return (
     <div
       ref={ref} className={includeParent ? '' : `${styles.comment} ${collapse === 'yep' ? styles.collapsed : ''}`}
-      onMouseEnter={() => ref.current.classList.add('outline-new-comment-unset')}
-      onTouchStart={() => ref.current.classList.add('outline-new-comment-unset')}
+      onMouseEnter={unsetOutline}
+      onTouchStart={unsetOutline}
     >
       <div className={`${itemStyles.item} ${styles.item}`}>
         {item.outlawed && !me?.privates?.wildWestMode

components/show-new-comments.js

@@ -1,43 +1,117 @@
 import { useCallback, useMemo } from 'react'
 import { useApolloClient } from '@apollo/client'
 import styles from './comment.module.css'
+import { COMMENT_DEPTH_LIMIT } from '../lib/constants'
+import { COMMENT_WITH_NEW_RECURSIVE } from '../fragments/comments'
+import { commentsViewedAfterComment } from '../lib/new-comments'
 import {
   itemUpdateQuery,
   commentUpdateFragment,
-  prepareComments,
-  dedupeNewComments,
-  collectAllNewComments,
-  showAllNewCommentsRecursively
+  getLatestCommentCreatedAt,
+  updateAncestorsCommentCount
 } from '../lib/comments'
 
+// filters out new comments, by id, that already exist in the item's comments
+// preventing duplicate comments from being injected
+function dedupeNewComments (newComments, comments) {
+  console.log('dedupeNewComments', newComments, comments)
+  const existingIds = new Set(comments.map(c => c.id))
+  return newComments.filter(id => !existingIds.has(id))
+}
+
+// prepares and creates a new comments fragment for injection into the cache
+// returns a function that can be used to update an item's comments field
+function prepareComments (client, newComments) {
+  return (data) => {
+    // newComments is an array of comment ids that allows usto 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
+      }
+
+      // marking it as injected so that the new comment can be outlined
+      return { ...fragment, injected: true }
+    }).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 the updated item with the new comments injected
+    return {
+      ...data,
+      comments: { ...data.comments, comments: [...freshNewComments, ...data.comments.comments] },
+      ncomments: data.ncomments + totalNComments,
+      newComments: []
+    }
+  }
+}
+
+// recursively processes and displays all new comments for a thread
+// handles comment injection at each level, respecting depth limits
+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)
+    }
+  }
+
+  // read the updated item from the cache
+  // this is necessary because the item may have been updated by the time we get to the child comments
+  const updatedItem = client.cache.readFragment({
+    id: `Item:${item.id}`,
+    fragment: COMMENT_WITH_NEW_RECURSIVE,
+    fragmentName: 'CommentWithNewRecursive'
+  })
+
+  // recursively handle new comments in child comments
+  if (updatedItem.comments?.comments && currentDepth < (COMMENT_DEPTH_LIMIT - 1)) {
+    for (const childComment of updatedItem.comments.comments) {
+      showAllNewCommentsRecursively(client, childComment, currentDepth + 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
-  const allNewComments = useMemo(() => {
-    if (isThread) {
-      // TODO: well are we only collecting all new comments just for a fancy UI?
-      // TODO2: also, we're not deduping new comments here, so we're showing duplicates
-      return collectAllNewComments(item, depth)
-    }
-    return dedupeNewComments(newComments, comments)
-  }, [isThread, item, newComments, comments, depth])
+  const allNewComments = useMemo(() => dedupeNewComments(newComments, comments), [newComments, comments])
 
   const showNewComments = useCallback(() => {
-    if (isThread) {
-      showAllNewCommentsRecursively(client, item, depth)
-    } else {
-      // fetch the latest version of the comments from the cache by their ids
+    if (topLevel) {
       const payload = prepareComments(client, allNewComments)
-      if (topLevel) {
-        itemUpdateQuery(client, itemId, sort, payload)
-      } else {
-        commentUpdateFragment(client, itemId, payload)
-      }
+      itemUpdateQuery(client, itemId, sort, payload)
+    } else {
+      showAllNewCommentsRecursively(client, item, depth)
     }
     setHasNewComments(false)
-  }, [client, itemId, allNewComments, topLevel, sort])
+  }, [client, itemId, allNewComments, topLevel, sort, item])
 
   if (allNewComments.length === 0) {
     return null
@@ -48,9 +122,7 @@ export const ShowNewComments = ({ topLevel, sort, comments, itemId, item, setHas
       onClick={showNewComments}
       className={`${topLevel && `d-block fw-bold ${styles.comment} pb-2`} d-flex align-items-center gap-2 px-3 pointer`}
     >
-      {allNewComments.length > 1
-        ? `${isThread ? 'show all ' : ''}${allNewComments.length} new comments`
-        : 'show new comment'}
+      show {isThread ? 'all' : ''} new comments
       <div className={styles.newCommentDot} />
     </div>
   )

components/use-live-comments.js

@@ -6,6 +6,46 @@ import { itemUpdateQuery, commentUpdateFragment, getLatestCommentCreatedAt } fro
 
 const POLL_INTERVAL = 1000 * 10 // 10 seconds
 
+// merge new comment into item's newComments
+// and prevent duplicates by checking if the comment is already in item's newComments or existing comments
+function mergeNewComment (item, newComment) {
+  const existingNewComments = item.newComments || []
+  const existingComments = item.comments?.comments || []
+
+  // is the incoming new comment already in item's new comments or existing comments?
+  if (existingNewComments.includes(newComment.id) || existingComments.some(c => c.id === newComment.id)) {
+    return item
+  }
+
+  return { ...item, newComments: [...existingNewComments, newComment.id] }
+}
+
+function cacheNewComments (client, rootId, newComments, sort) {
+  const queuedComments = []
+
+  for (const newComment of newComments) {
+    const { parentId } = newComment
+    const topLevel = Number(parentId) === Number(rootId)
+
+    // if the comment is a top level comment, update the item
+    if (topLevel) {
+      // merge the new comment into the item's newComments field, checking for duplicates
+      itemUpdateQuery(client, rootId, sort, (data) => mergeNewComment(data, newComment))
+    } else {
+      // if the comment is a reply, update the parent comment
+      // merge the new comment into the parent comment's newComments field, checking for duplicates
+      const result = commentUpdateFragment(client, parentId, (data) => mergeNewComment(data, newComment))
+
+      if (!result) {
+        // parent not in cache, queue for retry
+        queuedComments.push(newComment)
+      }
+    }
+  }
+
+  return { queuedComments }
+}
+
 // useLiveComments fetches new comments under an item (rootId), that arrives after the latest comment createdAt
 // and inserts them into the newComment client field of their parent comment/post.
 export default function useLiveComments (rootId, after, sort, setHasNewComments) {
@@ -46,43 +86,3 @@ export default function useLiveComments (rootId, after, sort, setHasNewComments)
     }
   }, [])
 }
-
-function cacheNewComments (client, rootId, newComments, sort) {
-  const queuedComments = []
-
-  for (const newComment of newComments) {
-    const { parentId } = newComment
-    const topLevel = Number(parentId) === Number(rootId)
-
-    // if the comment is a top level comment, update the item
-    if (topLevel) {
-      // merge the new comment into the item's newComments field, checking for duplicates
-      itemUpdateQuery(client, rootId, sort, (data) => mergeNewComment(data, newComment))
-    } else {
-      // if the comment is a reply, update the parent comment
-      // merge the new comment into the parent comment's newComments field, checking for duplicates
-      const result = commentUpdateFragment(client, parentId, (data) => mergeNewComment(data, newComment))
-
-      if (!result) {
-        // parent not in cache, queue for retry
-        queuedComments.push(newComment)
-      }
-    }
-  }
-
-  return { queuedComments }
-}
-
-// merge new comment into item's newComments
-// and prevent duplicates by checking if the comment is already in item's newComments or existing comments
-function mergeNewComment (item, newComment) {
-  const existingNewComments = item.newComments || []
-  const existingComments = item.comments?.comments || []
-
-  // is the incoming new comment already in item's new comments or existing comments?
-  if (existingNewComments.includes(newComment.id) || existingComments.some(c => c.id === newComment.id)) {
-    return item
-  }
-
-  return { ...item, newComments: [...existingNewComments, newComment.id] }
-}

fragments/comments.js

@@ -48,6 +48,7 @@ export const COMMENT_FIELDS = gql`
     ncomments
     nDirectComments
     newComments @client
+    injected @client
     imgproxyUrls
     rel
     apiKey
@@ -130,6 +131,7 @@ export const COMMENT_WITH_NEW_RECURSIVE = gql`
       }
     }
     newComments @client
+    injected @client
   }
 `
 
@@ -144,6 +146,7 @@ export const COMMENT_WITH_NEW_LIMITED = gql`
       }
     }
     newComments @client
+    injected @client
   }
 `
 

lib/apollo.js

@@ -318,6 +318,11 @@ function getClient (uri) {
                 return newComments || []
               }
             },
+            injected: {
+              read (injected) {
+                return injected || false
+              }
+            },
             meAnonSats: {
               read (existingAmount, { readField }) {
                 if (SSR) return null