Refactor live comments and comment injection (#2462)

* Fix duplicate comment on pessimistic creation

- comment creation checks for comment's ID existence in cache
- invoice.confirmedAt included in useCanEdit deps for anons live comments

* switch to some as sets are not worth it

* only check for duplicates if a pessimistic payment method has been used

* default to empty array

* add comment about side-effects

* record ownership of an item to avoid injecting it via live comments

* trigger check only if the incoming comment is ours, cleanup

* correct conditions, correct comments, light cleanup

* fix: add defensive condition to ownership recorder, better name

* refactor: unified comment injection logic with deduplication, useCommentsView hook; revert sessionStorage-based fix

* adjust live comments naming around the codebase

* listen for hmac presence for anon edits

* always return the injected comment createdAt to bump live comments

* refactor: improve live comments hook readability

- latest comment createdAt persistence helper
- preserveScroll returns the returning value of the callback
- compact conditional logic
- refresh code comments
- refresh naming
- group constants
- reorder imports

* flat comment injection, fetch flat comments instead of the entire subtree that would've been deduplicated anyway, cleanup

* always align new comment fragment to the comments query structure

* generic useCommentsView hook

* update comment counts if live injecting into fragments without comments field

* fix: pass parentId, if a comment has a top level parent it always has the comments field

* fix: update CommentsViewAt only if we actually injected a comment into cache

* correct injectComment result usage

* pass markViewedAt to further centralize side effects, remove live from Item server typedefs

* fix: don't update counts for ancestors that are already up to date, update commentsViewedAt per batch not per comment

* port: fix coalesce, useCommentsView hook and outline changes

* update hmac field in cache on paid invoice, hmac as useCanEdit effect dependency

* comments and light cleanup, update useCommentsView

* efficient hasComments logic for live comments, establish a gql fragment

* fix: typo on topLevel evaluation

* limit extra evaluations to live comments scenarios

* update comments

* support live comments ncomments increments for anon view tracking

Author: Soxasora

api/resolvers/item.js

@@ -743,7 +743,7 @@ export default {
         subMaxBoost: subAgg?._max.boost || 0
       }
     },
