reset this commit

Author: Soxasora

components/comments.js

@@ -9,10 +9,8 @@ import { useRouter } from 'next/router'
 import MoreFooter from './more-footer'
 import { FULL_COMMENTS_THRESHOLD } from '@/lib/constants'
 import useLiveComments, { ShowNewComments } from './use-live-comments'
-import ActionTooltip from './action-tooltip'
-import classNames from 'classnames'
 
-export function CommentsHeader ({ handleSort, pinned, bio, parentCreatedAt, commentSats, livePolling, setLivePolling }) {
+export function CommentsHeader ({ handleSort, pinned, bio, parentCreatedAt, commentSats }) {
   const router = useRouter()
   const sort = router.query.sort || defaultCommentSort(pinned, bio, parentCreatedAt)
 
@@ -31,25 +29,6 @@ export function CommentsHeader ({ handleSort, pinned, bio, parentCreatedAt, comm
         <Nav.Item className='text-muted'>
           {numWithUnits(commentSats)}
         </Nav.Item>
-        {livePolling
-          ? (
-            <Nav.Item className='ps-2'>
-              <ActionTooltip notForm overlayText='comments are live'>
-                <div className={styles.newCommentDot} />
-              </ActionTooltip>
-            </Nav.Item>
-            )
-          : (
-            <Nav.Item className='ps-2'>
-              <ActionTooltip notForm overlayText='click to resume live comments'>
-                <div
-                  className={classNames(styles.newCommentDot, styles.paused)}
-                  onClick={() => setLivePolling(true)}
-                  style={{ cursor: 'pointer' }}
-                />
-              </ActionTooltip>
-            </Nav.Item>
-            )}
         <div className='ms-auto d-flex'>
           <Nav.Item>
             <Nav.Link
@@ -92,7 +71,7 @@ export default function Comments ({
   // TODO-LIVE: ok now item updates thanks to sort awareness, but please CLEAN THIS UP
   const sort = router.query.sort || defaultCommentSort(pinned, bio, parentCreatedAt)
   // update item.newComments in cache
-  const { polling: livePolling, setPolling: setLivePolling } = useLiveComments(parentId, lastCommentAt || parentCreatedAt, sort)
+  useLiveComments(parentId, lastCommentAt || parentCreatedAt, sort)
 
   const pins = useMemo(() => comments?.filter(({ position }) => !!position).sort((a, b) => a.position - b.position), [comments])
 
@@ -101,7 +80,7 @@ export default function Comments ({
       {comments?.length > 0
         ? <CommentsHeader
             commentSats={commentSats} parentCreatedAt={parentCreatedAt}
-            pinned={pinned} bio={bio} livePolling={livePolling} setLivePolling={setLivePolling} handleSort={sort => {
+            pinned={pinned} bio={bio} handleSort={sort => {
               const { commentsViewedAt, commentId, ...query } = router.query
               delete query.nodata
               router.push({

components/use-live-comments.js

@@ -6,52 +6,15 @@ import { useCallback, useEffect, useState } from 'react'
 import styles from './comment.module.css'
 
 const POLL_INTERVAL = 1000 * 10 // 10 seconds
-const ACTIVITY_TIMEOUT = 1000 * 60 * 30 // 30 minutes
-const ACTIVITY_CHECK_INTERVAL = 1000 * 60 // 1 minute
 
 export default function useLiveComments (rootId, after, sort) {
   const client = useApolloClient()
   const [latest, setLatest] = useState(after)
-  const [polling, setPolling] = useState(true)
-  const [engagedAt, setEngagedAt] = useState(new Date())
-
-  // reset engagedAt when polling is toggled
-  useEffect(() => {
-    if (polling) {
-      setEngagedAt(new Date())
-    }
-  }, [polling])
-
-  useEffect(() => {
-    const checkActivity = () => {
-      const now = new Date()
-      const timeSinceEngaged = now.getTime() - engagedAt.getTime()
-      const isActive = document.visibilityState === 'visible'
-
-      // poll only if the user is active and has been active in the last 30 minutes
-      if (timeSinceEngaged < ACTIVITY_TIMEOUT) {
-        setPolling(isActive)
-      } else {
-        setPolling(false)
-      }
-    }
-
-    // check activity every minute
-    const interval = setInterval(checkActivity, ACTIVITY_CHECK_INTERVAL)
-    // check activity also on visibility change
-    document.addEventListener('visibilitychange', checkActivity)
-
-    return () => {
-      // cleanup
-      document.removeEventListener('visibilitychange', checkActivity)
-      clearInterval(interval)
-    }
-  }, [engagedAt])
 
   const { data } = useQuery(GET_NEW_COMMENTS, SSR
     ? {}
     : {
-        pollInterval: polling ? POLL_INTERVAL : null,
+        pollInterval: POLL_INTERVAL,
         variables: { rootId, after: latest }
       })
 
@@ -62,34 +25,37 @@ export default function useLiveComments (rootId, after, sort) {
     // check new comments created after the latest new comment
     setLatest(prevLatest => getLatestCommentCreatedAt(data.newComments.comments, prevLatest))
   }, [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) {
+    console.log('newComment', newComment)
     const { parentId } = newComment
     const topLevel = Number(parentId) === Number(rootId)
 
     // if the comment is a top level comment, update the item
     if (topLevel) {
+      console.log('topLevel', topLevel)
       client.cache.updateQuery({
         query: ITEM_FULL,
         variables: { id: rootId, sort } // TODO-LIVE: ok now item updates thanks to sort awareness, but please CLEAN THIS UP
       }, (data) => {
+        console.log('data', data)
         if (!data) return data
         // we return the entire item, not just the newComments
         return { item: mergeNewComment(data?.item, newComment) }
       })
     } else {
       // if the comment is a reply, update the parent comment
+      console.log('reply', parentId)
       client.cache.updateFragment({
         id: `Item:${parentId}`,
         fragment: COMMENT_WITH_NEW,
         fragmentName: 'CommentWithNew'
       }, (data) => {
+        console.log('dataer', data)
         if (!data) return data
         // here we return the parent comment with the new comment added
         return mergeNewComment(data, newComment)
@@ -128,10 +94,12 @@ export function ShowNewComments ({ newComments = [], itemId, topLevel = false, s
 
   const showNewComments = useCallback(() => {
     if (topLevel) {
+      console.log('topLevel', topLevel)
       client.cache.updateQuery({
         query: ITEM_FULL,
         variables: { id: itemId, sort } // TODO-LIVE: ok now item updates thanks to sort awareness, but please CLEAN THIS UP
       }, (data) => {
+        console.log('data', data)
         if (!data) return data
         const { item } = data
 
@@ -144,11 +112,13 @@ export function ShowNewComments ({ newComments = [], itemId, topLevel = false, s
         }
       })
     } else {
+      console.log('reply', itemId)
       client.cache.updateFragment({
         id: `Item:${itemId}`,
         fragment: COMMENT_WITH_NEW,
         fragmentName: 'CommentWithNew'
       }, (data) => {
+        console.log('data', data)
         if (!data) return data
 
         return {
@@ -163,7 +133,7 @@ export function ShowNewComments ({ newComments = [], itemId, topLevel = false, s
   // 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 existingIds = new Set(existingComments.map(c => c.id))
     const filteredNew = newComments.filter(c => !existingIds.has(c.id))
     return {
       ...existingComments,