enhance: give the possibility to show all new comments of a thread, even nested

Author: Soxasora

components/comment.js

@@ -28,7 +28,7 @@ import LinkToContext from './link-to-context'
 import Boost from './boost-button'
 import { gql, useApolloClient } from '@apollo/client'
 import classNames from 'classnames'
-import { ShowNewComments } from './show-new-comments'
+import { ShowAllNewComments, ShowNewComments } from './show-new-comments'
 
 function Parent ({ item, rootText }) {
   const root = useRoot()
@@ -262,9 +262,9 @@ export default function Comment ({
                   <Reply depth={depth + 1} item={item} replyOpen={replyOpen} onCancelQuote={cancelQuote} onQuoteReply={quoteReply} quote={quote}>
                     {root.bounty && !bountyPaid && <PayBounty item={item} />}
                     <div className='ms-auto'>
-                      {item.newComments?.length > 0 && (
-                        <ShowNewComments comments={item.comments.comments} newComments={item.newComments} itemId={item.id} />
-                      )}
+                      {item.path.split('.').length === 2
+                        ? <ShowAllNewComments item={item} />
+                        : <ShowNewComments comments={item.comments.comments} newComments={item.newComments} itemId={item.id} />}
                     </div>
                   </Reply>}
               {children}

components/show-new-comments.js

@@ -42,14 +42,71 @@ function prepareComments (client, newComments) {
   }
 }
 
+function showAllNewCommentsRecursively (client, item) {
+  // 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) {
+    for (const childComment of item.comments.comments) {
+      showAllNewCommentsRecursively(client, childComment)
+    }
+  }
+}
+
+function dedupeNewComments (newComments, comments) {
+  const existingIds = new Set(comments.map(c => c.id))
+  return newComments.filter(id => !existingIds.has(id))
+}
+
+function collectAllNewComments (item) {
+  const allNewComments = [...(item.newComments || [])]
+  if (item.comments?.comments) {
+    for (const comment of item.comments.comments) {
+      allNewComments.push(...collectAllNewComments(comment))
+    }
+  }
+  return allNewComments
+}
+
+// TODO: merge this with ShowNewComments
+export function ShowAllNewComments ({ item }) {
+  const client = useApolloClient()
+
+  const newComments = useMemo(() => collectAllNewComments(item), [item])
+
+  const showNewComments = useCallback(() => {
+    showAllNewCommentsRecursively(client, item)
+  }, [client, item])
+
+  if (newComments.length === 0) {
+    return null
+  }
+
+  return (
+    <div
+      onClick={showNewComments}
+      className='d-flex align-items-center gap-2 px-3 pointer'
+    >
+      {newComments.length > 1
+        ? `show all ${newComments.length} new comments`
+        : 'show new comment'}
+      <div className={styles.newCommentDot} />
+    </div>
+  )
+}
+
 // ShowNewComments is a component that dedupes, refreshes and injects newComments into the comments field
 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 dedupedNewComments = useMemo(() => dedupeNewComments(newComments, comments), [newComments, comments])
 
   const showNewComments = useCallback(() => {
     // fetch the latest version of the comments from the cache by their ids