import {Comment} from '@common/comments/comment'; import {Trans} from '@common/i18n/trans'; import {CommentIcon} from '@common/icons/material/Comment'; import {Commentable} from '@common/comments/commentable'; import {useComments} from '@common/comments/requests/use-comments'; import {InfiniteScrollSentinel} from '@common/ui/infinite-scroll/infinite-scroll-sentinel'; import {AnimatePresence, m} from 'framer-motion'; import {opacityAnimation} from '@common/ui/animation/opacity-animation'; import {FormattedNumber} from '@common/i18n/formatted-number'; import {IllustratedMessage} from '@common/ui/images/illustrated-message'; import {CommentListItem} from '@common/comments/comment-list/comment-list-item'; import {Skeleton} from '@common/ui/skeleton/skeleton'; import {ReactNode} from 'react'; import {AccountRequiredCard} from '@common/comments/comment-list/account-required-card'; import {message} from '@common/i18n/message'; const accountRequiredMessage = message( 'Please login or create account to comment' ); interface CommentListProps { commentable: Commentable; canDeleteAllComments?: boolean; className?: string; children?: ReactNode; perPage?: number; } export function CommentList({ className, commentable, canDeleteAllComments = false, children, perPage = 25, }: CommentListProps) { const {items, totalItems, ...query} = useComments(commentable, {perPage}); if (query.isError) { return null; } return (
{query.isInitialLoading ? ( ) : ( }} /> )}
{children} {query.isInitialLoading ? ( ) : ( )}
); } interface CommentListItemsProps { comments: Comment[]; canDeleteAllComments: boolean; commentable: Commentable; } function CommentListItems({ comments, commentable, canDeleteAllComments, }: CommentListItemsProps) { if (!comments.length) { return ( } description={} /> ); } return ( {comments.map(comment => ( ))} ); } interface CommentSkeletonsProps { count: number; } function CommentSkeletons({count}: CommentSkeletonsProps) { return ( {[...new Array(count).keys()].map(index => (
))}
); }