-    newComments: async (parent, { topLevelId, after }, { models, me }) => {
+    newComments: async (parent, { itemId, after }, { models, me }) => {
       const comments = await itemQueryWithMeta({
         me,
         models,
@@ -757,7 +757,7 @@ export default {
             '"Item"."created_at" > $2'
           )}
           ORDER BY "Item"."created_at" ASC`
-      }, Number(topLevelId), after)
+      }, Number(itemId), after)
 
       return { comments }
     }

api/typeDefs/item.js

@@ -12,7 +12,7 @@ export default gql`
     auctionPosition(sub: String, id: ID, boost: Int): Int!
     boostPosition(sub: String, id: ID, boost: Int): BoostPositions!
     itemRepetition(parentId: ID): Int!
-    newComments(topLevelId: ID, after: Date): Comments!
+    newComments(itemId: ID, after: Date): Comments!
   }
 
   type BoostPositions {
@@ -151,7 +151,6 @@ export default gql`
     ncomments: Int!
     nDirectComments: Int!
     comments(sort: String, cursor: String): Comments!
-    injected: Boolean!
     path: String
     position: Int
     prior: Int

components/comment.js

@@ -120,11 +120,11 @@ export default function Comment ({
 
     const classes = ref.current.classList
     const hasOutline = classes.contains('outline-new-comment')
-    const hasInjectedOutline = classes.contains('outline-new-injected-comment')
+    const hasLiveOutline = classes.contains('outline-new-live-comment')
     const hasOutlineUnset = classes.contains('outline-new-comment-unset')
 
     // don't try to untrack and unset the outline if the comment is not outlined or we already unset the outline
-    if (!(hasInjectedOutline || hasOutline) || hasOutlineUnset) return
+    if (!(hasLiveOutline || hasOutline) || hasOutlineUnset) return
 
     classes.add('outline-new-comment-unset')
     // untrack new comment and its descendants if it's not a live comment
@@ -166,22 +166,22 @@ export default function Comment ({
     const viewedAt = me?.id ? meViewedAt : router.query.commentsViewedAt
 
     const isNewComment = viewedAt && itemCreatedAt > viewedAt
-    // injected comments are new regardless of me or anon view time
+    // live comments are new regardless of me or anon view time
     const rootLast = new Date(root.lastCommentAt || root.createdAt).getTime()
-    const isNewInjectedComment = item.injected && itemCreatedAt > (meViewedAt || rootLast)
+    const isNewLiveComment = item.live && itemCreatedAt > (meViewedAt || rootLast)
 
-    if (!isNewComment && !isNewInjectedComment) return
+    if (!isNewComment && !isNewLiveComment) return
 
-    if (item.injected) {
-      // newly injected comments (item.injected) have to use a different class to outline every new comment
-      ref.current.classList.add('outline-new-injected-comment')
+    if (item.live) {
+      // live comments (item.live) have to use a different class to outline every new comment
+      ref.current.classList.add('outline-new-live-comment')
 
       // wait for the injection animation to end before removing its class
       ref.current.addEventListener('animationend', () => {
-        ref.current.classList.remove(styles.injectedComment)
+        ref.current.classList.remove(styles.liveComment)
       }, { once: true })
       // animate the live comment injection
-      ref.current.classList.add(styles.injectedComment)
+      ref.current.classList.add(styles.liveComment)
     } else {
       ref.current.classList.add('outline-new-comment')
     }

components/comment.module.css

@@ -139,7 +139,7 @@
     padding-top: .5rem;
 }
 
-.injectedComment {
+.liveComment {
     animation: fadeIn 0.5s ease-out;
 }
 

components/comments.js

@@ -71,7 +71,7 @@ export default function Comments ({
   const router = useRouter()
 
   // fetch new comments that arrived after the lastCommentAt, and update the item.comments field in cache
-  useLiveComments(parentId, lastCommentAt || parentCreatedAt, router.query.sort)
+  useLiveComments(parentId, lastCommentAt || parentCreatedAt)
 
   // new comments navigator, tracks new comments and provides navigation controls
   const { navigator } = useCommentsNavigatorContext()

components/preserve-scroll.js

@@ -4,8 +4,7 @@ export default function preserveScroll (callback) {
 
   // if the scroll position is at the top, we don't need to preserve it, just call the callback
   if (scrollTop <= 0) {
-    callback()
-    return
+    return callback()
   }
 
   // get a reference element at the center of the viewport to track if content is added above it
@@ -49,5 +48,5 @@ export default function preserveScroll (callback) {
 
   observer.observe(document.body, { childList: true, subtree: true })
 
-  callback()
+  return callback()
 }

components/reply.js

@@ -1,6 +1,5 @@
 import { Form, MarkdownInput } from '@/components/form'
 import styles from './reply.module.css'
-import { COMMENTS } from '@/fragments/comments'
 import { useMe } from './me'
 import { forwardRef, useCallback, useEffect, useState, useRef, useMemo } from 'react'
 import { FeeButtonProvider, postCommentBaseLineItems, postCommentUseRemoteLineItems } from './fee-button'
@@ -10,9 +9,9 @@ import { useShowModal } from './modal'
 import { Button } from 'react-bootstrap'
 import { useRoot } from './root'
 import { CREATE_COMMENT } from '@/fragments/paidAction'
+import { injectComment } from '@/lib/comments'
 import useItemSubmit from './use-item-submit'
 import gql from 'graphql-tag'
-import { updateAncestorsCommentCount } from '@/lib/comments'
 import useCommentsView from './use-comments-view'
 
 export default forwardRef(function Reply ({
@@ -52,23 +51,11 @@ export default forwardRef(function Reply ({
       update (cache, { data: { upsertComment: { result, invoice } } }) {
         if (!result) return
 
-        cache.modify({
-          id: `Item:${parentId}`,
-          fields: {
-            comments (existingComments = {}) {
-              const newCommentRef = cache.writeFragment({
-                data: result,
-                fragment: COMMENTS,
-                fragmentName: 'CommentsRecursive'
-              })
-              return {
-                cursor: existingComments.cursor,
-                comments: [newCommentRef, ...(existingComments?.comments || [])]
-              }
-            }
-          },
-          optimistic: true
-        })
+        // inject the new comment into the cache
+        const injected = injectComment(cache, result)
+        if (injected) {
+          markCommentViewedAt(result.createdAt, { ncomments: 1 })
+        }
 
         // no lag for itemRepetition
         if (!item.mine && me) {
@@ -80,15 +67,6 @@ export default forwardRef(function Reply ({
             }
           })
         }
-
-        const ancestors = item.path.split('.')
-
-        // update all ancestors
-        updateAncestorsCommentCount(cache, ancestors, 1, parentId)
-
-        // 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
-        markCommentViewedAt(result.createdAt, { ncomments: 1 })
       }
     },
     onSuccessfulSubmit: (data, { resetForm }) => {

components/use-can-edit.js

@@ -20,7 +20,8 @@ export default function useCanEdit (item) {
     const anonEdit = !!invParams && !me && Number(item.user.id) === USER_ID.anon
     // anonEdit should not override canEdit, but only allow edits if they aren't already allowed
     setCanEdit(canEdit => canEdit || anonEdit)
-  }, [])
+    // update when the hmac gets set
+  }, [item?.invoice?.hmac])
 
   return [canEdit, setCanEdit, editThreshold]
 }

components/use-comments-navigator.js

@@ -109,7 +109,7 @@ export function useCommentsNavigator () {
         node.classList.remove(
           'outline-it',
           'outline-new-comment',
-          'outline-new-injected-comment'
+          'outline-new-live-comment'
         )
         node.classList.add('outline-new-comment-unset')
       }