refactor: merge ShowAllNewComments with ShowNewComments, better usage of props

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 { ShowAllNewComments, ShowNewComments } from './show-new-comments'
+import { ShowNewComments } from './show-new-comments'
 
 function Parent ({ item, rootText }) {
   const root = useRoot()
@@ -262,9 +262,7 @@ 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.path.split('.').length === 2
-                        ? <ShowAllNewComments item={item} setHasNewComments={setHasNewComments} />
-                        : <ShowNewComments comments={item.comments.comments} newComments={item.newComments} itemId={item.id} setHasNewComments={setHasNewComments} />}
+                      <ShowNewComments comments={item.comments.comments} newComments={item.newComments} itemId={item.id} item={item} setHasNewComments={setHasNewComments} />
                     </div>
                   </Reply>}
               {children}
@@ -273,7 +271,7 @@ export default function Comment ({
                   ? (
                     <>
                       {item.comments.comments.map((item) => (
-                        <Comment depth={depth + 1} key={item.id} item={item} />
+                        <Comment depth={depth + 1} key={item.id} item={item} setHasNewComments={setHasNewComments} />
                       ))}
                       {item.comments.comments.length < item.nDirectComments && <ViewAllReplies id={item.id} nhas={item.ncomments} />}
                     </>

components/comments.js

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

components/show-new-comments.js

@@ -76,52 +76,36 @@ function collectAllNewComments (item) {
   return allNewComments
 }
 
-// TODO: merge this with ShowNewComments
-export function ShowAllNewComments ({ item, setHasNewComments }) {
+export function ShowNewComments ({ sort, comments, newComments = [], itemId, item, setHasNewComments }) {
   const client = useApolloClient()
 
-  const newComments = useMemo(() => collectAllNewComments(item), [item])
-
-  const showNewComments = useCallback(() => {
-    showAllNewCommentsRecursively(client, item)
-    setHasNewComments(false)
-  }, [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, setHasNewComments }) {
-  const client = useApolloClient()
-  const dedupedNewComments = useMemo(() => dedupeNewComments(newComments, comments), [newComments, comments])
+  const topLevel = !!sort
+  // if item is provided, we're showing all new comments for a thread,
+  // otherwise we're showing new comments for a comment
+  const isThread = !!item
+  const allNewComments = useMemo(() => {
+    if (isThread) {
+      return collectAllNewComments(item)
+    }
+    return dedupeNewComments(newComments, comments)
+  }, [isThread, item, newComments, comments])
 
   const showNewComments = useCallback(() => {
-    // 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)
+    if (isThread) {
+      showAllNewCommentsRecursively(client, item)
     } else {
-      commentUpdateFragment(client, itemId, payload)
+      // fetch the latest version of the comments from the cache by their ids
+      const payload = prepareComments(client, allNewComments)
+      if (topLevel) {
+        itemUpdateQuery(client, itemId, sort, payload)
+      } else {
+        commentUpdateFragment(client, itemId, payload)
+      }
     }
     setHasNewComments(false)
-  }, [client, itemId, dedupedNewComments, topLevel, sort])
+  }, [client, itemId, allNewComments, topLevel, sort])
 
-  if (dedupedNewComments.length === 0) {
+  if (allNewComments.length === 0) {
     return null
   }
 
@@ -130,8 +114,8 @@ export function ShowNewComments ({ topLevel = false, comments, newComments = [],
       onClick={showNewComments}
       className={`${topLevel && `d-block fw-bold ${styles.comment} pb-2`} d-flex align-items-center gap-2 px-3 pointer`}
     >
-      {dedupedNewComments.length > 1
-        ? `${dedupedNewComments.length} new comments`
+      {allNewComments.length > 1
+        ? `${isThread ? 'show all ' : ''}${allNewComments.length} new comments`
         : 'show new comment'}
       <div className={styles.newCommentDot} />
     </div>