stacker.news/components/comments.js

118 lines
3.1 KiB
JavaScript
Raw Normal View History

2022-05-17 22:09:15 +00:00
import { gql, useApolloClient, useLazyQuery } from '@apollo/client'
2021-12-21 21:29:42 +00:00
import { useEffect, useState } from 'react'
2021-04-22 22:14:32 +00:00
import Comment, { CommentSkeleton } from './comment'
2021-12-21 21:29:42 +00:00
import styles from './header.module.css'
import { Nav, Navbar } from 'react-bootstrap'
import { COMMENTS_QUERY } from '../fragments/items'
import { COMMENTS } from '../fragments/comments'
2022-10-25 21:35:32 +00:00
import { abbrNum } from '../lib/format'
2021-04-15 19:41:02 +00:00
export function CommentsHeader ({ handleSort, pinned, commentSats }) {
const [sort, setSort] = useState(pinned ? 'recent' : 'hot')
2021-12-21 21:29:42 +00:00
const getHandleClick = sort => {
return () => {
setSort(sort)
handleSort(sort)
}
}
return (
2022-09-01 21:06:11 +00:00
<Navbar className='pt-1 pb-0'>
2021-12-21 21:29:42 +00:00
<Nav
className={styles.navbarNav}
activeKey={sort}
>
2022-09-01 21:06:11 +00:00
<Nav.Item className='text-muted'>
2022-10-25 21:35:32 +00:00
{abbrNum(commentSats)} sats
2021-12-21 21:29:42 +00:00
</Nav.Item>
2022-09-01 21:06:11 +00:00
<div className='ml-auto d-flex'>
<Nav.Item>
<Nav.Link
eventKey='hot'
className={styles.navLink}
onClick={getHandleClick('hot')}
>
hot
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link
eventKey='recent'
className={styles.navLink}
onClick={getHandleClick('recent')}
>
recent
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link
eventKey='top'
className={styles.navLink}
onClick={getHandleClick('top')}
>
top
</Nav.Link>
</Nav.Item>
</div>
2021-12-21 21:29:42 +00:00
</Nav>
</Navbar>
)
}
export default function Comments ({ parentId, pinned, commentSats, comments, ...props }) {
2021-12-21 21:29:42 +00:00
const client = useApolloClient()
2021-06-24 23:56:01 +00:00
useEffect(() => {
const hash = window.location.hash
if (hash) {
2022-07-18 21:24:28 +00:00
try {
document.querySelector(hash).scrollIntoView({ behavior: 'smooth' })
} catch {}
2021-06-24 23:56:01 +00:00
}
}, [typeof window !== 'undefined' && window.location.hash])
const [loading, setLoading] = useState()
const [getComments] = useLazyQuery(COMMENTS_QUERY, {
2021-12-21 21:29:42 +00:00
fetchPolicy: 'network-only',
onCompleted: data => {
client.writeFragment({
id: `Item:${parentId}`,
fragment: gql`
${COMMENTS}
fragment Comments on Item {
comments {
...CommentsRecursive
}
}
`,
fragmentName: 'Comments',
data: {
comments: data.comments
}
})
setLoading(false)
2021-12-21 21:29:42 +00:00
}
})
2021-06-24 23:56:01 +00:00
2021-12-21 21:29:42 +00:00
return (
<>
{comments.length
? <CommentsHeader
commentSats={commentSats} pinned={pinned} handleSort={sort => {
setLoading(true)
getComments({ variables: { id: parentId, sort } })
}}
/>
: null}
2021-12-21 21:29:42 +00:00
{loading
? <CommentsSkeleton />
: comments.map(item => (
2022-05-17 22:09:15 +00:00
<Comment depth={1} key={item.id} item={item} {...props} />
2021-12-21 21:29:42 +00:00
))}
</>
)
2021-04-27 00:55:48 +00:00
}
export function CommentsSkeleton () {
2021-05-05 18:13:14 +00:00
return <CommentSkeleton skeletonChildren={7} />
2021-04-27 00:55:48 +00:00
}