import { useQuery } from '@apollo/client' import Button from 'react-bootstrap/Button' import { MORE_FLAT_COMMENTS } from '../fragments/comments' import { useState } from 'react' import Comment, { CommentSkeleton } from './comment' import styles from './notifications.module.css' import { useRouter } from 'next/router' export default function CommentsFlat ({ variables, ...props }) { const router = useRouter() const { error, data, fetchMore } = useQuery(MORE_FLAT_COMMENTS, { variables, fetchPolicy: router.query.cache ? 'cache-first' : undefined }) if (error) return
Failed to load!
if (!data) { return } const { moreFlatComments: { comments, cursor } } = data return ( <> {comments.map(item => (
{ router.push({ pathname: '/items/[id]', query: { id: item.parentId, commentId: item.id } }, `/items/${item.parentId}`) }} >
))} ) } function CommentsFlatSkeleton () { const comments = new Array(21).fill(null) return (
{comments.map((_, i) => ( ))}
) } function MoreFooter ({ cursor, fetchMore }) { const [loading, setLoading] = useState(false) if (loading) { return
} let Footer if (cursor) { Footer = () => ( ) } else { Footer = () => (
GENISIS
) } return
}