feat: live comments indicator for bottomed-out replies, ncomments updates; fix: nested comment structures

- new comments indicator for bottomed-out replies
- ncomments sync for parent and its ancestors
- limited comments fragment for comments that don't have CommentsRecursive
- reduce cache complexity by removing useless roundtrips

ux: live comments indicator on bottomedOut replies

fix: dedupe newComments before displaying ShowNewComments to avoid false positives

enhance: store ids of new comments in the cache, instead of carrying full comments that would get discarded anyway

hotfix: newComments deduplication ID mismatch, filter null comments from freshNewComments

fix: ncomments not updating for all comment levels; refactor: share Reply update ancestors' ncomments function with ShowNewComments

cleanup: better naming to indicate the total number of comments including nested comments

fix: increment parent comment ncomments

cleanup: Items that will have comments will always have a structure where item.comments is true

cleanup: reduce code complexity checking the nested comment update result instead of preventively reading the fragment

cleanup: avoid double-updating ncomments on parent

fix: don't use CommentsRecursive for bottomed-out comments

cleanup: better fragment naming; add TODO for absolute bottom comments

Author: Soxasora

components/comment.js

@@ -263,7 +263,7 @@ export default function Comment ({
                     {root.bounty && !bountyPaid && <PayBounty item={item} />}
                     <div className='ms-auto'>
                       {item.newComments?.length > 0 && (
-                        <ShowNewComments newComments={item.newComments} itemId={item.id} />
+                        <ShowNewComments comments={item.comments.comments} newComments={item.newComments} itemId={item.id} />
                       )}
                     </div>
                   </Reply>}
@@ -310,8 +310,9 @@ function ReplyOnAnotherPage ({ item }) {
   }
 
   return (
-    <Link href={`/items/${rootId}?commentId=${item.id}`} as={`/items/${rootId}`} className='d-block pb-2 fw-bold text-muted'>
+    <Link href={`/items/${rootId}?commentId=${item.id}`} as={`/items/${rootId}`} className='pb-2 fw-bold d-flex align-items-center gap-2 text-muted'>
       {text}
+      {item.newComments?.length > 0 && <div className={styles.newCommentDot} />}
     </Link>
   )
 }

components/comments.js

