enhance: show all new comments recursively at every level but top level; cleanup: reduce complexity

enhancements:
- while recursively showing new comments, get their updated version to inject also even newer comments

cleanups:
- don't show how many comments are there to inject, to avoid useless complexity
- comments

Author: Soxasora

components/show-new-comments.js

@@ -36,8 +36,8 @@ function collectAllNewComments (item, currentDepth = 1) {
 // 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 us
-    // to read the latest newComments from the cache, guaranteeing that we're not reading stale 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}`,
@@ -49,6 +49,7 @@ function prepareComments (client, newComments) {
         return null
       }
 
+      // marking it as injected so that the new comment can be outlined
       return { ...fragment, injected: true }
     }).filter(Boolean)
 
@@ -92,9 +93,17 @@ function showAllNewCommentsRecursively (client, item, currentDepth = 1) {
     }
   }
 
+  // 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 (item.comments?.comments && currentDepth < (COMMENT_DEPTH_LIMIT - 1)) {
-    for (const childComment of item.comments.comments) {
+  if (updatedItem.comments?.comments && currentDepth < (COMMENT_DEPTH_LIMIT - 1)) {
+    for (const childComment of updatedItem.comments.comments) {
       showAllNewCommentsRecursively(client, childComment, currentDepth + 1)
     }
   }
@@ -106,7 +115,7 @@ export const ShowNewComments = ({ topLevel, sort, comments, itemId, item, setHas
   // otherwise we're showing new comments for a comment
   const isThread = !topLevel && item?.path.split('.').length === 2
   const allNewComments = useMemo(() => {
-    if (isThread) {
+    if (item) {
       // 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)
@@ -118,16 +127,16 @@ export const ShowNewComments = ({ topLevel, sort, comments, itemId, item, setHas
     if (isThread) {
       showAllNewCommentsRecursively(client, item, depth)
     } else {
-      // fetch the latest version of the comments from the cache by their ids
-      const payload = prepareComments(client, allNewComments)
       if (topLevel) {
+        // fetch the latest version of the comments from the cache by their ids
+        const payload = prepareComments(client, allNewComments)
         itemUpdateQuery(client, itemId, sort, payload)
       } else {
-        commentUpdateFragment(client, itemId, payload)
+        showAllNewCommentsRecursively(client, item, depth)
       }
     }
     setHasNewComments(false)
-  }, [client, itemId, allNewComments, topLevel, sort])
+  }, [client, itemId, allNewComments, topLevel, sort, item])
 
   if (allNewComments.length === 0) {
     return null
@@ -138,9 +147,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>
   )