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 | 1x 1x 1x 1x 1x 1x 15x 15x 15x 15x 15x 15x 15x 15x 3x 3x 12x 12x 12x 36x 36x 36x 36x 36x 36x 36x 36x 36x 36x 36x 36x 36x 36x 36x 36x 36x 36x 36x 36x 36x 36x 12x 12x 12x | // 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>;
onToggleSelect?: (commentId: string) => void;
emptyLabel?: string;
className?: string;
}
export const CommentList = ({
items,
selectedIds,
loadingIds,
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}
onToggleSelect={handleToggleSelect}
/>
</li>
);
})}
</ul>
);
};
|