enhance: overhaul newly injected comments highlighting method, use client injected field

Author: Soxasora

api/typeDefs/item.js

@@ -150,6 +150,7 @@ export default gql`
     nDirectComments: Int!
     comments(sort: String, cursor: String): Comments!
     newComments(rootId: ID, after: Date): Comments!
+    injected: Boolean!
     path: String
     position: Int
     prior: Int

components/comment.js

@@ -140,19 +140,35 @@ export default function Comment ({
     }
   }, [item.id, cache, router.query.commentId])
 
+  const unsetOutline = () => {
+    ref.current.classList.add('outline-new-comment-unset')
+    // if the comment is injected, we need to change injected to false
+    // so that the next time the comment is rendered, it won't be outlined
+    if (item.injected) {
+      cache.writeFragment({
+        id: `Item:${item.id}`,
+        fragment: gql`
+          fragment CommentInjected on Item {
+            injected @client
+          }`,
+        data: {
+          injected: false
+        }
+      })
+    }
+  }
+
   useEffect(() => {
+    // an injected new comment needs a different class to reliably outline every new comment
+    if (item.injected && me?.id !== item.user?.id) {
+      ref.current.classList.add('outline-new-injected-comment')
+    }
+
     if (router.query.commentsViewedAt &&
         me?.id !== item.user?.id &&
-        !item.newComments &&
         new Date(item.createdAt).getTime() > router.query.commentsViewedAt) {
       ref.current.classList.add('outline-new-comment')
     }
-
-    // an injected new comment has the newComments field, a different class is needed
-    // to reliably outline every new comment
-    if (item.newComments && me?.id !== item.user?.id) {
-      ref.current.classList.add('outline-new-injected-comment')
-    }
   }, [item.id])
 
   const bottomedOut = depth === COMMENT_DEPTH_LIMIT || (item.comments?.comments.length === 0 && item.nDirectComments > 0)
@@ -167,8 +183,8 @@ export default function Comment ({
   return (
     <div
       ref={ref} className={includeParent ? '' : `${styles.comment} ${collapse === 'yep' ? styles.collapsed : ''}`}
-      onMouseEnter={() => ref.current.classList.add('outline-new-comment-unset')}
-      onTouchStart={() => ref.current.classList.add('outline-new-comment-unset')}
+      onMouseEnter={unsetOutline}
+      onTouchStart={unsetOutline}
     >
       <div className={`${itemStyles.item} ${styles.item}`}>
         {item.outlawed && !me?.privates?.wildWestMode

components/show-new-comments.js

@@ -49,7 +49,7 @@ function prepareComments (client, newComments) {
         return null
       }
 
-      return fragment
+      return { ...fragment, injected: true }
     }).filter(Boolean)
 
     // count the total number of new comments including its nested new comments

fragments/comments.js

@@ -48,6 +48,7 @@ export const COMMENT_FIELDS = gql`
     ncomments
     nDirectComments
     newComments @client
+    injected @client
     imgproxyUrls
     rel
     apiKey
@@ -130,6 +131,7 @@ export const COMMENT_WITH_NEW_RECURSIVE = gql`
       }
     }
     newComments @client
+    injected @client
   }
 `
 
@@ -144,6 +146,7 @@ export const COMMENT_WITH_NEW_LIMITED = gql`
       }
     }
     newComments @client
+    injected @client
   }
 `
 

lib/apollo.js

@@ -318,6 +318,11 @@ function getClient (uri) {
                 return newComments || []
               }
             },
+            injected: {
+              read (injected) {
+                return injected || false
+              }
+            },
             meAnonSats: {
               read (existingAmount, { readField }) {
                 if (SSR) return null