@@ -273,7 +279,7 @@ export default function Comment ({
? (
<>
{item.comments.comments.map((item) => (
-
+
))}
{item.comments.comments.length < item.nDirectComments &&
}
diff --git a/components/comment.module.css b/components/comment.module.css
index 215993d6..4d4e3114 100644
--- a/components/comment.module.css
+++ b/components/comment.module.css
@@ -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;
}
-}
\ No newline at end of file
+}
+
+.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);
+ }
+}
diff --git a/components/comments.js b/components/comments.js
index 4d1c0bbf..6e79a1c1 100644
--- a/components/comments.js
+++ b/components/comments.js
@@ -76,7 +76,7 @@ export default function Comments ({
return (
<>
-
+
{comments?.length > 0
?
(
-
+
))}
{comments.filter(({ position }) => !position).map(item => (
-
+
))}
{ncomments > FULL_COMMENTS_THRESHOLD &&
!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 (
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'}
-
+ {text}
)
}
+
+// 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 (
+ <>
+ 0 ? 'visible' : 'hidden' }}
+ >
+ {text}
+
+
+ {topLevel && newCommentsCount > 0 && (
+
+ )}
+
+ )
+}
diff --git a/components/use-visibility.js b/components/use-visibility.js
new file mode 100644
index 00000000..6d737f1d
--- /dev/null
+++ b/components/use-visibility.js
@@ -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
+}
diff --git a/fragments/comments.js b/fragments/comments.js
index be6385d2..43658c6a 100644
--- a/fragments/comments.js
+++ b/fragments/comments.js
@@ -48,6 +48,7 @@ export const COMMENT_FIELDS = gql`
ncomments
nDirectComments
newComments @client
+ injected @client
imgproxyUrls
rel
apiKey
diff --git a/lib/apollo.js b/lib/apollo.js
index ee686d3c..7cc81f6a 100644
--- a/lib/apollo.js
+++ b/lib/apollo.js
@@ -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
diff --git a/styles/globals.scss b/styles/globals.scss
index a0667da3..0d865978 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -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;
}