[resumes][feat] add delete comment

apps/portal/prisma/migrations/20221108061935_add_comment_deletion/migration.sql

@@ -0,0 +1,5 @@
+-- DropForeignKey
+ALTER TABLE "ResumesComment" DROP CONSTRAINT "ResumesComment_parentId_fkey";
+
+-- AddForeignKey
+ALTER TABLE "ResumesComment" ADD CONSTRAINT "ResumesComment_parentId_fkey" FOREIGN KEY ("parentId") REFERENCES "ResumesComment"("id") ON DELETE CASCADE ON UPDATE CASCADE;

apps/portal/prisma/schema.prisma

@@ -187,7 +187,7 @@ model ResumesComment {
   resume      ResumesResume        @relation(fields: [resumeId], references: [id], onDelete: Cascade)
   votes       ResumesCommentVote[]
   user        User                 @relation(fields: [userId], references: [id], onDelete: Cascade)
-  parent      ResumesComment?      @relation("parentComment", fields: [parentId], references: [id])
+  parent      ResumesComment?      @relation("parentComment", fields: [parentId], references: [id], onDelete: Cascade)
   children    ResumesComment[]     @relation("parentComment")
 }
 

apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx

@@ -120,7 +120,7 @@ export default function ResumeCommentListItem({
               </button>
             )}
 
-            {isCommentOwner && !isDeletingComment && (
+            {isCommentOwner && (
               <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"
@@ -136,6 +136,7 @@ export default function ResumeCommentListItem({
             {/* Delete comment form */}
             {isDeletingComment && (
               <ResumeCommentDeleteForm
+                id={comment.id}
                 isDeletingComment={isDeletingComment}
                 setIsDeletingComment={setIsDeletingComment}
               />

apps/portal/src/components/resumes/comments/comment/ResumeCommentDeleteForm.tsx

@@ -1,15 +1,49 @@
 import { Button, Dialog } from '@tih/ui';
+
+import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics';
+
+import { trpc } from '~/utils/trpc';
 type ResumeCommentDeleteFormProps = Readonly<{
+  id: string;
   isDeletingComment: boolean;
   setIsDeletingComment: (value: boolean) => void;
 }>;
 
 export default function ResumeCommentDeleteForm({
+  id,
   isDeletingComment,
   setIsDeletingComment,
 }: ResumeCommentDeleteFormProps) {
-  const onDelete = () => {
-    setIsDeletingComment(false);
+  const { event: gaEvent } = useGoogleAnalytics();
+
+  const trpcContext = trpc.useContext();
+  const commentDeleteMutation = trpc.useMutation(
+    'resumes.comments.user.delete',
+    {
+      onSuccess: () => {
+        // Comments updated, invalidate query to trigger refetch
+        trpcContext.invalidateQueries(['resumes.comments.list']);
+      },
+    },
+  );
+
+  const onDelete = async () => {
+    return commentDeleteMutation.mutate(
+      {
+        id,
+      },
+      {
+        onSuccess: () => {
+          setIsDeletingComment(false);
+
+          gaEvent({
+            action: 'resumes.comment_delete',
+            category: 'engagement',
+            label: 'Delete comment',
+          });
+        },
+      },
+    );
   };
 
   const onCancel = () => {
@@ -21,7 +55,9 @@ export default function ResumeCommentDeleteForm({
       isShown={isDeletingComment}
       primaryButton={
         <Button
+          disabled={commentDeleteMutation.isLoading}
           display="block"
+          isLoading={commentDeleteMutation.isLoading}
           label="Delete"
           variant="danger"
           onClick={onDelete}
@@ -29,6 +65,7 @@ export default function ResumeCommentDeleteForm({
       }
       secondaryButton={
         <Button
+          disabled={commentDeleteMutation.isLoading}
           display="block"
           label="Cancel"
           variant="tertiary"
@@ -37,7 +74,10 @@ export default function ResumeCommentDeleteForm({
       }
       title="Are you sure?"
       onClose={() => setIsDeletingComment(false)}>
-      <div>Note that this is irreversible!</div>
+      <div>
+        Note that deleting this comment will delete all its replies as well.
+        This action is also irreversible! Please check before confirming!
+      </div>
     </Dialog>
   );
 }

apps/portal/src/server/router/resumes/resumes-comments-user-router.ts

@@ -99,4 +99,16 @@ export const resumesCommentsUserRouter = createProtectedRouter()
         },
       });
     },
+  })
+  .mutation('delete', {
+    input: z.object({ id: z.string() }),
+    async resolve({ ctx, input }) {
+      const { id } = input;
+
+      return await ctx.prisma.resumesComment.delete({
+        where: {
+          id,
+        },
+      });
+    },
   });