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 => (
))}
);
}