import { Fragment, useMemo } 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' import MoreFooter from './more-footer' import { FULL_COMMENTS_THRESHOLD } from '@/lib/constants' 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, commentsCursor, fetchMoreComments, ncomments, ...props }) { const router = useRouter() const pins = useMemo(() => comments?.filter(({ position }) => !!position).sort((a, b) => a.position - b.position), [comments]) 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 => ( ))} {ncomments > FULL_COMMENTS_THRESHOLD && } ) } export function CommentsSkeleton () { return }