stacker.news/components/comments-flat.js

52 lines
1.3 KiB
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'
import Comment, { CommentSkeleton } from './comment'
2021-08-17 23:59:22 +00:00
import { useRouter } from 'next/router'
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 }) {
2021-08-17 23:59:22 +00:00
const router = useRouter()
2021-09-30 15:46:58 +00:00
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 (
<>
{comments.map(item => (
2021-08-17 23:59:22 +00:00
<div
key={item.id}
2021-11-12 22:39:52 +00:00
className='clickToContext py-2'
2021-08-17 23:59:22 +00:00
onClick={() => {
router.push({
pathname: '/items/[id]',
2021-11-27 18:01:02 +00:00
query: { id: item.root.id, commentId: item.id }
}, `/items/${item.root.id}`)
2021-08-17 23:59:22 +00:00
}}
>
<Comment item={item} {...props} />
</div>
2021-06-24 23:56:01 +00:00
))}
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>
)
}