import { gql, useApolloClient, useLazyQuery } from '@apollo/client' import { useEffect, useState } from 'react' import Comment, { CommentSkeleton } from './comment' import styles from './header.module.css' import { Nav, Navbar } from 'react-bootstrap' import { COMMENTS_QUERY } from '../fragments/items' import { COMMENTS } from '../fragments/comments' import { abbrNum } from '../lib/format' export function CommentsHeader ({ handleSort, pinned, commentSats }) { const [sort, setSort] = useState(pinned ? 'recent' : 'hot') const getHandleClick = sort => { return () => { setSort(sort) handleSort(sort) } } return ( ) } export default function Comments ({ parentId, pinned, commentSats, comments, ...props }) { const client = useApolloClient() useEffect(() => { const hash = window.location.hash if (hash) { try { document.querySelector(hash).scrollIntoView({ behavior: 'smooth' }) } catch {} } }, []) const [loading, setLoading] = useState() const [getComments] = useLazyQuery(COMMENTS_QUERY, { 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) } }) return ( <> {comments.length ? { setLoading(true) getComments({ variables: { id: parentId, sort } }) }} /> : null} {loading ? : comments.map(item => ( ))} ) } export function CommentsSkeleton () { return }