Live updates to comment threads

api/resolvers/item.js

@@ -739,6 +739,24 @@ export default {
         homeMaxBoost: homeAgg._max.boost || 0,
         subMaxBoost: subAgg?._max.boost || 0
       }
+    },
+    newComments: async (parent, { rootId, after }, { models, me }) => {
+      const comments = await itemQueryWithMeta({
+        me,
+        models,
+        query: `
+          ${SELECT}
+          FROM "Item"
+          -- comments can be nested, so we need to get all comments that are descendants of the root
+          ${whereClause(
+            '"Item".path <@ (SELECT path FROM "Item" WHERE id = $1)',
+            activeOrMine(me),
+            '"Item"."created_at" > $2'
+          )}
+          ORDER BY "Item"."created_at" ASC`
+      }, Number(rootId), after)
+
+      return { comments }
     }
   },
 

api/typeDefs/item.js

@@ -11,6 +11,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(rootId: ID, after: Date): Comments!
   }
 
   type BoostPositions {
@@ -148,6 +149,7 @@ export default gql`
     ncomments: Int!
     nDirectComments: Int!
     comments(sort: String, cursor: String): Comments!
+    newComments(rootId: ID, after: Date): Comments!
     path: String
     position: Int
     prior: Int

components/comment.js

@@ -28,6 +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'
 
 function Parent ({ item, rootText }) {
   const root = useRoot()
@@ -260,6 +261,11 @@ export default function Comment ({
                 : !noReply &&
                   <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} />
+                      )}
+                    </div>
                   </Reply>}
               {children}
               <div className={styles.comments}>
@@ -304,8 +310,9 @@ function ReplyOnAnotherPage ({ item }) {
   }
 
   return (
-    <Link href={`/items/${rootId}?commentId=${item.id}`} as={`/items/${rootId}`} className='d-block pb-2 fw-bold text-muted'>
+    <Link href={`/items/${rootId}?commentId=${item.id}`} as={`/items/${rootId}`} className='pb-2 fw-bold d-flex align-items-center gap-2 text-muted'>
       {text}
+      {item.newComments?.length > 0 && <div className={styles.newCommentDot} />}
     </Link>
   )
 }

components/comment.module.css

@@ -135,4 +135,27 @@
 
 .comment:has(.comment) + .comment{
     padding-top: .5rem;
+}
+
+.newCommentDot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: var(--bs-primary);
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0% {
+        background-color: #FADA5E;
+        opacity: 0.7;
+    }
+    50% {
+        background-color: #F6911D;
+        opacity: 1;
+    }
+    100% {
+        background-color: #FADA5E;
+        opacity: 0.7;
+    }
 }

components/comments.js

@@ -8,6 +8,8 @@ import { defaultCommentSort } from '@/lib/item'
 import { useRouter } from 'next/router'
 import MoreFooter from './more-footer'
 import { FULL_COMMENTS_THRESHOLD } from '@/lib/constants'
+import useLiveComments from './use-live-comments'
+import { ShowNewComments } from './show-new-comments'
 
 export function CommentsHeader ({ handleSort, pinned, bio, parentCreatedAt, commentSats }) {
   const router = useRouter()
@@ -64,9 +66,11 @@ export function CommentsHeader ({ handleSort, pinned, bio, parentCreatedAt, comm
 
 export default function Comments ({
   parentId, pinned, bio, parentCreatedAt,
-  commentSats, comments, commentsCursor, fetchMoreComments, ncomments, ...props
+  commentSats, comments, commentsCursor, fetchMoreComments, ncomments, newComments, lastCommentAt, ...props
 }) {
   const router = useRouter()
+  // fetch new comments that arrived after the lastCommentAt, and update the item.newComments field in cache
+  useLiveComments(parentId, lastCommentAt || parentCreatedAt, router.query.sort)
 
   const pins = useMemo(() => comments?.filter(({ position }) => !!position).sort((a, b) => a.position - b.position), [comments])
 
@@ -88,6 +92,9 @@ export default function Comments ({
             }}
           />
         : null}
+      {newComments?.length > 0 && (
+        <ShowNewComments topLevel comments={comments} newComments={newComments} itemId={parentId} sort={router.query.sort} />
+      )}
       {pins.map(item => (
         <Fragment key={item.id}>
           <Comment depth={1} item={item} {...props} pin />

components/header.module.css

@@ -109,4 +109,32 @@
     padding-top: 1px;
     background-color: var(--bs-body-bg);
     z-index: 1000;
-}
+}
+
+.newCommentDot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: var(--bs-primary);
+    animation: pulse 2s infinite;
+}
+
+.newCommentDot.paused {
+    background-color: var(--bs-grey-darkmode);
+    animation: none;
+}
+
+@keyframes pulse {
+    0% {
+        background-color: #FADA5E;
+        opacity: 0.7;
+    }
+    50% {
+        background-color: #F6911D;
+        opacity: 1;
+    }
+    100% {
+        background-color: #FADA5E;
+        opacity: 0.7;
+    }
+}

components/item-full.js

@@ -191,6 +191,8 @@ export default function ItemFull ({ item, fetchMoreComments, bio, rank, ...props
                 comments={item.comments.comments}
                 commentsCursor={item.comments.cursor}
                 fetchMoreComments={fetchMoreComments}
+                newComments={item.newComments}
+                lastCommentAt={item.lastCommentAt}
               />
             </div>}
         </CarouselProvider>

components/reply.js

@@ -13,6 +13,7 @@ import { useRoot } from './root'
 import { CREATE_COMMENT } from '@/fragments/paidAction'
 import useItemSubmit from './use-item-submit'
 import gql from 'graphql-tag'
+import { updateAncestorsCommentCount } from '@/lib/comments'
 
 export default forwardRef(function Reply ({
   item,
@@ -82,17 +83,7 @@ export default forwardRef(function Reply ({
         const ancestors = item.path.split('.')
 
         // update all ancestors
-        ancestors.forEach(id => {
-          cache.modify({
-            id: `Item:${id}`,
-            fields: {
-              ncomments (existingNComments = 0) {
-                return existingNComments + 1
-              }
-            },
-            optimistic: true
-          })
-        })
+        updateAncestorsCommentCount(cache, ancestors, 1)
 
         // 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

components/show-new-comments.js

@@ -0,0 +1,80 @@
+import { useCallback, useMemo } from 'react'
+import { useApolloClient } from '@apollo/client'
+import { COMMENT_WITH_NEW_RECURSIVE } from '../fragments/comments'
+import styles from './comment.module.css'
+import { itemUpdateQuery, commentUpdateFragment } from './use-live-comments'
+import { updateAncestorsCommentCount } from '@/lib/comments'
+
+function prepareComments (client, newComments) {
+  return (data) => {
+    // newComments is an array of comment ids that allows us
+    // to read the latest newComments from the cache, guaranteeing that we're not reading stale data
+    const freshNewComments = newComments.map(id => {
+      const fragment = client.cache.readFragment({
+        id: `Item:${id}`,
+        fragment: COMMENT_WITH_NEW_RECURSIVE,
+        fragmentName: 'CommentWithNewRecursive'
+      })
+
+      if (!fragment) {
+        return null
+      }
+
+      return fragment
+    }).filter(Boolean)
+
+    // count the total number of new comments including its nested new comments
+    let totalNComments = freshNewComments.length
+    for (const comment of freshNewComments) {
+      totalNComments += (comment.ncomments || 0)
+    }
+
+    // update all ancestors, but not the item itself
+    const ancestors = data.path.split('.').slice(0, -1)
+    updateAncestorsCommentCount(client.cache, ancestors, totalNComments)
+
+    return {
+      ...data,
+      comments: { ...data.comments, comments: [...freshNewComments, ...data.comments.comments] },
+      ncomments: data.ncomments + totalNComments,
+      newComments: []
+    }
+  }
+}
+
+// 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 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)
+    } else {
+      commentUpdateFragment(client, itemId, payload)
+    }
+  }, [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`}
+    >
+      {dedupedNewComments.length > 1
+        ? `${dedupedNewComments.length} new comments`
+        : 'show new comment'}
+      <div className={styles.newCommentDot} />
+    </div>
+  )
+}