@@ -93,7 +93,7 @@ export default function Comments ({
           />
         : null}
       {newComments?.length > 0 && (
-        <ShowNewComments topLevel newComments={newComments} itemId={parentId} sort={router.query.sort} />
+        <ShowNewComments topLevel comments={comments} newComments={newComments} itemId={parentId} sort={router.query.sort} />
       )}
       {pins.map(item => (
         <Fragment key={item.id}>

components/item-full.js

@@ -182,18 +182,19 @@ export default function ItemFull ({ item, fetchMoreComments, bio, rank, ...props
                 ? <BioItem item={item} {...props} />
                 : <TopLevelItem item={item} {...props} />}
               </div>)}
-          <div className={styles.comments}>
-            <Comments
-              parentId={item.id} parentCreatedAt={item.createdAt}
-              pinned={item.position} bio={bio} commentSats={item.commentSats}
-              ncomments={item.ncomments}
-              comments={item.comments.comments}
-              commentsCursor={item.comments.cursor}
-              fetchMoreComments={fetchMoreComments}
-              newComments={item.newComments}
-              lastCommentAt={item.lastCommentAt}
-            />
-          </div>
+          {item.comments &&
+            <div className={styles.comments}>
+              <Comments
+                parentId={item.id} parentCreatedAt={item.createdAt}
+                pinned={item.position} bio={bio} commentSats={item.commentSats}
+                ncomments={item.ncomments}
+                comments={item.comments.comments}
+                commentsCursor={item.comments.cursor}
+                fetchMoreComments={fetchMoreComments}
+                newComments={item.newComments}
+                lastCommentAt={item.lastCommentAt}
+              />
+            </div>}
         </CarouselProvider>
       </RootProvider>
     </>

components/reply.js

@@ -13,6 +13,7 @@ import { useRoot } from './root'
 import { CREATE_COMMENT } from '@/fragments/paidAction'
 import useItemSubmit from './use-item-submit'
 import gql from 'graphql-tag'
+import { updateAncestorsCommentCount } from '@/lib/comments'
 
 export default forwardRef(function Reply ({
   item,
@@ -82,17 +83,7 @@ export default forwardRef(function Reply ({
         const ancestors = item.path.split('.')
 
         // update all ancestors
-        ancestors.forEach(id => {
-          cache.modify({
-            id: `Item:${id}`,
-            fields: {
-              ncomments (existingNComments = 0) {
-                return existingNComments + 1
-              }
-            },
-            optimistic: true
-          })
-        })
+        updateAncestorsCommentCount(cache, ancestors, 1)
 
         // so that we don't see indicator for our own comments, we record this comments as the latest time
         // but we also have record num comments, in case someone else commented when we did

components/show-new-comments.js

@@ -1,60 +1,79 @@
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'
 import { useApolloClient } from '@apollo/client'
-import { COMMENT_WITH_NEW } from '../fragments/comments'
+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'
 
 function prepareComments (client, newComments) {
   return (data) => {
-    // TODO: it might be sane to pass the cache ref to the ShowNewComments component
-    // TODO: and use it to read the latest newComments from the cache
-    // newComments can have themselves new comments between the time the button is clicked and the query is executed
-    // so we need to read the latest newComments from the cache
-    const freshNewComments = newComments.map(c => {
+    // 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:${c.id}`,
-        fragment: COMMENT_WITH_NEW,
-        fragmentName: 'CommentWithNew'
+        id: `Item:${id}`,
+        fragment: COMMENT_WITH_NEW_RECURSIVE,
+        fragmentName: 'CommentWithNewRecursive'
       })
-      // if the comment is not in the cache, return the original comment
-      return fragment || c
-    })
 
-    // count the total number of comments including nested comments
-    let ncomments = data.ncomments + freshNewComments.length
+      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) {
-      ncomments += (comment.ncomments || 0)
+      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,
+      ncomments: data.ncomments + totalNComments,
       newComments: []
     }
   }
 }
 
 // ShowNewComments is a component that dedupes, refreshes and injects newComments into the comments field
-export function ShowNewComments ({ newComments = [], itemId, topLevel = false, sort }) {
+export function ShowNewComments ({ topLevel = false, comments, newComments = [], itemId, sort }) {
   const client = useApolloClient()
 
+  const dedupedNewComments = useMemo(() => {
+    const existingIds = new Set(comments.map(c => c.id))
+    return newComments.filter(id => !existingIds.has(id))
+  }, [newComments, comments])
+
   const showNewComments = useCallback(() => {
-    const payload = prepareComments(client, newComments)
+    // fetch the latest version of the comments from the cache by their ids
+    const payload = prepareComments(client, dedupedNewComments)
 
     if (topLevel) {
       itemUpdateQuery(client, itemId, sort, payload)
     } else {
       commentUpdateFragment(client, itemId, payload)
     }
-  }, [client, itemId, newComments, topLevel, sort])
+  }, [client, itemId, dedupedNewComments, topLevel, sort])
+
+  if (dedupedNewComments.length === 0) {
+    return null
+  }
 
   return (
     <div
       onClick={showNewComments}
       className={`${topLevel && `d-block fw-bold ${styles.comment} pb-2`} d-flex align-items-center gap-2 px-3 pointer`}
     >
-      {newComments.length > 1 ? `${newComments.length} new comments` : 'show new comment'}
+      {dedupedNewComments.length > 1
+        ? `${dedupedNewComments.length} new comments`
+        : 'show new comment'}
       <div className={styles.newCommentDot} />
     </div>
   )

components/use-live-comments.js

@@ -1,6 +1,6 @@
 import { useQuery, useApolloClient } from '@apollo/client'
 import { SSR } from '../lib/constants'
-import { GET_NEW_COMMENTS, COMMENT_WITH_NEW } from '../fragments/comments'
+import { GET_NEW_COMMENTS, COMMENT_WITH_NEW_LIMITED, COMMENT_WITH_NEW_RECURSIVE } from '../fragments/comments'
 import { ITEM_FULL } from '../fragments/items'
 import { useEffect, useRef, useState } from 'react'
 
@@ -60,14 +60,29 @@ export function itemUpdateQuery (client, id, sort, fn) {
 
 // update the newComments field of a nested comment fragment
 export function commentUpdateFragment (client, id, fn) {
-  client.cache.updateFragment({
+  let result = client.cache.updateFragment({
     id: `Item:${id}`,
-    fragment: COMMENT_WITH_NEW,
-    fragmentName: 'CommentWithNew'
+    fragment: COMMENT_WITH_NEW_RECURSIVE,
+    fragmentName: 'CommentWithNewRecursive'
   }, (data) => {
     if (!data) return data
     return fn(data)
   })
+
+  // sometimes comments can reach their depth limit, and lack adherence to the CommentsRecursive fragment
+  // for this reason, we update the fragment with a limited version that only includes the CommentFields fragment
+  if (!result) {
+    result = client.cache.updateFragment({
+      id: `Item:${id}`,
+      fragment: COMMENT_WITH_NEW_LIMITED,
+      fragmentName: 'CommentWithNewLimited'
+    }, (data) => {
+      if (!data) return data
+      return fn(data)
+    })
+  }
+
+  return result
 }
 
 function cacheNewComments (client, rootId, newComments, sort) {
@@ -83,17 +98,10 @@ function cacheNewComments (client, rootId, newComments, sort) {
       itemUpdateQuery(client, rootId, sort, (data) => mergeNewComment(data, newComment))
     } else {
       // if the comment is a reply, update the parent comment
-      // but first check if parent exists in cache before attempting update
-      const parentExists = client.cache.readFragment({
-        id: `Item:${parentId}`,
-        fragment: COMMENT_WITH_NEW,
-        fragmentName: 'CommentWithNew'
-      })
+      // merge the new comment into the parent comment's newComments field, checking for duplicates
+      const result = commentUpdateFragment(client, parentId, (data) => mergeNewComment(data, newComment))
 
-      if (parentExists) {
-        // merge the new comment into the parent comment's newComments field, checking for duplicates
-        commentUpdateFragment(client, parentId, (data) => mergeNewComment(data, newComment))
-      } else {
+      if (!result) {
         // parent not in cache, queue for retry
         queuedComments.push(newComment)
       }
@@ -110,11 +118,11 @@ function mergeNewComment (item, newComment) {
   const existingComments = item.comments?.comments || []
 
   // is the incoming new comment already in item's new comments or existing comments?
-  if (existingNewComments.some(c => c.id === newComment.id) || existingComments.some(c => c.id === newComment.id)) {
+  if (existingNewComments.includes(newComment.id) || existingComments.some(c => c.id === newComment.id)) {
     return item
   }
 
-  return { ...item, newComments: [...existingNewComments, newComment] }
+  return { ...item, newComments: [...existingNewComments, newComment.id] }
 }
 
 function getLatestCommentCreatedAt (comments, latest) {

fragments/comments.js

@@ -118,11 +118,11 @@ export const COMMENTS = gql`
     }
   }`
 
-export const COMMENT_WITH_NEW = gql`
+export const COMMENT_WITH_NEW_RECURSIVE = gql`
   ${COMMENT_FIELDS}
   ${COMMENTS}
   
-  fragment CommentWithNew on Item {
+  fragment CommentWithNewRecursive on Item {
     ...CommentFields
     comments {
       comments {
@@ -133,6 +133,31 @@ export const COMMENT_WITH_NEW = gql`
   }
 `
 
+export const COMMENT_WITH_NEW_LIMITED = gql`
+  ${COMMENT_FIELDS}
+  
+  fragment CommentWithNewLimited on Item {
+    ...CommentFields
+    comments {
+      comments {
+        ...CommentFields
+      }
+    }
+    newComments @client
+  }
+`
+
+// TODO: fragment for comments without item.comments field
+// TODO: remove if useless to pursue
+export const COMMENT_WITH_NEW = gql`
+  ${COMMENT_FIELDS}
+  
+  fragment CommentWithNew on Item {
+    ...CommentFields
+    newComments @client
+  }
+`
+
 export const GET_NEW_COMMENTS = gql`
   ${COMMENTS}
   

lib/comments.js

@@ -0,0 +1,14 @@
+export function updateAncestorsCommentCount (cache, ancestors, increment) {
+  // update all ancestors
+  ancestors.forEach(id => {
+    cache.modify({
+      id: `Item:${id}`,
+      fields: {
+        ncomments (existingNComments = 0) {
+          return existingNComments + increment
+        }
+      },
+      optimistic: true
+    })
+  })
+}