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 <l>login</l> or <r>create account</r> 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 (
<div className={className}>
<div className="mb-8 pb-8 border-b flex items-center gap-8">
<CommentIcon size="sm" className="text-muted" />
{query.isInitialLoading ? (
<Trans message="Loading comments..." />
) : (
<Trans
message=":count comments"
values={{count: <FormattedNumber value={totalItems || 0} />}}
/>
)}
</div>
{children}
<AccountRequiredCard message={accountRequiredMessage} />
<AnimatePresence initial={false} mode="wait">
{query.isInitialLoading ? (
<CommentSkeletons count={4} />
) : (
<CommentListItems
comments={items}
canDeleteAllComments={canDeleteAllComments}
commentable={commentable}
/>
)}
</AnimatePresence>
<InfiniteScrollSentinel query={query} variant="loadMore" />
</div>
);
}
interface CommentListItemsProps {
comments: Comment[];
canDeleteAllComments: boolean;
commentable: Commentable;
}
function CommentListItems({
comments,
commentable,
canDeleteAllComments,
}: CommentListItemsProps) {
if (!comments.length) {
return (
<IllustratedMessage
className="mt-24"
size="sm"
title={<Trans message="Seems a little quiet over here" />}
description={<Trans message="Be the first to comment" />}
/>
);
}
return (
<m.div key="comments" {...opacityAnimation}>
{comments.map(comment => (
<CommentListItem
key={comment.id}
comment={comment}
commentable={commentable}
canDelete={canDeleteAllComments}
/>
))}
</m.div>
);
}
interface CommentSkeletonsProps {
count: number;
}
function CommentSkeletons({count}: CommentSkeletonsProps) {
return (
<m.div key="loading-skeleton" {...opacityAnimation}>
{[...new Array(count).keys()].map(index => (
<div
key={index}
className="flex items-start gap-24 py-18 min-h-70 group"
>
<Skeleton variant="avatar" radius="rounded-full" size="w-60 h-60" />
<div className="text-sm flex-auto">
<Skeleton className="text-base max-w-184 mb-4" />
<Skeleton className="text-sm" />
<div className="flex items-center gap-8 mt-10">
<Skeleton className="text-sm max-w-70" />
<Skeleton className="text-sm max-w-40" />
<Skeleton className="text-sm max-w-60" />
</div>
</div>
</div>
))}
</m.div>
);
}