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>
     );

part5/bloglist-frontend/src/components/Blog.js

@@ -1,6 +1,8 @@
+import { useState } from "react";
+import blogService from "../services/blogs";
 import Togglable from "./Togglable";
 
-const Blog = ({ blog }) => {
+const Blog = ({ blog, setNotification, removeBlog }) => {
   const blogStyle = {
     paddingTop: 10,
     paddingLeft: 2,
@@ -8,15 +10,36 @@ const Blog = ({ blog }) => {
     borderWidth: 1,
     marginBottom: 5,
   };
+
+  const [likes, setLikes] = useState(blog.likes);
+
+  const handleLike = (blog) => {
+    blog.likes = blog.likes + 1;
+    blogService
+      .update(blog.id, blog)
+      .then((returnedBlog) => {
+        setLikes(returnedBlog.likes);
+        setNotification(`You liked ${blog.title}`, "success");
+      })
+      .catch((error) => {
+        setNotification(`Like failed. Error: ${error}`, "error");
+      });
+  };
+
   return (
     <div style={blogStyle}>
       <div>
-        {blog.title}
+        <em>{blog.title}</em>
-        <Togglable buttonLabel="view">
+        <Togglable buttonLabel="View">
           <ul>
-            <li> {blog.author}</li>
+            <li> Author: {blog.author}</li>
-            <li> {blog.url}</li>
+            <li> URL: {blog.url}</li>
+            <li>
+              {likes} likes&nbsp;
+              <button onClick={() => handleLike(blog)}>+</button>
+            </li>
           </ul>
+          <button onClick={() => removeBlog(blog)}>Remove</button>
         </Togglable>
       </div>
     </div>

part5/bloglist-frontend/src/components/Togglable.js

@@ -21,7 +21,7 @@ const Togglable = forwardRef((props, refs) => {
       </div>
       <div style={showWhenVisible}>
         {props.children}
-        <button onClick={toggleVisibility}>cancel</button>
+        <button onClick={toggleVisibility}>Cancel</button>
       </div>
     </div>
   );

part5/bloglist-frontend/src/services/blogs.js

@@ -23,8 +23,15 @@ const create = async (newObject) => {
 };
 
 const update = async (id, newObject) => {
-  const request = axios.put(`${baseUrl} /${id}`, newObject);
+  const response = await axios.put(`${baseUrl}/${id}`, newObject);
-  const response = await request;
+  return response.data;
+};
+
+const remove = async (id) => {
+  const config = {
+    headers: { Authorization: token },
+  };
+  const response = await axios.delete(`${baseUrl}/${id}`, config);
   return response.data;
 };
 
@@ -33,6 +40,7 @@ const blogService = {
   getAll,
   create,
   update,
+  remove,
 };
 
 export default blogService;