Upload 5.11

part5/bloglist-frontend/src/App.js

@@ -72,7 +72,7 @@ const App = () => {
     }
   };
   const newBlogRef = useRef();
-  const handleNewBlog = async (newBlog) => {
+  const handleNewBlog = (newBlog) => {
     newBlogRef.current.toggleVisibility();
     blogService
       .create(newBlog)
@@ -89,6 +89,23 @@ const App = () => {
       });
   };
 
+  const handleRemoveBlog = (blog) => {
+    if (window.confirm(`Remove blog ${blog.title} by ${blog.author}?`)) {
+      blogService
+        .remove(blog.id)
+        .then(() => {
+          setBlogs(blogs.filter((b) => b.id !== blog.id));
+          setNotification(
+            `Blog ${blog.title} by ${blog.author} removed`,
+            "success"
+          );
+        })
+        .catch((error) => {
+          setNotification("Failed to remove blog: " + error, "error");
+        });
+    }
+  };
+
   const loginForm = () => (
     <form onSubmit={handleLogin}>
       <div>
@@ -123,7 +140,12 @@ const App = () => {
         </Togglable>
         <h2> All blogs</h2>
         {blogs.map((blog) => (
-          <Blog key={blog.id} blog={blog} />
+          <Blog
+            key={blog.id}
+            blog={blog}
+            setNotification={setNotification}
+            removeBlog={handleRemoveBlog}
+          />
         ))}
       </div>
     );