90 lines
2.4 KiB
JavaScript
90 lines
2.4 KiB
JavaScript
import Comment, { CommentSkeleton } from './comment'
|
|
import styles from './header.module.css'
|
|
import Nav from 'react-bootstrap/Nav'
|
|
import Navbar from 'react-bootstrap/Navbar'
|
|
import { numWithUnits } from '../lib/format'
|
|
import { defaultCommentSort } from '../lib/item'
|
|
import { useRouter } from 'next/router'
|
|
|
|
export function CommentsHeader ({ handleSort, pinned, bio, parentCreatedAt, commentSats }) {
|
|
const router = useRouter()
|
|
const sort = router.query.sort || defaultCommentSort(pinned, bio, parentCreatedAt)
|
|
|
|
const getHandleClick = sort => {
|
|
return () => {
|
|
handleSort(sort)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Navbar className='pt-1 pb-0 px-3'>
|
|
<Nav
|
|
className={styles.navbarNav}
|
|
activeKey={sort}
|
|
>
|
|
<Nav.Item className='text-muted'>
|
|
{numWithUnits(commentSats)}
|
|
</Nav.Item>
|
|
<div className='ms-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>
|
|
</Nav>
|
|
</Navbar>
|
|
)
|
|
}
|
|
|
|
export default function Comments ({ parentId, pinned, bio, parentCreatedAt, commentSats, comments, ...props }) {
|
|
const router = useRouter()
|
|
|
|
return (
|
|
<>
|
|
{comments?.length > 0
|
|
? <CommentsHeader
|
|
commentSats={commentSats} parentCreatedAt={parentCreatedAt}
|
|
pinned={pinned} bio={bio} handleSort={sort => {
|
|
const query = router.query
|
|
delete query.nodata
|
|
router.push({
|
|
pathname: router.pathname,
|
|
query: { ...router.query, sort }
|
|
}, undefined, { scroll: false })
|
|
}}
|
|
/>
|
|
: null}
|
|
{comments.map(item => (
|
|
<Comment depth={1} key={item.id} item={item} {...props} />
|
|
))}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export function CommentsSkeleton () {
|
|
return <CommentSkeleton skeletonChildren={7} />
|
|
}
|