Upload 5.5, 5.6, and 5.7

part5/bloglist-frontend/src/App.js

@@ -1,26 +1,22 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import Blog from "./components/Blog";
+import { BlogForm } from "./components/BlogForm";
 import Notification from "./components/Notification";
 import blogService from "./services/blogs";
 import loginService from "./services/login";
+import Togglable from "./components/Togglable";
 
 const App = () => {
   const [blogs, setBlogs] = useState([]);
   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) => {
@@ -75,22 +71,16 @@ const App = () => {
       setNotification("Logout failed", "error");
     }
   };
-
-  const handleNewBlog = async (event) => {
-    event.preventDefault();
-    const newBlog = {
-      title: title,
-      author: author,
-      url: urlAddress,
-    };
-
+  const newBlogRef = useRef();
+  const handleNewBlog = async (newBlog) => {
+    newBlogRef.current.toggleVisibility();
     blogService
       .create(newBlog)
       .then((returnedBlog) => {
         setBlogs(blogs.concat(returnedBlog));
         resetInputFields();
         setNotification(
-          `A new blog ${title} by ${author} at ${urlAddress} added`,
+          `A new blog ${returnedBlog.title} by ${returnedBlog.author} at ${returnedBlog.url} added`,
           "success"
         );
       })
@@ -123,52 +113,21 @@ const App = () => {
     </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>
-      <table>
-        <tr>
-          <th>Title</th>
-          <th>Author</th>
-          <th>URL</th>
-        </tr>
+  const blogForm = () => {
+    return (
+      <div>
+        <p> {user.name} logged in </p>
+        <button onClick={handleLogout}>Logout</button>
+        <Togglable buttonLabel="New blog" ref={newBlogRef}>
+          <BlogForm createBlog={handleNewBlog} />
+        </Togglable>
+        <h2> All blogs</h2>
         {blogs.map((blog) => (
           <Blog key={blog.id} blog={blog} />
         ))}
-      </table>
-    </div>
-  );
+      </div>
+    );
+  };
 
   return (
     <div>
@@ -183,11 +142,7 @@ const App = () => {
           {loginForm()}
         </div>
       ) : (
-        <div>
-          <p> {user.name} logged in </p>
-          <button onClick={handleLogout}>Logout</button>
-          {blogForm()}
-        </div>
+        <div>{blogForm()}</div>
       )}
     </div>
   );

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

@@ -1,9 +1,26 @@
-const Blog = ({ blog }) => (
-  <tr>
-    <td>{blog.title}</td>
-    <td>{blog.author}</td>
-    <td>{blog.url}</td>
-  </tr>
-);
+import Togglable from "./Togglable";
+
+const Blog = ({ blog }) => {
+  const blogStyle = {
+    paddingTop: 10,
+    paddingLeft: 2,
+    border: "solid",
+    borderWidth: 1,
+    marginBottom: 5,
+  };
+  return (
+    <div style={blogStyle}>
+      <div>
+        {blog.title}
+        <Togglable buttonLabel="view">
+          <ul>
+            <li> {blog.author}</li>
+            <li> {blog.url}</li>
+          </ul>
+        </Togglable>
+      </div>
+    </div>
+  );
+};
 
 export default Blog;

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

@@ -0,0 +1,59 @@
+import { useState } from "react";
+
+export const BlogForm = ({ createBlog }) => {
+  const [title, setTitle] = useState("");
+  const [author, setAuthor] = useState("");
+  const [urlAddress, setUrlAddress] = useState("");
+
+  const resetInputFields = () => {
+    setTitle("");
+    setAuthor("");
+    setUrlAddress("");
+  };
+
+  const addBlog = async (event) => {
+    event.preventDefault();
+    createBlog({
+      title: title,
+      author: author,
+      url: urlAddress,
+    });
+    resetInputFields();
+  };
+
+  return (
+    <div>
+      <h2> Create new blog</h2>
+      <form onSubmit={addBlog}>
+        <div>
+          Title:
+          <input
+            type="text"
+            value={title}
+            name="title"
+            onChange={(event) => setTitle(event.target.value)}
+          />
+        </div>
+        <div>
+          Author:
+          <input
+            type="text"
+            value={author}
+            name="author"
+            onChange={(event) => setAuthor(event.target.value)}
+          />
+        </div>
+        <div>
+          URL:
+          <input
+            type="text"
+            value={urlAddress}
+            name="urlAddress"
+            onChange={(event) => setUrlAddress(event.target.value)}
+          />
+        </div>
+        <button type="submit">Create</button>
+      </form>
+    </div>
+  );
+};

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

@@ -0,0 +1,30 @@
+import { useState, forwardRef, useImperativeHandle } from "react";
+
+const Togglable = forwardRef((props, refs) => {
+  const [visible, setVisible] = useState(false);
+
+  const hideWhenVisible = { display: visible ? "none" : "" };
+  const showWhenVisible = { display: visible ? "" : "none" };
+
+  const toggleVisibility = () => {
+    setVisible(!visible);
+  };
+
+  useImperativeHandle(refs, () => {
+    return { toggleVisibility };
+  });
+
+  return (
+    <div>
+      <div style={hideWhenVisible}>
+        <button onClick={toggleVisibility}>{props.buttonLabel}</button>
+      </div>
+      <div style={showWhenVisible}>
+        {props.children}
+        <button onClick={toggleVisibility}>cancel</button>
+      </div>
+    </div>
+  );
+});
+
+export default Togglable;