import { Fragment } from 'react' 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 ( ) } export default function Comments ({ parentId, pinned, bio, parentCreatedAt, commentSats, comments, ...props }) { const router = useRouter() const pins = comments?.filter(({ position }) => !!position).sort((a, b) => a.position - b.position) return ( <> {comments?.length > 0 ? { const { commentsViewedAt, commentId, ...query } = router.query delete query.nodata router.push({ pathname: router.pathname, query: { ...query, commentsViewedAt, sort } }, { pathname: `/items/${parentId}`, query: sort === defaultCommentSort(pinned, bio, parentCreatedAt) ? undefined : { sort } }, { scroll: false }) }} /> : null} {pins.map(item => ( ))} {comments.filter(({ position }) => !position).map(item => ( ))} ) } export function CommentsSkeleton () { return }