Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | 1x 1x 1x 1x 1x 1x 42x 42x 42x 42x 42x 42x 42x 42x 42x 3x 3x 39x 39x 39x 71x 71x 71x 66x 5x 71x 66x 5x 71x 66x 5x 71x 71x 71x 71x 71x 71x 71x 71x 71x 71x 71x 71x 71x 71x 71x 39x 39x 39x | // Types
import { FeedbackVisibility, MealCommentDisplay } from '@/types';
// Utils
import { combineClasses } from '@shared/utils';
// Components
import { CommentCard } from '@/components/CommentCard';
// Constants
import { COMMENT_LIST_EMPTY_LABEL } from '@/constants/dailyFeedback';
// Styles
import './styles/comment-list.css';
export interface CommentListProps {
items: MealCommentDisplay[];
selectedIds?: Set<string>;
loadingIds?: Set<string>;
disabled?: boolean;
onToggleSelect?: (commentId: string) => void;
emptyLabel?: string;
className?: string;
}
export const CommentList = ({
items,
selectedIds,
loadingIds,
disabled = false,
onToggleSelect,
emptyLabel = COMMENT_LIST_EMPTY_LABEL,
className = '',
}: CommentListProps) => {
if (!items.length) {
return <p className="comment-list-empty">{emptyLabel}</p>;
}
return (
<ul className={combineClasses('comment-list-root', className)}>
{items.map((item, index) => {
const key = item.commentId ?? index;
const isAnonymous = item.visibility === FeedbackVisibility.Anonymous;
const isSelected = item.commentId
? selectedIds?.has(item.commentId)
: false;
const isLoading = item.commentId
? loadingIds?.has(item.commentId)
: false;
const handleToggleSelect = item.commentId
? () => onToggleSelect?.(item.commentId!)
: undefined;
return (
<li key={key} className="comment-list-item">
<CommentCard
name={item.authorName}
avatarUrl={item.avatarUrl}
isAnonymous={isAnonymous}
feedback={item.feedback}
createdTime={item.createdTime}
feedbackSentiment={item.feedbackSentiment}
isSelected={isSelected}
isLoading={isLoading}
disabled={disabled}
onToggleSelect={handleToggleSelect}
/>
</li>
);
})}
</ul>
);
};
|