From 6b440cfdf35ff6a05a62fe460417122d5eee21c6 Mon Sep 17 00:00:00 2001 From: soxa <6390896+Soxasora@users.noreply.github.com> Date: Mon, 21 Jul 2025 22:38:15 +0200 Subject: [PATCH] Live updates to comment threads (#2115) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * check new comments every 10 seconds * enhance: clear newComments on child comments when we show a topLevel new comment; cleanup: resolvers, logs * handle comments of comments, new structure to clear newComments on childs * use original recursive comments data structure * correct comment structure after deduplication * faster newComments query deduplication, don't need to know how many comments are there * cleanup: comments on newComments fetches and dedupes * cleanup, use correct function declarations * stop polling after 30 minutes, pause polling if user is not on the page * ActionTooltip indicating that the user is in a live comment section * handleVisibilityChange to control polling by visibility * paused polling styling, check activity on 1 minute intervals and visibility change, light cleanup * user can resume polling without refreshing the page * better naming, straightforward dedupeComment on newComment arrival * cleanup: better naming, get latest comment creation, correct order of comment injection * cleanup: refactor live comments related functions to use-live-comments.js * refactor: clearer naming, optimized polling and date retrieval logic, use of constants, general cleanup * ui: place ShowNewComments in the bottom-right corner of nested comments * fix: make updateQuery sort-aware to correctly inject the comment in the correct Item query * cleanup: better naming; fix: usecallback on live comments component; fix leak on useEffect because of missing sort atomic apollo cache manipulations; manage top sort not being present in item query cache queue nested comments without a parent, retry on the next poll fix commit messages * fix: don't show unpaid comments; cleanup: compact cache merge/dedupe, queue comments via state * fix: read new comments fragments to inject fresh new comments, fixing dropped comments; ui: show amount of new comments refactor: correct function positioning; cleanup: useless logs * enhance: queuedComments Ref, cache-and-network fetch policy; freshNewComments readFragment fallback to received comment * cleanup: detailed comments and better ShowNewComment text * fix: while showing new comments, also update ncomments for UI and pagination * refactor: ShowNewComments is its own component; cleanup: proven useless dedupe on ShowNewComments, count nested ncomments from fresh new comments * enhance: direct latest comment createdAt calc with reduce * cleanup queue on unmount * feat: live comments indicator for bottomed-out replies, ncomments updates; fix: nested comment structures - new comments indicator for bottomed-out replies - ncomments sync for parent and its ancestors - limited comments fragment for comments that don't have CommentsRecursive - reduce cache complexity by removing useless roundtrips ux: live comments indicator on bottomedOut replies fix: dedupe newComments before displaying ShowNewComments to avoid false positives enhance: store ids of new comments in the cache, instead of carrying full comments that would get discarded anyway hotfix: newComments deduplication ID mismatch, filter null comments from freshNewComments fix: ncomments not updating for all comment levels; refactor: share Reply update ancestors' ncomments function with ShowNewComments cleanup: better naming to indicate the total number of comments including nested comments fix: increment parent comment ncomments cleanup: Items that will have comments will always have a structure where item.comments is true cleanup: reduce code complexity checking the nested comment update result instead of preventively reading the fragment cleanup: avoid double-updating ncomments on parent fix: don't use CommentsRecursive for bottomed-out comments cleanup: better fragment naming; add TODO for absolute bottom comments * backport live comments logic enhancements use-live-comments: - remove useless dedupe against already present comments - check newComments.comments length to tell if there are new comments - code reordering show-new-comments: - show all new comments recursively for nested comments - get always the newest comments to inject also their own child new comments - update local storage commentsViewedAt on comment injection - respect depth on comment injection comments.js - apollo cache manipulations now live here * hotfix: handle undefined item.comments.comments on dedupe * hotfix: limited fragment for recursive comment collection; protect from null fragments; add missing deps to memoization * docs: clarify ncomments updates * cleanup: remove unused export * count and show only the direct new comments and recursively their children enhance: dedupe against existing comments only in the component enhance: recursive count/injection share the same logic * fix regression on top level counting * hotfix: introduce readNestedCommentsFragment in lib/comments.js * fix: count also existing comments of a new comment; cleanup: use readCommentFragment also for prepareComments; reduce freshNewComments usage * add support for comments at the deepest level fixes: - client-side navigation re-fetched all new comments because 'after' was cached, now the latest new comment time persists in sessionStorage enhancements: - use CommentWithNewMinimal fragment fallback for comments at the deepest level - tweak ReplyOnAnotherPage to show also how many direct new comments are there cleanup: - queue management is not needed anymore, therefore it has been removed * cleanup: remove logs * revert counting on ReplyOnAnotherPage, TODO for enhancements PR * move ShowNewComments to CommentsHeader for top level comments * fix: update commentsViewedAfterComment to support ncomments * fix typo, lint * cleanup: remove old CSS * enhance: inject topLevel and its children new comments, simplify injection logic - top-level and nested comment handling share the same recursion logic - ShowNewComments references the item object for every type of comments — note: item from item-full.js is passed to comments.js - depth now starts at 0 to support top level comments - injection and counting now reach the deepest level, updating also the deepest comment * cleanup: remove unused topLevel prop * fix: deepest comments don't have CommentsRecursive structure, don't access it on injection * move top level ShowNewComments above CommentsHeader; preserve space to avoid vertical layout shifting * cleanup: remove unused item on CommentsHeader --------- Co-authored-by: Keyan <34140557+huumn@users.noreply.github.com> --- api/resolvers/item.js | 18 +++++ api/typeDefs/item.js | 2 + components/comment.js | 9 ++- components/comment.module.css | 23 ++++++ components/comments.js | 7 +- components/header.module.css | 2 +- components/item-full.js | 2 + components/reply.js | 13 +-- components/show-new-comments.js | 135 ++++++++++++++++++++++++++++++++ components/use-live-comments.js | 75 ++++++++++++++++++ fragments/comments.js | 51 ++++++++++++ fragments/items.js | 1 + lib/apollo.js | 5 ++ lib/comments.js | 95 ++++++++++++++++++++++ lib/new-comments.js | 4 +- 15 files changed, 426 insertions(+), 16 deletions(-) create mode 100644 components/show-new-comments.js create mode 100644 components/use-live-comments.js create mode 100644 lib/comments.js diff --git a/api/resolvers/item.js b/api/resolvers/item.js index a03a0cf9..c1f2474c 100644 --- a/api/resolvers/item.js +++ b/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 } } }, diff --git a/api/typeDefs/item.js b/api/typeDefs/item.js index a40a99ae..4d19c744 100644 --- a/api/typeDefs/item.js +++ b/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 diff --git a/components/comment.js b/components/comment.js index 73e64d0c..539bdf37 100644 --- a/components/comment.js +++ b/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 && {root.bounty && !bountyPaid && } + {item.newComments?.length > 0 && ( +
+ +
+ )} } {children}
@@ -304,8 +310,9 @@ function ReplyOnAnotherPage ({ item }) { } return ( - + {text} + {item.newComments?.length > 0 &&
} ) } diff --git a/components/comment.module.css b/components/comment.module.css index 6f24ab61..215993d6 100644 --- a/components/comment.module.css +++ b/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; + } } \ No newline at end of file diff --git a/components/comments.js b/components/comments.js index cb5d8641..4d1c0bbf 100644 --- a/components/comments.js +++ b/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,14 +66,17 @@ 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, item, ...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]) return ( <> + {comments?.length > 0 ?
} diff --git a/components/reply.js b/components/reply.js index ec12d0a5..e89816c7 100644 --- a/components/reply.js +++ b/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 diff --git a/components/show-new-comments.js b/components/show-new-comments.js new file mode 100644 index 00000000..fb6c511c --- /dev/null +++ b/components/show-new-comments.js @@ -0,0 +1,135 @@ +import { useCallback } from 'react' +import { useApolloClient } from '@apollo/client' +import styles from './comment.module.css' +import { COMMENT_DEPTH_LIMIT } from '../lib/constants' +import { commentsViewedAfterComment } from '../lib/new-comments' +import { + itemUpdateQuery, + commentUpdateFragment, + getLatestCommentCreatedAt, + updateAncestorsCommentCount, + readCommentsFragment +} from '../lib/comments' + +// filters out new comments, by id, that already exist in the item's comments +// preventing duplicate comments from being injected +function dedupeNewComments (newComments, comments = []) { + const existingIds = new Set(comments.map(c => c.id)) + return newComments.filter(id => !existingIds.has(id)) +} + +// 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 +function prepareComments ({ client, newComments }) { + return (data) => { + // count total comments being injected: each new comment + all their existing nested comments + let totalNComments = newComments.length + for (const comment of newComments) { + // add all nested comments (subtree) under this newly injected comment to the total + 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) + + // update commentsViewedAt with the most recent fresh new comment + // quirk: this is not the most recent comment, it's the most recent comment in the newComments array + // as such, the next visit will not outline other new comments that are older than this one. + const latestCommentCreatedAt = getLatestCommentCreatedAt(newComments, data.createdAt) + const rootId = data.path.split('.')[0] + commentsViewedAfterComment(rootId, latestCommentCreatedAt, totalNComments) + + // return the updated item with the new comments injected + return { + ...data, + comments: { ...data.comments, comments: [...newComments, ...(data.comments?.comments || [])] }, + ncomments: data.ncomments + totalNComments, + newComments: [] + } + } +} + +// traverses all new comments and their children +// at each level, we can execute a callback giving the new comments and the item +function traverseNewComments (client, item, onLevel, currentDepth = 1) { + if (currentDepth > COMMENT_DEPTH_LIMIT) return + + if (item.newComments && item.newComments.length > 0) { + const dedupedNewComments = dedupeNewComments(item.newComments, item.comments?.comments) + + // being newComments an array of comment ids, we can get their latest version from the cache + // ensuring that we don't miss any new comments + const freshNewComments = dedupedNewComments.map(id => { + return readCommentsFragment(client, id) + }).filter(Boolean) + + // passing currentDepth allows children of top level comments + // to be updated by the commentUpdateFragment + onLevel(freshNewComments, item, currentDepth) + + for (const newComment of freshNewComments) { + traverseNewComments(client, newComment, onLevel, currentDepth + 1) + } + } +} + +// recursively processes and displays all new comments and its children +// handles comment injection at each level, respecting depth limits +function injectNewComments (client, item, currentDepth, sort) { + traverseNewComments(client, item, (newComments, item, depth) => { + if (newComments.length > 0) { + const payload = prepareComments({ client, newComments }) + + // used to determine if by iterating through the new comments + // we are injecting topLevels (depth 0) or not + if (depth === 0) { + itemUpdateQuery(client, item.id, sort, payload) + } else { + commentUpdateFragment(client, item.id, payload) + } + } + }, currentDepth) +} + +// counts all new comments for an item and its children +function countAllNewComments (client, item, currentDepth = 1) { + let totalNComments = 0 + + // count by traversing all new comments and their children + traverseNewComments(client, item, (newComments) => { + totalNComments += newComments.length + for (const newComment of newComments) { + totalNComments += newComment.ncomments || 0 + } + }, currentDepth) + + return totalNComments +} + +// ShowNewComments is a component that dedupes, refreshes and injects newComments into the comments field +export function ShowNewComments ({ item, sort, depth = 0 }) { + const client = useApolloClient() + + // recurse through all new comments and their children + const newCommentsCount = item.newComments?.length > 0 ? countAllNewComments(client, item, depth) : 0 + + const showNewComments = useCallback(() => { + // a top level comment doesn't have depth, we pass 0 to signify this + // other comments are injected from their depth + injectNewComments(client, item, depth, sort) + }, [client, sort, item, depth]) + + return ( + 0 ? 'visible' : 'hidden' }} + > + {newCommentsCount > 1 + ? `${newCommentsCount} new comments` + : 'show new comment'} +
+ + ) +} diff --git a/components/use-live-comments.js b/components/use-live-comments.js new file mode 100644 index 00000000..60d93dc7 --- /dev/null +++ b/components/use-live-comments.js @@ -0,0 +1,75 @@ +import { useQuery, useApolloClient } from '@apollo/client' +import { SSR } from '../lib/constants' +import { GET_NEW_COMMENTS } from '../fragments/comments' +import { useEffect, useState } from 'react' +import { itemUpdateQuery, commentUpdateFragment, getLatestCommentCreatedAt } from '../lib/comments' + +const POLL_INTERVAL = 1000 * 10 // 10 seconds + +// merge new comment into item's newComments +// and prevent duplicates by checking if the comment is already in item's newComments +function mergeNewComment (item, newComment) { + const existingNewComments = item.newComments || [] + + // is the incoming new comment already in item's new comments? + if (existingNewComments.includes(newComment.id)) { + return item + } + + return { ...item, newComments: [...existingNewComments, newComment.id] } +} + +function cacheNewComments (client, rootId, newComments, sort) { + for (const newComment of newComments) { + const { parentId } = newComment + const topLevel = Number(parentId) === Number(rootId) + + // if the comment is a top level comment, update the item + if (topLevel) { + // merge the new comment into the item's newComments field, checking for duplicates + itemUpdateQuery(client, rootId, sort, (data) => mergeNewComment(data, newComment)) + } else { + // if the comment is a reply, update the parent comment + // merge the new comment into the parent comment's newComments field, checking for duplicates + commentUpdateFragment(client, parentId, (data) => mergeNewComment(data, newComment)) + } + } +} + +// useLiveComments fetches new comments under an item (rootId), that arrives after the latest comment createdAt +// and inserts them into the newComment client field of their parent comment/post. +export default function useLiveComments (rootId, after, sort) { + const latestKey = `liveCommentsLatest:${rootId}` + const client = useApolloClient() + const [latest, setLatest] = useState(() => { + // if we're on the client, get the latest timestamp from session storage, otherwise use the passed after timestamp + if (typeof window !== 'undefined') { + return window.sessionStorage.getItem(latestKey) || after + } + return after + }) + + const { data } = useQuery(GET_NEW_COMMENTS, SSR + ? {} + : { + pollInterval: POLL_INTERVAL, + // only get comments newer than the passed latest timestamp + variables: { rootId, after: latest }, + nextFetchPolicy: 'cache-and-network' + }) + + useEffect(() => { + if (!data?.newComments?.comments?.length) return + + // merge and cache new comments in their parent comment/post + cacheNewComments(client, rootId, data.newComments.comments, sort) + + // update latest timestamp to the latest comment created at + // save it to session storage, to persist between client-side navigations + const newLatest = getLatestCommentCreatedAt(data.newComments.comments, latest) + setLatest(newLatest) + if (typeof window !== 'undefined') { + window.sessionStorage.setItem(latestKey, newLatest) + } + }, [data, client, rootId, sort, latest]) +} diff --git a/fragments/comments.js b/fragments/comments.js index 2fd28d0f..be6385d2 100644 --- a/fragments/comments.js +++ b/fragments/comments.js @@ -47,6 +47,7 @@ export const COMMENT_FIELDS = gql` otsHash ncomments nDirectComments + newComments @client imgproxyUrls rel apiKey @@ -116,3 +117,53 @@ export const COMMENTS = gql` } } }` + +export const COMMENT_WITH_NEW_RECURSIVE = gql` + ${COMMENT_FIELDS} + ${COMMENTS} + + fragment CommentWithNewRecursive on Item { + ...CommentFields + comments { + comments { + ...CommentsRecursive + } + } + newComments @client + } +` + +export const COMMENT_WITH_NEW_LIMITED = gql` + ${COMMENT_FIELDS} + + fragment CommentWithNewLimited on Item { + ...CommentFields + comments { + comments { + ...CommentFields + } + } + newComments @client + } +` + +export const COMMENT_WITH_NEW_MINIMAL = gql` + ${COMMENT_FIELDS} + + fragment CommentWithNewMinimal on Item { + ...CommentFields + newComments @client + } +` + +export const GET_NEW_COMMENTS = gql` + ${COMMENTS} + + query GetNewComments($rootId: ID, $after: Date) { + newComments(rootId: $rootId, after: $after) { + comments { + ...CommentsRecursive + } + } + } +` diff --git a/fragments/items.js b/fragments/items.js index 151587a2..95eed042 100644 --- a/fragments/items.js +++ b/fragments/items.js @@ -59,6 +59,7 @@ export const ITEM_FIELDS = gql` bio ncomments nDirectComments + newComments @client commentSats commentCredits lastCommentAt diff --git a/lib/apollo.js b/lib/apollo.js index 4a60c2a5..ee686d3c 100644 --- a/lib/apollo.js +++ b/lib/apollo.js @@ -323,6 +323,11 @@ function getClient (uri) { } } }, + newComments: { + read (newComments) { + return newComments || [] + } + }, meAnonSats: { read (existingAmount, { readField }) { if (SSR) return null diff --git a/lib/comments.js b/lib/comments.js new file mode 100644 index 00000000..a892cc83 --- /dev/null +++ b/lib/comments.js @@ -0,0 +1,95 @@ +import { COMMENT_WITH_NEW_RECURSIVE, COMMENT_WITH_NEW_LIMITED, COMMENT_WITH_NEW_MINIMAL } 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 => { + cache.modify({ + id: `Item:${id}`, + fields: { + ncomments (existingNComments = 0) { + return existingNComments + increment + } + }, + optimistic: true + }) + }) +} + +// 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 fallbacks for comments lacking CommentsRecursive or Comments altogether +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 start to 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) + }) + } + + // at the deepest level, the comment can't have any children, here we update only the newComments field. + if (!result) { + result = client.cache.updateFragment({ + id: `Item:${id}`, + fragment: COMMENT_WITH_NEW_MINIMAL, + fragmentName: 'CommentWithNewMinimal' + }, (data) => { + if (!data) return data + return fn(data) + }) + } + + return result +} + +// reads a nested comments fragment from the cache +// this is used to read a comment and its children comments +// it has a fallback for comments nearing the depth limit, that lack the CommentsRecursive fragment +export function readCommentsFragment (client, id) { + return client.cache.readFragment({ + id: `Item:${id}`, + fragment: COMMENT_WITH_NEW_RECURSIVE, + fragmentName: 'CommentWithNewRecursive' + }) || client.cache.readFragment({ + id: `Item:${id}`, + fragment: COMMENT_WITH_NEW_LIMITED, + fragmentName: 'CommentWithNewLimited' + }) +} + +// 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 + ) +} diff --git a/lib/new-comments.js b/lib/new-comments.js index 7578e806..cf84a387 100644 --- a/lib/new-comments.js +++ b/lib/new-comments.js @@ -16,9 +16,9 @@ export function commentsViewedNum (itemId) { return Number(window.localStorage.getItem(`${COMMENTS_NUM_PREFIX}:${itemId}`)) } -export function commentsViewedAfterComment (rootId, createdAt) { +export function commentsViewedAfterComment (rootId, createdAt, ncomments = 1) { window.localStorage.setItem(`${COMMENTS_VIEW_PREFIX}:${rootId}`, new Date(createdAt).getTime()) - window.localStorage.setItem(`${COMMENTS_NUM_PREFIX}:${rootId}`, commentsViewedNum(rootId) + 1) + window.localStorage.setItem(`${COMMENTS_NUM_PREFIX}:${rootId}`, commentsViewedNum(rootId) + ncomments) } export function newComments (item) {