feat: show confimation modal before delete

Author: coderSuresh

components/CommentCardBtns.tsx

@@ -3,6 +3,7 @@ import { CommentProps } from '@/types/props'
 import { ReplyContext } from '@/context/ReplyContext'
 import { UserContext } from '@/context/UserContext'
 import { CommentContext } from '@/context/CommentContext'
+import Modal from './Modal'
 
 const CommentCardBtns = ({ _id, commentID, userId, author }: CommentProps) => {
 
@@ -13,6 +14,7 @@ const CommentCardBtns = ({ _id, commentID, userId, author }: CommentProps) => {
     const [isAuthor, setIsAuthor] = React.useState(false)
     const [loading, setLoading] = React.useState(true)
     const [deleting, setDeleting] = React.useState(false)
+    const [confirmation, setConfirmation] = React.useState(false)
 
     const checkIfUserIsAuthor = async () => {
         fetch('/api/verify-author', {
@@ -45,7 +47,12 @@ const CommentCardBtns = ({ _id, commentID, userId, author }: CommentProps) => {
         })
     }
 
+    const confirmDelete = () => {
+        setConfirmation(true)
+    }
+
     const deleteComment = async () => {
+        setConfirmation(false)
         setDeleting(true)
         const res = await fetch('/api/delete-comment', {
             method: 'DELETE',
@@ -76,6 +83,18 @@ const CommentCardBtns = ({ _id, commentID, userId, author }: CommentProps) => {
     return (
         <div className='sm:static absolute bottom-8 right-5'>
 
+            {
+                confirmation &&
+                <Modal
+                    title='Delete Comment'
+                    message='Are you sure you want to delete this comment? This will remove the comment and can&apos;t be undone.'
+                    positive='Yes, Delete'
+                    negative='No, Cancel'
+                    confirm={deleteComment}
+                    cancel={() => setConfirmation(false)}
+                />
+            }
+
             {loading
                 ?
                 <div className='h-4 w-12 rounded bg-light-gray animate-pulse'></div>
@@ -88,7 +107,7 @@ const CommentCardBtns = ({ _id, commentID, userId, author }: CommentProps) => {
                                 ?
                                 <p className='font-medium text-soft-red text-sm'>Deleting...</p>
                                 :
-                                <button onClick={() => deleteComment()} className='flex items-center gap-x-2 hover:opacity-50 text-sm font-medium text-soft-red'>
+                                <button onClick={() => confirmDelete()} className='flex items-center gap-x-2 hover:opacity-50 text-sm font-medium text-soft-red'>
                                     <i className='fas fa-trash text-xs' />
                                     <span>Delete</span>
                                 </button>

components/Modal.tsx

@@ -1,21 +1,21 @@
-import React from 'react'
+import { ModalProps } from "@/types/props"
 
-const Modal = () => {
+const Modal = ({ title, message, positive, negative, confirm, cancel }: ModalProps) => {
     return (
         <div className='fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 z-50 flex justify-center items-center'>
             <div className='bg-white sm:w-[350px] w-full mx-5 rounded-lg sm:p-6 p-4'>
                 <h2 className='font-medium text-xl'>
-                    Delete comment
+                    {title}
                 </h2>
                 <p className='text-grayish-blue text-sm my-5'>
-                    Are you sure you want to delete this comment? This will remove the comment and can&apos;t be undone.
+                    {message}
                 </p>
                 <div className='flex gap-3 text-white'>
-                    <button className='bg-grayish-blue text-sm rounded-md sm:px-4 p-2 sm:py-3 flex-grow uppercase font-medium hover:opacity-50'>
-                        No, Cancel
+                    <button onClick={cancel} className='bg-grayish-blue text-sm rounded-md sm:px-4 p-2 sm:py-3 flex-grow uppercase font-medium hover:opacity-50'>
+                        {negative}
                     </button>
-                    <button className='bg-soft-red text-white text-sm sm:px-4 p-2 sm:py-3 rounded-md flex-grow uppercase font-medium hover:opacity-50'>
-                        Yes, Delete
+                    <button onClick={confirm} className='bg-soft-red text-white text-sm sm:px-4 p-2 sm:py-3 rounded-md flex-grow uppercase font-medium hover:opacity-50'>
+                        {positive}
                     </button>
                 </div>
             </div>

types/props.ts

@@ -19,4 +19,13 @@ export type ReplyProps = {
     _id?: string,
     author?: string,
     addReplyToComment: (commentId: string, newReply: CommentProps) => void,
-};
+};
+
+export type ModalProps = {
+    title: string,
+    message: string,
+    positive?: string,
+    negative?: string,
+    confirm: () => void,
+    cancel: () => void,
+}