From 811e6fc76185271f0b0f34f60ef4070205ab11ad Mon Sep 17 00:00:00 2001
From: Terence Ho <>
Date: Tue, 8 Nov 2022 12:55:44 +0800
Subject: [PATCH] [resumes][feat] add delete form

---
 .../comments/ResumeCommentListItem.tsx        | 27 +++++++++++-
 .../comment/ResumeCommentDeleteForm.tsx       | 43 +++++++++++++++++++
 2 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 apps/portal/src/components/resumes/comments/comment/ResumeCommentDeleteForm.tsx

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({
             </div>
           )}
 
-          {/* Upvote and edit */}
+          {/* Upvote and actions (edit, reply, delete) */}
           <div className="mt-1 flex h-6 items-center">
             <ResumeCommentVoteButtons commentId={comment.id} userId={userId} />
             {/* 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
               </button>
@@ -111,10 +114,32 @@ export default function ResumeCommentListItem({
                 onClick={() => {
                   setIsEditingComment(!isEditingComment);
                   setIsReplyingComment(false);
+                  setIsDeletingComment(false);
                 }}>
                 Edit
               </button>
             )}
+
+            {isCommentOwner && !isDeletingComment && (
+              <button
+                className="-my-1 rounded-md px-2 py-1 text-xs font-medium text-slate-500 hover:bg-slate-100 hover:text-red-600"
+                type="button"
+                onClick={() => {
+                  setIsDeletingComment(!isDeletingComment);
+                  setIsEditingComment(false);
+                  setIsReplyingComment(false);
+                }}>
+                Delete
+              </button>
+            )}
+
+            {/* Delete comment form */}
+            {isDeletingComment && (
+              <ResumeCommentDeleteForm
+                isDeletingComment={isDeletingComment}
+                setIsDeletingComment={setIsDeletingComment}
+              />
+            )}
           </div>
 
           {/* 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 (
+    <Dialog
+      isShown={isDeletingComment}
+      primaryButton={
+        <Button
+          display="block"
+          label="Delete"
+          variant="danger"
+          onClick={onDelete}
+        />
+      }
+      secondaryButton={
+        <Button
+          display="block"
+          label="Cancel"
+          variant="tertiary"
+          onClick={onCancel}
+        />
+      }
+      title="Are you sure?"
+      onClose={() => setIsDeletingComment(false)}>
+      <div>Note that this is irreversible!</div>
+    </Dialog>
+  );
+}