stacker.news/components/comments.js

90 lines
2.4 KiB
JavaScript
Raw Normal View History

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'
2023-07-24 18:35:05 +00:00
import Nav from 'react-bootstrap/Nav'
import Navbar from 'react-bootstrap/Navbar'
2022-10-25 21:35:32 +00:00
import { abbrNum } from '../lib/format'
import { defaultCommentSort } from '../lib/item'
2023-07-26 00:45:35 +00:00
import { useRouter } from 'next/router'
2021-04-15 19:41:02 +00:00
export function CommentsHeader ({ handleSort, pinned, bio, parentCreatedAt, commentSats }) {
2023-07-26 00:45:35 +00:00
const router = useRouter()
const sort = router.query.sort || defaultCommentSort(pinned, bio, parentCreatedAt)
2021-12-21 21:29:42 +00:00
const getHandleClick = sort => {
return () => {
handleSort(sort)
}
}
return (
2023-07-24 18:35:05 +00:00
<Navbar className='pt-1 pb-0 px-3'>
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>
2023-07-24 18:35:05 +00:00
<div className='ms-auto d-flex'>
2022-09-01 21:06:11 +00:00
<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, bio, parentCreatedAt, commentSats, comments, ...props }) {
2023-07-26 00:45:35 +00:00
const router = useRouter()
2021-06-24 23:56:01 +00:00
2021-12-21 21:29:42 +00:00
return (
<>
2023-07-26 00:45:35 +00:00
{comments?.length > 0
? <CommentsHeader
commentSats={commentSats} parentCreatedAt={parentCreatedAt}
pinned={pinned} bio={bio} handleSort={sort => {
2023-07-26 00:45:35 +00:00
const query = router.query
delete query.nodata
router.push({
pathname: router.pathname,
query: { ...router.query, sort }
}, router.asPath, { scroll: false })
}}
/>
: null}
2023-07-26 00:45:35 +00:00
{comments.map(item => (
<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
}