cleanup: move cache manipulation functions, comments for comments.js

- lib/comments.js explanations for its functions
- itemUpdateQuery, commentUpdateFragment, getLatestCommentCreatedAt on comments.js
- format too many imports from comments.js

todo:
- we're not deduping comments for isThread, which forces us at this state, to dedupe twice

Author: Soxasora

components/show-new-comments.js

@@ -1,8 +1,14 @@
 import { useCallback, useMemo } from 'react'
 import { useApolloClient } from '@apollo/client'
 import styles from './comment.module.css'
-import { itemUpdateQuery, commentUpdateFragment } from './use-live-comments'
-import { prepareComments, dedupeNewComments, collectAllNewComments, showAllNewCommentsRecursively } from '@/lib/comments'
+import {
+  itemUpdateQuery,
+  commentUpdateFragment,
+  prepareComments,
+  dedupeNewComments,
+  collectAllNewComments,
+  showAllNewCommentsRecursively
+} from '../lib/comments'
 
 export const ShowNewComments = ({ topLevel, sort, comments, itemId, item, setHasNewComments, newComments = [], depth = 1 }) => {
   const client = useApolloClient()
@@ -12,6 +18,7 @@ export const ShowNewComments = ({ topLevel, sort, comments, itemId, item, setHas
   const allNewComments = useMemo(() => {
     if (isThread) {
       // TODO: well are we only collecting all new comments just for a fancy UI?
+      // TODO2: also, we're not deduping new comments here, so we're showing duplicates
       return collectAllNewComments(item, depth)
     }
     return dedupeNewComments(newComments, comments)

components/use-live-comments.js

@@ -1,8 +1,8 @@
 import { useQuery, useApolloClient } from '@apollo/client'
 import { SSR } from '../lib/constants'
-import { GET_NEW_COMMENTS, COMMENT_WITH_NEW_LIMITED, COMMENT_WITH_NEW_RECURSIVE } from '../fragments/comments'
-import { ITEM_FULL } from '../fragments/items'
+import { GET_NEW_COMMENTS } from '../fragments/comments'
 import { useEffect, useRef, useState } from 'react'
+import { itemUpdateQuery, commentUpdateFragment, getLatestCommentCreatedAt } from '../lib/comments'
 
 const POLL_INTERVAL = 1000 * 10 // 10 seconds
 
@@ -47,46 +47,6 @@ export default function useLiveComments (rootId, after, sort, setHasNewComments)
   }, [])
 }
 
-// the item query is used to update the item's newComments field
-export function itemUpdateQuery (client, id, sort, fn) {
-  client.cache.updateQuery({
-    query: ITEM_FULL,
-    // updateQuery needs the correct variables to update the correct item
-    // the Item query might have the router.query.sort in the variables, so we need to pass it in if it exists
-    variables: sort ? { id, sort } : { id }
-  }, (data) => {
-    if (!data) return data
-    return { item: fn(data.item) }
-  })
-}
-
-// update the newComments field of a nested comment fragment
-export function commentUpdateFragment (client, id, fn) {
-  let result = client.cache.updateFragment({
-    id: `Item:${id}`,
-    fragment: COMMENT_WITH_NEW_RECURSIVE,
-    fragmentName: 'CommentWithNewRecursive'
-  }, (data) => {
-    if (!data) return data
-    return fn(data)
-  })
-
-  // sometimes comments can reach their depth limit, and lack adherence to the CommentsRecursive fragment
-  // for this reason, we update the fragment with a limited version that only includes the CommentFields fragment
-  if (!result) {
-    result = client.cache.updateFragment({
-      id: `Item:${id}`,
-      fragment: COMMENT_WITH_NEW_LIMITED,
-      fragmentName: 'CommentWithNewLimited'
-    }, (data) => {
-      if (!data) return data
-      return fn(data)
-    })
-  }
-
-  return result
-}
-
 function cacheNewComments (client, rootId, newComments, sort) {
   const queuedComments = []
 
@@ -126,10 +86,3 @@ function mergeNewComment (item, newComment) {
 
   return { ...item, newComments: [...existingNewComments, newComment.id] }
 }
-
-export function getLatestCommentCreatedAt (comments, latest) {
-  return comments.reduce(
-    (max, { createdAt }) => (createdAt > max ? createdAt : max),
-    latest
-  )
-}

lib/comments.js

@@ -1,8 +1,9 @@
 import { COMMENT_DEPTH_LIMIT } from './constants'
-import { commentUpdateFragment, getLatestCommentCreatedAt } from '../components/use-live-comments'
 import { commentsViewedAfterComment } from './new-comments'
-import { COMMENT_WITH_NEW_RECURSIVE } from '../fragments/comments'
+import { COMMENT_WITH_NEW_RECURSIVE, COMMENT_WITH_NEW_LIMITED } from '../fragments/comments'
+import { ITEM_FULL } from '../fragments/items'
 
+// updates the ncomments field of all ancestors of an item/comment in the cache
 export function updateAncestorsCommentCount (cache, ancestors, increment) {
   // update all ancestors
   ancestors.forEach(id => {
@@ -19,11 +20,58 @@ export function updateAncestorsCommentCount (cache, ancestors, increment) {
 }
 
 // live comments - cache manipulations
+// updates the item query in the cache
+// this is used by live comments to update a top level item's newComments field
+export function itemUpdateQuery (client, id, sort, fn) {
+  client.cache.updateQuery({
+    query: ITEM_FULL,
+    // updateQuery needs the correct variables to update the correct item
+    // the Item query might have the router.query.sort in the variables, so we need to pass it in if it exists
+    variables: sort ? { id, sort } : { id }
+  }, (data) => {
+    if (!data) return data
+    return { item: fn(data.item) }
+  })
+}
+
+// updates a comment fragment in the cache, with a fallback for comments lacking CommentsRecursive
+export function commentUpdateFragment (client, id, fn) {
+  let result = client.cache.updateFragment({
+    id: `Item:${id}`,
+    fragment: COMMENT_WITH_NEW_RECURSIVE,
+    fragmentName: 'CommentWithNewRecursive'
+  }, (data) => {
+    if (!data) return data
+    return fn(data)
+  })
+
+  // sometimes comments can reach their depth limit, and lack adherence to the CommentsRecursive fragment
+  // for this reason, we update the fragment with a limited version that only includes the CommentFields fragment
+  if (!result) {
+    result = client.cache.updateFragment({
+      id: `Item:${id}`,
+      fragment: COMMENT_WITH_NEW_LIMITED,
+      fragmentName: 'CommentWithNewLimited'
+    }, (data) => {
+      if (!data) return data
+      return fn(data)
+    })
+  }
+
+  return result
+}
+
+// filters out new comments, by id, that already exist in the item's comments
+// preventing duplicate comments from being injected
 export function dedupeNewComments (newComments, comments) {
+  console.log('dedupeNewComments', newComments, comments)
   const existingIds = new Set(comments.map(c => c.id))
   return newComments.filter(id => !existingIds.has(id))
 }
 
+// recursively collects all new comments from an item and its children
+// by respecting the depth limit, we avoid collecting new comments to inject in places
+// that are too deep in the tree
 export function collectAllNewComments (item, currentDepth = 1) {
   const allNewComments = [...(item.newComments || [])]
   if (item.comments?.comments && currentDepth < (COMMENT_DEPTH_LIMIT - 1)) {
@@ -34,6 +82,8 @@ export function collectAllNewComments (item, currentDepth = 1) {
   return allNewComments
 }
 
+// prepares and creates a new comments fragment for injection into the cache
+// returns a function that can be used to update an item's comments field
 export function prepareComments (client, newComments) {
   return (data) => {
     // newComments is an array of comment ids that allows us
@@ -69,6 +119,7 @@ export function prepareComments (client, newComments) {
     const rootId = data.path.split('.')[0]
     commentsViewedAfterComment(rootId, latestCommentCreatedAt)
 
+    // return the updated item with the new comments injected
     return {
       ...data,
       comments: { ...data.comments, comments: [...freshNewComments, ...data.comments.comments] },
@@ -78,6 +129,8 @@ export function prepareComments (client, newComments) {
   }
 }
 
+// recursively processes and displays all new comments for a thread
+// handles comment injection at each level, respecting depth limits
 export function showAllNewCommentsRecursively (client, item, currentDepth = 1) {
   // handle new comments at this item level
   if (item.newComments && item.newComments.length > 0) {
@@ -96,3 +149,11 @@ export function showAllNewCommentsRecursively (client, item, currentDepth = 1) {
     }
   }
 }
+
+// finds the most recent createdAt timestamp from an array of comments
+export function getLatestCommentCreatedAt (comments, latest) {
+  return comments.reduce(
+    (max, { createdAt }) => (createdAt > max ? createdAt : max),
+    latest
+  )
+}