Upload 5.3 and 5.4

part5/bloglist-frontend/src/App.js

@@ -9,10 +9,36 @@ const App = () => {
   const [user, setUser] = useState(null);
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
+  const [title, setTitle] = useState("");
+  const [author, setAuthor] = useState("");
+  const [urlAddress, setUrlAddress] = useState("");
   const [errorMessage, setErrorMessage] = useState(null);
   const [successMessage, setSuccessMessage] = useState(null);
 
+  const resetInputFields = () => {
+    setUsername("");
+    setPassword("");
+    setTitle("");
+    setAuthor("");
+    setUrlAddress("");
+  };
+
+  const setNotification = (message, type) => {
+    if (type === "success") {
+      setSuccessMessage(message);
+      setTimeout(() => {
+        setSuccessMessage(null);
+      }, 5000);
+    } else if (type === "error") {
+      setErrorMessage(message);
+      setTimeout(() => {
+        setErrorMessage(null);
+      }, 5000);
+    }
+  };
+
   useEffect(() => {
+    blogService.getAll().then((blogs) => setBlogs(blogs));
     const loggedInUserLocal = window.localStorage.getItem("loggedInUser");
 
     if (loggedInUserLocal) {
@@ -26,48 +52,57 @@ const App = () => {
     event.preventDefault();
     try {
       const user = await loginService.login({ username, password });
+      blogService.setToken(user.token);
       window.localStorage.setItem("loggedInUser", JSON.stringify(user));
       setUser(user);
-      setUsername("");
-      setPassword("");
-      setSuccessMessage("Login successful");
-      setTimeout(() => {
-        setSuccessMessage(null);
-      }, 5000);
+      resetInputFields();
+      setNotification("Login successful", "success");
     } catch (exception) {
-      setErrorMessage("Wrong credentials");
-      setTimeout(() => {
-        setErrorMessage(null);
-      }, 5000);
+      setNotification("Wrong credentials", "error");
     }
   };
 
   const handleLogout = async (event) => {
-    event.preventDefault()
+    event.preventDefault();
 
     try {
-      setSuccessMessage('Logout successful')
-      setTimeout(() => {
-        setSuccessMessage(null);
-      }, 5000);
-      window.localStorage.clear()
-      blogService.setToken(null)
-      setUser(null)
-      setUsername('')
-      setPassword('')
+      setNotification("Logout successful", "success");
+      window.localStorage.clear();
+      blogService.setToken(null);
+      setUser(null);
+      resetInputFields();
     } catch (exception) {
-      setErrorMessage('Logout failed. Please try again later.')
-      setTimeout(() => {
-        setErrorMessage(null);
-      }, 5000);
+      setNotification("Logout failed", "error");
     }
+  };
 
-  }
+  const handleNewBlog = async (event) => {
+    event.preventDefault();
+    const newBlog = {
+      title: title,
+      author: author,
+      url: urlAddress,
+    };
+
+    blogService
+      .create(newBlog)
+      .then((returnedBlog) => {
+        setBlogs(blogs.concat(returnedBlog));
+        resetInputFields();
+        setNotification(
+          `A new blog ${title} by ${author} at ${urlAddress} added`,
+          "success"
+        );
+      })
+      .catch((error) => {
+        setNotification("Failed to add new blog: " + error, "error");
+      });
+  };
 
   const loginForm = () => (
     <form onSubmit={handleLogin}>
       <div>
-        username
+        Username
         <input
           type="text"
           value={username}
@@ -76,7 +111,7 @@ const App = () => {
         />
       </div>
       <div>
-        password
+        Password
         <input
           type="password"
           value={password}
@@ -84,16 +119,54 @@ const App = () => {
           onChange={({ target }) => setPassword(target.value)}
         />
       </div>
-      <button type="submit">login</button>
+      <button type="submit">Login</button>
     </form>
   );
 
   const blogForm = () => (
     <div>
+      <h2> Create new blog</h2>
+      <form onSubmit={handleNewBlog}>
+        <div>
+          Title:
+          <input
+            type="text"
+            value={title}
+            name="Title"
+            onChange={({ target }) => setTitle(target.value)}
+          />
+        </div>
+        <div>
+          Author:
+          <input
+            type="text"
+            value={author}
+            name="Author"
+            onChange={({ target }) => setAuthor(target.value)}
+          />
+        </div>
+        <div>
+          URL:
+          <input
+            type="text"
+            value={urlAddress}
+            name="Url"
+            onChange={({ target }) => setUrlAddress(target.value)}
+          />
+        </div>
+        <button type="submit">Create</button>
+      </form>
       <h2> All blogs</h2>
-      {blogs.map((blog) => (
-        <Blog key={blog.id} blog={blog} />
-      ))}
+      <table>
+        <tr>
+          <th>Title</th>
+          <th>Author</th>
+          <th>URL</th>
+        </tr>
+        {blogs.map((blog) => (
+          <Blog key={blog.id} blog={blog} />
+        ))}
+      </table>
     </div>
   );
 

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

@@ -1,7 +1,9 @@
-const Blog = ({blog}) => (
-  <div>
-    {blog.title} {blog.author}
-  </div>  
-)
+const Blog = ({ blog }) => (
+  <tr>
+    <td>{blog.title}</td>
+    <td>{blog.author}</td>
+    <td>{blog.url}</td>
+  </tr>
+);
 
-export default Blog
+export default Blog;

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

@@ -4,7 +4,7 @@ const baseUrl = "/api/blogs";
 let token = null;
 
 const setToken = (newToken) => {
-  token = `bearer ${newToken}`;
+  token = `Bearer ${newToken}`;
 };
 
 const getAll = async () => {

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

@@ -3,7 +3,6 @@ const baseUrl = "/api/login";
 
 const login = async (credentials) => {
   const response = await axios.post(baseUrl, credentials);
-  console.log(response.data);
   return response.data;
 };