fix: dedupe newComments before displaying ShowNewComments to avoid false positives

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>}

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/show-new-comments.js

@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'
 import { useApolloClient } from '@apollo/client'
 import { COMMENT_WITH_NEW } from '../fragments/comments'
 import styles from './comment.module.css'
@@ -36,25 +36,35 @@ function prepareComments (client, 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(() => {
+    return newComments.filter(c => !comments.some(cc => cc.id === c.id))
+  }, [newComments, comments])
+
   const showNewComments = useCallback(() => {
-    const payload = prepareComments(client, newComments)
+    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>
   )