cleanup: better naming; fix: usecallback on live comments component; fix leak on useEffect because of missing sort

Author: Soxasora

components/use-live-comments.js

@@ -2,7 +2,7 @@ import { useQuery, useApolloClient } from '@apollo/client'
 import { SSR } from '../lib/constants'
 import { GET_NEW_COMMENTS, COMMENT_WITH_NEW } from '../fragments/comments'
 import { ITEM_FULL } from '../fragments/items'
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import styles from './comment.module.css'
 
 const POLL_INTERVAL = 1000 * 10 // 10 seconds
@@ -61,12 +61,14 @@ export default function useLiveComments (rootId, after, sort) {
     cacheNewComments(client, rootId, data.newComments.comments, sort)
     // check new comments created after the latest new comment
     setLatest(prevLatest => getLatestCommentCreatedAt(data.newComments.comments, prevLatest))
-  }, [data, client, rootId])
+  }, [data, client, rootId, sort])
 
   return { polling, setPolling }
 }
 
 function cacheNewComments (client, rootId, newComments, sort) {
+  // update the item with the new comments
+  // if the comment is a top level comment, update the item
   for (const newComment of newComments) {
     const { parentId } = newComment
     const topLevel = Number(parentId) === Number(rootId)
@@ -79,7 +81,7 @@ function cacheNewComments (client, rootId, newComments, sort) {
       }, (data) => {
         if (!data) return data
         // we return the entire item, not just the newComments
-        return { item: mergeNewComments(data?.item, newComment) }
+        return { item: mergeNewComment(data?.item, newComment) }
       })
     } else {
       // if the comment is a reply, update the parent comment
@@ -90,13 +92,15 @@ function cacheNewComments (client, rootId, newComments, sort) {
       }, (data) => {
         if (!data) return data
         // here we return the parent comment with the new comment added
-        return mergeNewComments(data, newComment)
+        return mergeNewComment(data, newComment)
       })
     }
   }
 }
 
-function mergeNewComments (item, newComment) {
+// merge new comment into item's newComments
+// if the new comment is already in item's newComments or existing comments, do nothing
+function mergeNewComment (item, newComment) {
   const existingNewComments = item.newComments || []
   const existingComments = item.comments?.comments || []
 
@@ -122,7 +126,7 @@ function getLatestCommentCreatedAt (comments, latest) {
 export function ShowNewComments ({ newComments = [], itemId, topLevel = false, sort }) {
   const client = useApolloClient()
 
-  const showNewComments = () => {
+  const showNewComments = useCallback(() => {
     if (topLevel) {
       client.cache.updateQuery({
         query: ITEM_FULL,
@@ -134,7 +138,7 @@ export function ShowNewComments ({ newComments = [], itemId, topLevel = false, s
         return {
           item: {
             ...item,
-            comments: dedupeComments(item.comments, newComments),
+            comments: injectComments(item.comments, newComments),
             newComments: []
           }
         }
@@ -149,14 +153,16 @@ export function ShowNewComments ({ newComments = [], itemId, topLevel = false, s
 
         return {
           ...data,
-          comments: dedupeComments(data.comments, newComments),
+          comments: injectComments(data.comments, newComments),
           newComments: []
         }
       })
     }
-  }
+  }, [client, itemId, newComments, sort, topLevel])
 
-  const dedupeComments = (existingComments = [], newComments = []) => {
+  // inject new comments into existing comments
+  // if the new comment is already in existing comments, do nothing
+  const injectComments = (existingComments = [], newComments = []) => {
     const existingIds = new Set(existingComments.comments?.map(c => c.id))
     const filteredNew = newComments.filter(c => !existingIds.has(c.id))
     return {