feat: add delete modal to blog post list

src/screens/admin/components/blog-posts/component.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import Modal from 'react-modal';
 
 import EditBlogPost from '../edit-blog-post';
 import './style.scss';
@@ -29,6 +30,30 @@ const BlogPost = ({ post, onClickEdit, onDelete }) => {
   );
 };
 
+const DeleteModal = ({
+  handleDelete, isOpen, setIsOpen,
+}) => {
+  const handleClose = () => setIsOpen(false);
+  const handleOpen = () => setIsOpen(true);
+
+  return (
+    <Modal isOpen={isOpen}
+      onAfterOpen={handleOpen}
+      onRequestClose={handleClose}
+      className="delete-blog-post-modal"
+      ariaHideApp={false}
+    >
+      <div>
+        Are you sure you want to delete?
+        <div className="delete-blog-post-buttons">
+          <button type="button" className="blog-post-button animated-button" onClick={handleDelete}>Yes</button>
+          <button type="button" className="blog-post-button animated-button" onClick={handleClose}>No</button>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
 const BlogPosts = (props) => {
   const {
     blogPosts, getAllBlogPostsByAuthor, editBlogPost, deleteBlogPost,
@@ -38,12 +63,18 @@ const BlogPosts = (props) => {
     id: null, title: '', body: '', image: null,
   });
   const [showEditForm, setShowEditForm] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
 
   const openEditForm = (post) => {
     setShowEditForm(true);
     setSelectedBlogPost(post);
   };
 
+  const openDeleteModal = (post) => {
+    setShowDeleteModal(true);
+    setSelectedBlogPost(post);
+  };
+
   useEffect(() => {
     getAllBlogPostsByAuthor();
   }, [getAllBlogPostsByAuthor]);
@@ -61,14 +92,20 @@ const BlogPosts = (props) => {
     await editBlogPost(selectedBlogPost.id, formData, closeModal);
   };
 
+  const handleDeleteBlogPost = async () => {
+    const closeModal = () => setShowDeleteModal(false);
+    await deleteBlogPost(selectedBlogPost.id, closeModal);
+  };
+
   return (
     <div className="blog-posts-container">
       <div className="blog-posts-title">Your blog posts</div>
       {sortedBlogPosts.length > 0
       && sortedBlogPosts.map(
-        (post) => <BlogPost post={post} onClickEdit={() => openEditForm(post)} onDelete={deleteBlogPost} key={post.id} />,
+        (post) => <BlogPost post={post} onClickEdit={() => openEditForm(post)} onDelete={() => openDeleteModal(post)} key={post.id} />,
       )}
       <EditBlogPost isOpen={showEditForm} setIsOpen={setShowEditForm} post={selectedBlogPost} onSubmit={handleFormSubmit} />
+      <DeleteModal handleDelete={handleDeleteBlogPost} isOpen={showDeleteModal} setIsOpen={setShowDeleteModal} />
 
     </div>
   );

src/screens/admin/components/blog-posts/index.js

@@ -23,8 +23,8 @@ const mapDispatchToProps = (dispatch) => {
     editBlogPost: (id, fields, onSuccess) => {
       dispatch(editBlogPost(id, fields, onSuccess));
     },
-    deleteBlogPost: (id) => {
-      dispatch(deleteBlogPost(id));
+    deleteBlogPost: (id, onSuccess) => {
+      dispatch(deleteBlogPost(id, onSuccess));
     },
   };
 };

src/screens/admin/components/blog-posts/style.scss

@@ -46,3 +46,34 @@
     color: #2f303a;
     margin-bottom: 14px;
 }
+
+.delete-blog-post-modal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 20vw;
+    height: 10vh;
+    padding: 50px;
+    border-radius: 20px;
+    background-color: #ffffff;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+    overflow: scroll;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.delete-blog-post-buttons {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 0 50px;
+    margin-top: 20px;
+
+    .blog-post-button {
+        padding-left: 20px;
+        padding-right: 20px;
+    }
+}

src/state/actions/blog.js

@@ -67,12 +67,13 @@ export const editBlogPost = (id, fields, onSuccess) => {
   };
 };
 
-export const deleteBlogPost = (id) => {
+export const deleteBlogPost = (id, onSuccess) => {
   return async (dispatch) => {
     try {
       const response = await BlogService.deleteBlogPost(id);
       if (response.status === 200) {
         dispatch({ type: ActionTypes.DELETE_BLOG_POST, payload: { _id: id } });
+        onSuccess();
       }
     } catch (error) {
       dispatch({