Enhancements to live comments (#2269)
* 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 * enhance: give the possibility to show all new comments of a thread, even nested * enhance: change favicon on new comments; warn: prop-drilling * refactor: merge ShowAllNewComments with ShowNewComments, better usage of props * hotfix: isThread should be recognized when an item has 2 items in its path * fix regression: topLevel comments not showing * fix: avoid trying to show new comments even after the depth limit; todo: two recursive counts might be too much * favicon-new-comment, fix favicon showing also when there aren't new comments * enhance: highlight new comments when shown; nit-fixes and cleanups fixes: - sync local commentsViewedAt on comment injection, to avoid double outline on item re-visit - avoid double highlighting when client-side visiting an item and injecting a new comment cleanups: - move ShowNewComments functions to dedicated lib/comments.js - bust auto-show enhancement due to bad useEffect usage todos: - two recursive counts might be too much * 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 * enhance: highlight new comment with injected field, recursive injection in every case but top level; cleanups cleanups: - better separation of concerns for lib/comments.js - don't show new comment count, avoiding useless complexity - simpler topLevel/nested logic - add 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: fix lint after merge * hotfix: limited fragment for recursive comment collection; protect from null fragments; add missing deps to memoization * merge: missing memo deps, limited fragment for non-recursive comments; fix: don't highlight injected comments with classic outline; cleanup: comments * 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 * enhance: scroll and load new comments via a floating button using IntersectionObserver API; fix merge: restore injected field for outlining * style: transparent and animated floating button, new comment dot color aligned to new comments accent color * cleanup: less redundancy between the two types of buttons; enhance: show the floating button only if we're past the element, not only if it's not visible * enhance: outline newly injected comments using root item's lastCommentAt * cleanup: remove transparency of floating comments button, remove other traces of the injected field * adapt and restore showing all new comments of a thread * fix: respect deepest comments structure on injection, adjust depth limit; cleanup: consistent naming * fix: avoid double outlines because of all conditions being met * cleanup: remove favicon, dedicate space for useVisibility, correct comments * ux: show all new comments of a thread only if its children have them * mark injected comments in the cache for reliable outlining * cleanup: clearer structure, more explaining * optimize: better closure usage, remove duplicate code, immutable payloads - ncomments count logic shared with injection and counting - don't re-create and persist closures for every injection, rather temporarily on injection - access item hierarchy once, avoid creating new arrays - don't create and mutate payloads, rather know what to return fixes: - fix wrong parameters on traverseNewComments recursion * cleanup: further clarifications * safer rootLastCommentAt usage for injected comments outlining * hotfix: ignore nDirectComments server updates when the item being updated has pending newComments, fixes CommentEdit consequences * simpler show all new comments text for thread comments, regardless of how many * fix: reference the correct Item for newComments reading, during nDirectComments apollo merge --------- Co-authored-by: Keyan <34140557+huumn@users.noreply.github.com>
This commit is contained in:
soxa
GitHub
parent
3f74279f29
commit
9092d90797
@ -97,7 +97,7 @@ export function CommentFlat ({ item, rank, siblingComments, ...props }) {
|
||||
}
|
||||
|
||||
export default function Comment ({
|
||||
item, children, replyOpen, includeParent, topLevel,
|
||||
item, children, replyOpen, includeParent, topLevel, rootLastCommentAt,
|
||||
rootText, noComments, noReply, truncate, depth, pin, setDisableRetry, disableRetry
|
||||
}) {
|
||||
const [edit, setEdit] = useState()
|
||||
@ -141,12 +141,20 @@ export default function Comment ({
|
||||
}, [item.id, cache, router.query.commentId])
|
||||
|
||||
useEffect(() => {
|
||||
if (me?.id === item.user?.id) return
|
||||
const itemCreatedAt = new Date(item.createdAt).getTime()
|
||||
|
||||
if (router.query.commentsViewedAt &&
|
||||
me?.id !== item.user?.id &&
|
||||
new Date(item.createdAt).getTime() > router.query.commentsViewedAt) {
|
||||
!item.injected &&
|
||||
itemCreatedAt > router.query.commentsViewedAt) {
|
||||
ref.current.classList.add('outline-new-comment')
|
||||
// newly injected comments have to use a different class to outline every new comment
|
||||
} else if (rootLastCommentAt &&
|
||||
item.injected &&
|
||||
itemCreatedAt > new Date(rootLastCommentAt).getTime()) {
|
||||
ref.current.classList.add('outline-new-injected-comment')
|
||||
}
|
||||
}, [item.id])
|
||||
}, [item.id, rootLastCommentAt])
|
||||
|
||||
const bottomedOut = depth === COMMENT_DEPTH_LIMIT || (item.comments?.comments.length === 0 && item.nDirectComments > 0)
|
||||
// Don't show OP badge when anon user comments on anon user posts
|
||||
@ -261,11 +269,9 @@ 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} />}
|
||||
{item.newComments?.length > 0 && (
|
||||
<div className='ms-auto'>
|
||||
<ShowNewComments item={item} depth={depth} />
|
||||
</div>
|
||||
)}
|
||||
<div className='ms-auto'>
|
||||
<ShowNewComments item={item} depth={depth} />
|
||||
</div>
|
||||
</Reply>}
|
||||
{children}
|
||||
<div className={styles.comments}>
|
||||
@ -273,7 +279,7 @@ export default function Comment ({
|
||||
? (
|
||||
<>
|
||||
{item.comments.comments.map((item) => (
|
||||
<Comment depth={depth + 1} key={item.id} item={item} />
|
||||
<Comment depth={depth + 1} key={item.id} item={item} rootLastCommentAt={rootLastCommentAt} />
|
||||
))}
|
||||
{item.comments.comments.length < item.nDirectComments && <ViewAllReplies id={item.id} nhas={item.ncomments} />}
|
||||
</>
|
||||
|
||||
@ -147,15 +147,33 @@
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
background-color: #FADA5E;
|
||||
background-color: #80d3ff;
|
||||
opacity: 0.7;
|
||||
}
|
||||
50% {
|
||||
background-color: #F6911D;
|
||||
background-color: #007cbe;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
background-color: #FADA5E;
|
||||
background-color: #80d3ff;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.floatingComments {
|
||||
position: fixed;
|
||||
top: 72px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 1050;
|
||||
animation: slideDown 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
0% {
|
||||
transform: translateX(-50%) translateY(-100px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@ -76,7 +76,7 @@ export default function Comments ({
|
||||
|
||||
return (
|
||||
<>
|
||||
<ShowNewComments item={item} sort={router.query.sort} />
|
||||
<ShowNewComments topLevel item={item} sort={router.query.sort} />
|
||||
{comments?.length > 0
|
||||
? <CommentsHeader
|
||||
commentSats={commentSats} parentCreatedAt={parentCreatedAt}
|
||||
@ -95,11 +95,11 @@ export default function Comments ({
|
||||
: null}
|
||||
{pins.map(item => (
|
||||
<Fragment key={item.id}>
|
||||
<Comment depth={1} item={item} {...props} pin />
|
||||
<Comment depth={1} item={item} rootLastCommentAt={lastCommentAt} {...props} pin />
|
||||
</Fragment>
|
||||
))}
|
||||
{comments.filter(({ position }) => !position).map(item => (
|
||||
<Comment depth={1} key={item.id} item={item} {...props} />
|
||||
<Comment depth={1} key={item.id} item={item} rootLastCommentAt={lastCommentAt} {...props} />
|
||||
))}
|
||||
{ncomments > FULL_COMMENTS_THRESHOLD &&
|
||||
<MoreFooter
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
import { useCallback } from 'react'
|
||||
import { useCallback, useRef } 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 classNames from 'classnames'
|
||||
import useVisibility from './use-visibility'
|
||||
import {
|
||||
itemUpdateQuery,
|
||||
commentUpdateFragment,
|
||||
@ -18,42 +20,59 @@ function dedupeNewComments (newComments, comments = []) {
|
||||
return newComments.filter(id => !existingIds.has(id))
|
||||
}
|
||||
|
||||
// of an array of new comments, count each new comment + all their existing comments
|
||||
function countNComments (newComments) {
|
||||
let totalNComments = newComments.length
|
||||
for (const comment of newComments) {
|
||||
totalNComments += comment.ncomments || 0
|
||||
}
|
||||
return totalNComments
|
||||
}
|
||||
|
||||
// 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)
|
||||
}
|
||||
function prepareComments (data, client, newComments) {
|
||||
const totalNComments = countNComments(newComments)
|
||||
|
||||
// update all ancestors, but not the item itself
|
||||
const ancestors = data.path.split('.').slice(0, -1)
|
||||
updateAncestorsCommentCount(client.cache, ancestors, totalNComments)
|
||||
const itemHierarchy = data.path.split('.')
|
||||
const ancestors = itemHierarchy.slice(0, -1)
|
||||
const rootId = itemHierarchy[0]
|
||||
|
||||
// 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)
|
||||
// update all ancestors, but not the item itself
|
||||
updateAncestorsCommentCount(client.cache, ancestors, 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: []
|
||||
}
|
||||
}
|
||||
// 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)
|
||||
commentsViewedAfterComment(rootId, latestCommentCreatedAt, totalNComments)
|
||||
|
||||
// an item can either have a comments.comments field, or not
|
||||
const payload = data.comments
|
||||
? {
|
||||
...data,
|
||||
ncomments: data.ncomments + totalNComments,
|
||||
newComments: [],
|
||||
comments: {
|
||||
...data.comments,
|
||||
comments: newComments.concat(data.comments.comments)
|
||||
}
|
||||
}
|
||||
// when the fragment doesn't have a comments field, we just update stats fields
|
||||
: {
|
||||
...data,
|
||||
ncomments: data.ncomments + totalNComments,
|
||||
newComments: []
|
||||
}
|
||||
|
||||
return payload
|
||||
}
|
||||
|
||||
// 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 we're showing all new comments of a thread, we also consider their existing children
|
||||
function traverseNewComments (client, item, onLevel, threadComment = false, currentDepth = 1) {
|
||||
// if we're at the depth limit, stop traversing, we've reached the bottom of the visible thread
|
||||
if (currentDepth >= COMMENT_DEPTH_LIMIT) return
|
||||
|
||||
if (item.newComments && item.newComments.length > 0) {
|
||||
const dedupedNewComments = dedupeNewComments(item.newComments, item.comments?.comments)
|
||||
@ -61,75 +80,120 @@ function traverseNewComments (client, item, onLevel, currentDepth = 1) {
|
||||
// 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)
|
||||
// mark all new comments as injected, so we can outline them
|
||||
return { ...readCommentsFragment(client, id), injected: true }
|
||||
}).filter(Boolean)
|
||||
|
||||
// passing currentDepth allows children of top level comments
|
||||
// to be updated by the commentUpdateFragment
|
||||
onLevel(freshNewComments, item, currentDepth)
|
||||
// at each level, we can execute a callback passing the current item's new comments, depth and ID
|
||||
onLevel(freshNewComments, currentDepth, item.id)
|
||||
|
||||
for (const newComment of freshNewComments) {
|
||||
traverseNewComments(client, newComment, onLevel, currentDepth + 1)
|
||||
traverseNewComments(client, newComment, onLevel, threadComment, currentDepth + 1)
|
||||
}
|
||||
}
|
||||
|
||||
// if we're showing all new comments of a thread
|
||||
// we consider every child comment recursively
|
||||
if (threadComment && item.comments?.comments) {
|
||||
for (const child of item.comments.comments) {
|
||||
traverseNewComments(client, child, onLevel, threadComment, currentDepth + 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// recursively processes and displays all new comments and its children
|
||||
// recursively processes and displays all new comments
|
||||
// handles comment injection at each level, respecting depth limits
|
||||
function injectNewComments (client, item, currentDepth, sort) {
|
||||
traverseNewComments(client, item, (newComments, item, depth) => {
|
||||
function injectNewComments (client, item, currentDepth, sort, threadComment = false) {
|
||||
traverseNewComments(client, item, (newComments, depth, itemId) => {
|
||||
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
|
||||
// traverseNewComments also passes the depth of the current item
|
||||
// used to determine if in an array of new comments, we are injecting topLevels (depth 0) or not
|
||||
if (depth === 0) {
|
||||
itemUpdateQuery(client, item.id, sort, payload)
|
||||
itemUpdateQuery(client, itemId, sort, (data) => prepareComments(data, client, newComments))
|
||||
} else {
|
||||
commentUpdateFragment(client, item.id, payload)
|
||||
commentUpdateFragment(client, itemId, (data) => prepareComments(data, client, newComments))
|
||||
}
|
||||
}
|
||||
}, currentDepth)
|
||||
}, threadComment, currentDepth)
|
||||
}
|
||||
|
||||
// counts all new comments for an item and its children
|
||||
function countAllNewComments (client, item, currentDepth = 1) {
|
||||
let totalNComments = 0
|
||||
// counts all new comments of an item
|
||||
function countAllNewComments (client, item, thread = false, currentDepth = 1) {
|
||||
let newCommentsCount = 0
|
||||
let threadChildren = false
|
||||
|
||||
// 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
|
||||
// count by traversing the comment structure
|
||||
traverseNewComments(client, item, (newComments, depth) => {
|
||||
newCommentsCount += countNComments(newComments)
|
||||
|
||||
// if we reached a depth greater than 1, the thread's children have new comments
|
||||
if (depth > 1 && newComments.length > 0) {
|
||||
threadChildren = true
|
||||
}
|
||||
}, currentDepth)
|
||||
}, thread, currentDepth)
|
||||
|
||||
return totalNComments
|
||||
return { newCommentsCount, threadChildren }
|
||||
}
|
||||
|
||||
// ShowNewComments is a component that dedupes, refreshes and injects newComments into the comments field
|
||||
export function ShowNewComments ({ item, sort, depth = 0 }) {
|
||||
const client = useApolloClient()
|
||||
function FloatingComments ({ buttonRef, showNewComments, text }) {
|
||||
// show the floating comments button only when we're past the main top level button
|
||||
const isButtonVisible = useVisibility(buttonRef, { pastElement: true })
|
||||
|
||||
// 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])
|
||||
if (isButtonVisible) return null
|
||||
|
||||
return (
|
||||
<span
|
||||
onClick={showNewComments}
|
||||
className='fw-bold d-flex align-items-center gap-2 px-3 pointer'
|
||||
style={{ visibility: newCommentsCount > 0 ? 'visible' : 'hidden' }}
|
||||
className={classNames(styles.floatingComments, 'btn btn-sm btn-info')}
|
||||
onClick={() => {
|
||||
// show new comments as we scroll up
|
||||
showNewComments()
|
||||
buttonRef.current?.scrollIntoView({ behavior: 'smooth' })
|
||||
}}
|
||||
>
|
||||
{newCommentsCount > 1
|
||||
? `${newCommentsCount} new comments`
|
||||
: 'show new comment'}
|
||||
<div className={styles.newCommentDot} />
|
||||
{text}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
// ShowNewComments is a component that dedupes, refreshes and injects newComments into the comments field
|
||||
export function ShowNewComments ({ topLevel, item, sort, depth = 0 }) {
|
||||
const client = useApolloClient()
|
||||
const ref = useRef(null)
|
||||
|
||||
// a thread is a top-level comment
|
||||
const thread = item.path?.split('.').length === 2
|
||||
|
||||
// recurse through all new comments and their children
|
||||
// if the item is a thread, we consider every existing child comment
|
||||
const { newCommentsCount, threadChildren } = countAllNewComments(client, item, thread, depth)
|
||||
|
||||
// only if the item is a thread and its children have new comments, we show "show all new comments"
|
||||
const threadComment = thread && threadChildren
|
||||
|
||||
const showNewComments = useCallback(() => {
|
||||
// a top level comment doesn't pass depth, we pass its default value of 0 to signify this
|
||||
// child comments are injected from the depth they're at
|
||||
injectNewComments(client, item, depth, sort, threadComment)
|
||||
}, [client, sort, item, depth])
|
||||
|
||||
const text = !threadComment
|
||||
? `${newCommentsCount} new comment${newCommentsCount > 1 ? 's' : ''}`
|
||||
: 'show all new comments'
|
||||
|
||||
return (
|
||||
<>
|
||||
<span
|
||||
ref={ref}
|
||||
onClick={showNewComments}
|
||||
className='fw-bold d-flex align-items-center gap-2 px-3 pointer'
|
||||
style={{ visibility: newCommentsCount > 0 ? 'visible' : 'hidden' }}
|
||||
>
|
||||
{text}
|
||||
<div className={styles.newCommentDot} />
|
||||
</span>
|
||||
{topLevel && newCommentsCount > 0 && (
|
||||
<FloatingComments buttonRef={ref} showNewComments={showNewComments} text={text} />
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
32
components/use-visibility.js
Normal file
32
components/use-visibility.js
Normal file
@ -0,0 +1,32 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
// observe the passed element ref and return its visibility
|
||||
export default function useVisibility (elementRef, options = {}) {
|
||||
// threshold is the percentage of the element that must be visible to be considered visible
|
||||
// with pastElement, we consider the element not visible only when we're past it
|
||||
const { threshold = 0, pastElement = false } = options
|
||||
const [isVisible, setIsVisible] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
const element = elementRef.current
|
||||
if (!element || !window.IntersectionObserver || typeof window === 'undefined') return
|
||||
|
||||
const observer = new window.IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry.isIntersecting) {
|
||||
setIsVisible(true)
|
||||
} else if (pastElement) {
|
||||
setIsVisible(entry.boundingClientRect.top > 0)
|
||||
} else {
|
||||
setIsVisible(false)
|
||||
}
|
||||
}, { threshold }
|
||||
)
|
||||
|
||||
// observe the passed element ref
|
||||
observer.observe(element)
|
||||
return () => observer.disconnect()
|
||||
}, [threshold, elementRef, pastElement])
|
||||
|
||||
return isVisible
|
||||
}
|
||||
@ -48,6 +48,7 @@ export const COMMENT_FIELDS = gql`
|
||||
ncomments
|
||||
nDirectComments
|
||||
newComments @client
|
||||
injected @client
|
||||
imgproxyUrls
|
||||
rel
|
||||
apiKey
|
||||
|
||||
@ -323,11 +323,34 @@ function getClient (uri) {
|
||||
}
|
||||
}
|
||||
},
|
||||
nDirectComments: {
|
||||
merge (existing, incoming, { variables, readField, toReference }) {
|
||||
// if the item has new comments, don't merge the nDirectComments field
|
||||
// preventing new comments not yet injected from being counted, thus causing bottomedOut
|
||||
if (variables?.id && existing !== undefined) {
|
||||
const item = toReference({
|
||||
__typename: 'Item',
|
||||
id: variables.id
|
||||
})
|
||||
const newComments = readField('newComments', item)
|
||||
if (newComments?.length > 0) {
|
||||
return existing
|
||||
}
|
||||
}
|
||||
|
||||
return incoming
|
||||
}
|
||||
},
|
||||
newComments: {
|
||||
read (newComments) {
|
||||
return newComments || []
|
||||
}
|
||||
},
|
||||
injected: {
|
||||
read (injected) {
|
||||
return injected || false
|
||||
}
|
||||
},
|
||||
meAnonSats: {
|
||||
read (existingAmount, { readField }) {
|
||||
if (SSR) return null
|
||||
|
||||
@ -908,10 +908,18 @@ div[contenteditable]:focus,
|
||||
box-shadow: inset 0 0 1px 1px rgba(0, 123, 190, 0.25);
|
||||
}
|
||||
|
||||
.outline-new-injected-comment {
|
||||
box-shadow: inset 0 0 1px 1px rgba(0, 123, 190, 0.25);
|
||||
}
|
||||
|
||||
.outline-new-comment.outline-new-comment-unset {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.outline-new-injected-comment.outline-new-comment-unset {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.outline-new-comment .outline-new-comment {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user