diff --git a/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx b/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx
index 1a19230b..a87139a8 100644
--- a/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx
+++ b/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx
@@ -2,6 +2,7 @@ import clsx from 'clsx';
import { formatDistanceToNow } from 'date-fns';
import { useState } from 'react';
+import ResumeCommentDeleteForm from './comment/ResumeCommentDeleteForm';
import ResumeCommentEditForm from './comment/ResumeCommentEditForm';
import ResumeCommentReplyForm from './comment/ResumeCommentReplyForm';
import ResumeCommentVoteButtons from './comment/ResumeCommentVoteButtons';
@@ -22,6 +23,7 @@ export default function ResumeCommentListItem({
const isCommentOwner = userId === comment.user.userId;
const [isEditingComment, setIsEditingComment] = useState(false);
const [isReplyingComment, setIsReplyingComment] = useState(false);
+ const [isDeletingComment, setIsDeletingComment] = useState(false);
const [showReplies, setShowReplies] = useState(true);
return (
@@ -73,7 +75,7 @@ export default function ResumeCommentListItem({
)}
- {/* Upvote and edit */}
+ {/* Upvote and actions (edit, reply, delete) */}
{/* Action buttons; only present for authenticated user when not editing/replying */}
@@ -84,6 +86,7 @@ export default function ResumeCommentListItem({
onClick={() => {
setIsReplyingComment(!isReplyingComment);
setIsEditingComment(false);
+ setIsDeletingComment(false);
}}>
Reply
@@ -111,10 +114,32 @@ export default function ResumeCommentListItem({
onClick={() => {
setIsEditingComment(!isEditingComment);
setIsReplyingComment(false);
+ setIsDeletingComment(false);
}}>
Edit
)}
+
+ {isCommentOwner && !isDeletingComment && (
+
+ )}
+
+ {/* Delete comment form */}
+ {isDeletingComment && (
+
+ )}
{/* Reply Form */}
diff --git a/apps/portal/src/components/resumes/comments/comment/ResumeCommentDeleteForm.tsx b/apps/portal/src/components/resumes/comments/comment/ResumeCommentDeleteForm.tsx
new file mode 100644
index 00000000..ba60eda9
--- /dev/null
+++ b/apps/portal/src/components/resumes/comments/comment/ResumeCommentDeleteForm.tsx
@@ -0,0 +1,43 @@
+import { Button, Dialog } from '@tih/ui';
+type ResumeCommentDeleteFormProps = Readonly<{
+ isDeletingComment: boolean;
+ setIsDeletingComment: (value: boolean) => void;
+}>;
+
+export default function ResumeCommentDeleteForm({
+ isDeletingComment,
+ setIsDeletingComment,
+}: ResumeCommentDeleteFormProps) {
+ const onDelete = () => {
+ setIsDeletingComment(false);
+ };
+
+ const onCancel = () => {
+ setIsDeletingComment(false);
+ };
+
+ return (
+
+ }
+ secondaryButton={
+
+ }
+ title="Are you sure?"
+ onClose={() => setIsDeletingComment(false)}>
+ Note that this is irreversible!
+
+ );
+}