Skip to content

Commit a702b7b

Browse files
SoxasoraSoxasora
committed
enhance: change favicon on new comments; warn: prop-drilling
1 parent 31b8937 commit a702b7b

File tree

4 files changed

+23
-11
lines changed

4 files changed

+23
-11
lines changed

‎components/comment.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ export function CommentFlat ({ item, rank, siblingComments, ...props }) {
9898

9999
export default function Comment ({
100100
item, children, replyOpen, includeParent, topLevel,
101-
rootText, noComments, noReply, truncate, depth, pin, setDisableRetry, disableRetry
101+
rootText, noComments, noReply, truncate, depth, pin, setDisableRetry, disableRetry, setHasNewComments
102102
}) {
103103
const [edit, setEdit] = useState()
104104
const { me } = useMe()
@@ -263,8 +263,8 @@ export default function Comment ({
263263
{root.bounty && !bountyPaid && <PayBounty item={item} />}
264264
<div className='ms-auto'>
265265
{item.path.split('.').length === 2
266-
? <ShowAllNewComments item={item} />
267-
: <ShowNewComments comments={item.comments.comments} newComments={item.newComments} itemId={item.id} />}
266+
? <ShowAllNewComments item={item} setHasNewComments={setHasNewComments} />
267+
: <ShowNewComments comments={item.comments.comments} newComments={item.newComments} itemId={item.id} setHasNewComments={setHasNewComments} />}
268268
</div>
269269
</Reply>}
270270
{children}

‎components/comments.js

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Fragment, useMemo } from 'react'
1+
import { Fragment, useMemo, useState } from 'react'
22
import Comment, { CommentSkeleton } from './comment'
33
import styles from './header.module.css'
44
import Nav from 'react-bootstrap/Nav'
@@ -10,6 +10,8 @@ import MoreFooter from './more-footer'
1010
import { FULL_COMMENTS_THRESHOLD } from '@/lib/constants'
1111
import useLiveComments from './use-live-comments'
1212
import { ShowNewComments } from './show-new-comments'
13+
import Head from 'next/head'
14+
import { useHasNewNotes } from './use-has-new-notes'
1315

1416
export function CommentsHeader ({ handleSort, pinned, bio, parentCreatedAt, commentSats }) {
1517
const router = useRouter()
@@ -68,14 +70,20 @@ export default function Comments ({
6870
parentId, pinned, bio, parentCreatedAt,
6971
commentSats, comments, commentsCursor, fetchMoreComments, ncomments, newComments, lastCommentAt, ...props
7072
}) {
73+
const [hasNewComments, setHasNewComments] = useState(false)
7174
const router = useRouter()
7275
// fetch new comments that arrived after the lastCommentAt, and update the item.newComments field in cache
73-
useLiveComments(parentId, lastCommentAt || parentCreatedAt, router.query.sort)
76+
useLiveComments(parentId, lastCommentAt || parentCreatedAt, router.query.sort, setHasNewComments)
77+
console.log('hasNewComments', hasNewComments)
78+
const hasNewNotes = useHasNewNotes()
7479

7580
const pins = useMemo(() => comments?.filter(({ position }) => !!position).sort((a, b) => a.position - b.position), [comments])
7681

7782
return (
7883
<>
84+
<Head>
85+
<link rel='shortcut icon' href={hasNewComments ? '/favicon.png' : hasNewNotes ? '/favicon-notify.png' : '/favicon.png'} />
86+
</Head>
7987
{comments?.length > 0
8088
? <CommentsHeader
8189
commentSats={commentSats} parentCreatedAt={parentCreatedAt}
@@ -93,15 +101,15 @@ export default function Comments ({
93101
/>
94102
: null}
95103
{newComments?.length > 0 && (
96-
<ShowNewComments topLevel comments={comments} newComments={newComments} itemId={parentId} sort={router.query.sort} />
104+
<ShowNewComments topLevel comments={comments} newComments={newComments} itemId={parentId} sort={router.query.sort} setHasNewComments={setHasNewComments} />
97105
)}
98106
{pins.map(item => (
99107
<Fragment key={item.id}>
100-
<Comment depth={1} item={item} {...props} pin />
108+
<Comment depth={1} item={item} {...props} pin setHasNewComments={setHasNewComments} />
101109
</Fragment>
102110
))}
103111
{comments.filter(({ position }) => !position).map(item => (
104-
<Comment depth={1} key={item.id} item={item} {...props} />
112+
<Comment depth={1} key={item.id} item={item} {...props} setHasNewComments={setHasNewComments} />
105113
))}
106114
{ncomments > FULL_COMMENTS_THRESHOLD &&
107115
<MoreFooter

‎components/show-new-comments.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,13 +77,14 @@ function collectAllNewComments (item) {
7777
}
7878

7979
// TODO: merge this with ShowNewComments
80-
export function ShowAllNewComments ({ item }) {
80+
export function ShowAllNewComments ({ item, setHasNewComments }) {
8181
const client = useApolloClient()
8282

8383
const newComments = useMemo(() => collectAllNewComments(item), [item])
8484

8585
const showNewComments = useCallback(() => {
8686
showAllNewCommentsRecursively(client, item)
87+
setHasNewComments(false)
8788
}, [client, item])
8889

8990
if (newComments.length === 0) {
@@ -104,7 +105,7 @@ export function ShowAllNewComments ({ item }) {
104105
}
105106

106107
// ShowNewComments is a component that dedupes, refreshes and injects newComments into the comments field
107-
export function ShowNewComments ({ topLevel = false, comments, newComments = [], itemId, sort }) {
108+
export function ShowNewComments ({ topLevel = false, comments, newComments = [], itemId, sort, setHasNewComments }) {
108109
const client = useApolloClient()
109110
const dedupedNewComments = useMemo(() => dedupeNewComments(newComments, comments), [newComments, comments])
110111

@@ -117,6 +118,7 @@ export function ShowNewComments ({ topLevel = false, comments, newComments = [],
117118
} else {
118119
commentUpdateFragment(client, itemId, payload)
119120
}
121+
setHasNewComments(false)
120122
}, [client, itemId, dedupedNewComments, topLevel, sort])
121123

122124
if (dedupedNewComments.length === 0) {

‎components/use-live-comments.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const POLL_INTERVAL = 1000 * 10 // 10 seconds
88

99
// useLiveComments fetches new comments under an item (rootId), that arrives after the latest comment createdAt
1010
// and inserts them into the newComment client field of their parent comment/post.
11-
export default function useLiveComments (rootId, after, sort) {
11+
export default function useLiveComments (rootId, after, sort, setHasNewComments) {
1212
const client = useApolloClient()
1313
const [latest, setLatest] = useState(after)
1414
const queue = useRef([])
@@ -35,6 +35,8 @@ export default function useLiveComments (rootId, after, sort) {
3535

3636
// update latest timestamp to the latest comment created at
3737
setLatest(prevLatest => getLatestCommentCreatedAt(data.newComments.comments, prevLatest))
38+
39+
setHasNewComments(true)
3840
}, [data, client, rootId, sort])
3941

4042
// cleanup queue on unmount to prevent memory leaks

0 commit comments

Comments
 (0)