feat: comment to test run's case (#390)
This commit is contained in:
kimatata
95
frontend/components/CommentItem.tsx
Normal file
95
frontend/components/CommentItem.tsx
Normal file
@@ -0,0 +1,95 @@
|
||||
import { Button, Textarea, Card, CardBody } from '@heroui/react';
|
||||
import { Trash2, Edit2 } from 'lucide-react';
|
||||
import UserAvatar from './UserAvatar';
|
||||
import { CommentMessages, CommentType } from '@/types/comment';
|
||||
|
||||
type Props = {
|
||||
comment: CommentType;
|
||||
isEditing: boolean;
|
||||
canEdit: boolean;
|
||||
editContent: string;
|
||||
isSubmitting: boolean;
|
||||
messages: CommentMessages;
|
||||
onEditContentChange: (value: string) => void;
|
||||
onStartEdit: () => void;
|
||||
onCancelEdit: () => void;
|
||||
onSave: () => void;
|
||||
onDelete: () => void;
|
||||
};
|
||||
|
||||
export default function CommentItem({
|
||||
comment,
|
||||
isEditing,
|
||||
canEdit,
|
||||
editContent,
|
||||
isSubmitting,
|
||||
messages,
|
||||
onEditContentChange,
|
||||
onStartEdit,
|
||||
onCancelEdit,
|
||||
onSave,
|
||||
onDelete,
|
||||
}: Props) {
|
||||
return (
|
||||
<Card shadow="sm">
|
||||
<CardBody>
|
||||
<div className="flex items-start gap-3">
|
||||
<UserAvatar username={comment.User.username} size={24} />
|
||||
<div className="flex-grow min-w-0">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div>
|
||||
<span className="font-semibold text-sm">{comment.User.username}</span>
|
||||
<span className="text-xs text-default-400 ml-2">{new Date(comment.createdAt).toLocaleString()}</span>
|
||||
</div>
|
||||
{canEdit && (
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
aria-label="Edit Comment"
|
||||
isIconOnly
|
||||
size="sm"
|
||||
variant="light"
|
||||
onPress={onStartEdit}
|
||||
isDisabled={isSubmitting}
|
||||
>
|
||||
<Edit2 size={16} />
|
||||
</Button>
|
||||
<Button
|
||||
aria-label="Delete Comment"
|
||||
isIconOnly
|
||||
size="sm"
|
||||
variant="light"
|
||||
color="danger"
|
||||
onPress={onDelete}
|
||||
isDisabled={isSubmitting}
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{isEditing ? (
|
||||
<div>
|
||||
<Textarea
|
||||
value={editContent}
|
||||
onValueChange={onEditContentChange}
|
||||
minRows={3}
|
||||
isDisabled={isSubmitting}
|
||||
/>
|
||||
<div className="flex gap-2 mt-2">
|
||||
<Button size="sm" color="primary" onPress={onSave} isLoading={isSubmitting}>
|
||||
{messages.save}
|
||||
</Button>
|
||||
<Button size="sm" variant="bordered" onPress={onCancelEdit} isDisabled={isSubmitting}>
|
||||
{messages.cancel}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm whitespace-pre-wrap">{comment.content}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -1,12 +1,201 @@
|
||||
'use client';
|
||||
import { useEffect, useState, useContext } from 'react';
|
||||
import { Button, Textarea, Spinner, addToast } from '@heroui/react';
|
||||
import CommentItem from './CommentItem';
|
||||
import { TokenContext } from '@/utils/TokenProvider';
|
||||
import { fetchComments, createComment, updateComment, deleteComment } from '@/utils/commentControl';
|
||||
import { logError } from '@/utils/errorHandler';
|
||||
import type { CommentMessages, CommentType } from '@/types/comment';
|
||||
|
||||
import { Alert } from '@heroui/react';
|
||||
type Props = {
|
||||
projectId: string;
|
||||
commentableType: 'RunCase' | 'Run' | 'Case';
|
||||
commentableId?: number;
|
||||
messages: CommentMessages;
|
||||
};
|
||||
|
||||
export default function Comments({ projectId, commentableType, commentableId, messages }: Props) {
|
||||
const context = useContext(TokenContext);
|
||||
const [comments, setComments] = useState<CommentType[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [newComment, setNewComment] = useState('');
|
||||
const [editingId, setEditingId] = useState<number | null>(null);
|
||||
const [editContent, setEditContent] = useState('');
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
async function loadComments() {
|
||||
if (!commentableType || !commentableId || !context.isSignedIn()) return;
|
||||
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const data = await fetchComments(context.token.access_token, commentableType, commentableId);
|
||||
setComments(data);
|
||||
} catch (error: unknown) {
|
||||
logError('Error fetching comments', error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
loadComments();
|
||||
}, [commentableType, commentableId, context]);
|
||||
|
||||
const handleAddComment = async () => {
|
||||
if (!newComment.trim() || !commentableType || !commentableId) return;
|
||||
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
const comment = await createComment(context.token.access_token, commentableType, commentableId, newComment);
|
||||
if (!comment) {
|
||||
throw new Error('Failed to create comment');
|
||||
}
|
||||
const updatedComments = [...comments, comment];
|
||||
setComments(updatedComments);
|
||||
setNewComment('');
|
||||
addToast({
|
||||
title: 'Success',
|
||||
color: 'success',
|
||||
description: messages.commentAdded,
|
||||
});
|
||||
} catch (error: unknown) {
|
||||
logError('Error adding comment', error);
|
||||
addToast({
|
||||
title: 'Error',
|
||||
color: 'danger',
|
||||
description: messages.failedToAddComment,
|
||||
});
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleStartEdit = (id: number, content: string) => {
|
||||
setEditingId(id);
|
||||
setEditContent(content);
|
||||
};
|
||||
|
||||
const handleCancelEdit = () => {
|
||||
setEditingId(null);
|
||||
setEditContent('');
|
||||
};
|
||||
|
||||
const handleSaveEdit = async (id: number) => {
|
||||
if (!editContent.trim()) return;
|
||||
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
const updated = await updateComment(context.token.access_token, id, editContent);
|
||||
if (!updated) {
|
||||
throw new Error('Failed to update comment');
|
||||
}
|
||||
setComments(comments.map((c) => (c.id === id ? { ...c, content: editContent } : c)));
|
||||
setEditingId(null);
|
||||
setEditContent('');
|
||||
addToast({
|
||||
title: 'Success',
|
||||
color: 'success',
|
||||
description: messages.commentUpdated,
|
||||
});
|
||||
} catch (error: unknown) {
|
||||
logError('Error updating comment', error);
|
||||
addToast({
|
||||
title: 'Error',
|
||||
color: 'danger',
|
||||
description: messages.failedToUpdateComment,
|
||||
});
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteComment = async (id: number) => {
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
await deleteComment(context.token.access_token, id);
|
||||
const updatedComments = comments.filter((c) => c.id !== id);
|
||||
setComments(updatedComments);
|
||||
addToast({
|
||||
title: 'Success',
|
||||
color: 'success',
|
||||
description: messages.commentDeleted,
|
||||
});
|
||||
} catch (error: unknown) {
|
||||
logError('Error deleting comment', error);
|
||||
addToast({
|
||||
title: 'Error',
|
||||
color: 'danger',
|
||||
description: messages.failedToDeleteComment,
|
||||
});
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!commentableType || !commentableId) {
|
||||
return (
|
||||
<div className="text-default-500 text-sm">
|
||||
{commentableType === 'RunCase' && !commentableId ? <p>{messages.notIncludedInRun}</p> : <p>Unknown state</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="h-full flex items-center justify-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const canComment = projectId && context.isProjectReporter(Number(projectId));
|
||||
|
||||
export default function Comments() {
|
||||
return (
|
||||
<div className="h-full text-default-500">
|
||||
<div className="mb-4">
|
||||
<Alert color="secondary" title="Sorry" description={'Comments function will be implemented'} />
|
||||
<div className="h-full flex flex-col justify-between">
|
||||
{comments.length === 0 ? (
|
||||
<div className="text-center text-default-400 py-8">
|
||||
<p>{messages.noComments}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{comments.map((comment) => (
|
||||
<CommentItem
|
||||
key={comment.id}
|
||||
comment={comment}
|
||||
isEditing={editingId === comment.id}
|
||||
canEdit={comment.userId === context.token.user?.id}
|
||||
editContent={editContent}
|
||||
isSubmitting={isSubmitting}
|
||||
messages={messages}
|
||||
onEditContentChange={setEditContent}
|
||||
onStartEdit={() => handleStartEdit(comment.id, comment.content)}
|
||||
onCancelEdit={handleCancelEdit}
|
||||
onSave={() => handleSaveEdit(comment.id)}
|
||||
onDelete={() => handleDeleteComment(comment.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-12">
|
||||
<Textarea
|
||||
placeholder={messages.placeholder}
|
||||
value={newComment}
|
||||
onValueChange={setNewComment}
|
||||
minRows={3}
|
||||
variant="bordered"
|
||||
isDisabled={!canComment || isSubmitting}
|
||||
/>
|
||||
<Button
|
||||
color="primary"
|
||||
size="sm"
|
||||
className="mt-2"
|
||||
onPress={handleAddComment}
|
||||
isLoading={isSubmitting}
|
||||
isDisabled={!newComment.trim() || !canComment}
|
||||
>
|
||||
{messages.addComment}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user