stacker.news/components/comments-flat.js

39 lines
934 B
JavaScript
Raw Normal View History

2021-06-24 23:56:01 +00:00
import { useQuery } from '@apollo/client'
import { MORE_FLAT_COMMENTS } from '../fragments/comments'
2022-01-27 19:18:48 +00:00
import { CommentFlat, CommentSkeleton } from './comment'
2021-09-30 15:46:58 +00:00
import MoreFooter from './more-footer'
2021-06-24 23:56:01 +00:00
2021-09-30 15:46:58 +00:00
export default function CommentsFlat ({ variables, comments, cursor, ...props }) {
const { data, fetchMore } = useQuery(MORE_FLAT_COMMENTS, {
2021-10-26 20:49:37 +00:00
variables
2021-06-24 23:56:01 +00:00
})
2021-09-30 15:46:58 +00:00
if (!data && !comments) {
2021-06-24 23:56:01 +00:00
return <CommentsFlatSkeleton />
}
2021-09-30 15:46:58 +00:00
if (data) {
({ moreFlatComments: { comments, cursor } } = data)
}
2021-06-24 23:56:01 +00:00
return (
<>
2022-01-27 19:18:48 +00:00
{comments.map(item =>
<CommentFlat key={item.id} item={item} {...props} />
)}
2021-09-30 15:46:58 +00:00
<MoreFooter cursor={cursor} fetchMore={fetchMore} Skeleton={CommentsFlatSkeleton} />
2021-06-24 23:56:01 +00:00
</>
)
}
function CommentsFlatSkeleton () {
const comments = new Array(21).fill(null)
return (
<div>{comments.map((_, i) => (
<CommentSkeleton key={i} skeletonChildren={0} />
))}
</div>
)
}