Upload 5.12

part5/bloglist-frontend/src/App.js

@@ -1,110 +1,110 @@
-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";
+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 [errorMessage, setErrorMessage] = useState(null);
-  const [successMessage, setSuccessMessage] = useState(null);
+  const [blogs, setBlogs] = useState([])
+  const [user, setUser] = useState(null)
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const [errorMessage, setErrorMessage] = useState(null)
+  const [successMessage, setSuccessMessage] = useState(null)
 
   const resetInputFields = () => {
-    setUsername("");
-    setPassword("");
-  };
+    setUsername('')
+    setPassword('')
+  }
 
   const setNotification = (message, type) => {
-    if (type === "success") {
-      setSuccessMessage(message);
+    if (type === 'success') {
+      setSuccessMessage(message)
       setTimeout(() => {
-        setSuccessMessage(null);
-      }, 5000);
-    } else if (type === "error") {
-      setErrorMessage(message);
+        setSuccessMessage(null)
+      }, 5000)
+    } else if (type === 'error') {
+      setErrorMessage(message)
       setTimeout(() => {
-        setErrorMessage(null);
-      }, 5000);
+        setErrorMessage(null)
+      }, 5000)
     }
-  };
+  }
 
   useEffect(() => {
-    blogService.getAll().then((blogs) => setBlogs(blogs));
-    const loggedInUserLocal = window.localStorage.getItem("loggedInUser");
+    blogService.getAll().then((blogs) => setBlogs(blogs))
+    const loggedInUserLocal = window.localStorage.getItem('loggedInUser')
 
     if (loggedInUserLocal) {
-      const user = JSON.parse(loggedInUserLocal);
-      setUser(user);
-      blogService.setToken(user.token);
+      const user = JSON.parse(loggedInUserLocal)
+      setUser(user)
+      blogService.setToken(user.token)
     }
-  }, []);
+  }, [])
 
   const handleLogin = async (event) => {
-    event.preventDefault();
+    event.preventDefault()
     try {
-      const user = await loginService.login({ username, password });
-      blogService.setToken(user.token);
-      window.localStorage.setItem("loggedInUser", JSON.stringify(user));
-      setUser(user);
-      resetInputFields();
-      setNotification("Login successful", "success");
+      const user = await loginService.login({ username, password })
+      blogService.setToken(user.token)
+      window.localStorage.setItem('loggedInUser', JSON.stringify(user))
+      setUser(user)
+      resetInputFields()
+      setNotification('Login successful', 'success')
     } catch (exception) {
-      setNotification("Wrong credentials", "error");
+      setNotification('Wrong credentials', 'error')
     }
-  };
+  }
 
   const handleLogout = async (event) => {
-    event.preventDefault();
+    event.preventDefault()
 
     try {
-      setNotification("Logout successful", "success");
-      window.localStorage.clear();
-      blogService.setToken(null);
-      setUser(null);
-      resetInputFields();
+      setNotification('Logout successful', 'success')
+      window.localStorage.clear()
+      blogService.setToken(null)
+      setUser(null)
+      resetInputFields()
     } catch (exception) {
-      setNotification("Logout failed", "error");
+      setNotification('Logout failed', 'error')
     }
-  };
-  const newBlogRef = useRef();
+  }
+  const newBlogRef = useRef()
   const handleNewBlog = (newBlog) => {
-    newBlogRef.current.toggleVisibility();
+    newBlogRef.current.toggleVisibility()
     blogService
       .create(newBlog)
       .then((returnedBlog) => {
-        setBlogs(blogs.concat(returnedBlog));
-        resetInputFields();
+        setBlogs(blogs.concat(returnedBlog))
+        resetInputFields()
         setNotification(
           `A new blog ${returnedBlog.title} by ${returnedBlog.author} at ${returnedBlog.url} added`,
-          "success"
-        );
+          'success'
+        )
       })
       .catch((error) => {
-        setNotification("Failed to add new blog: " + error, "error");
-      });
-  };
+        setNotification('Failed to add new blog: ' + error, 'error')
+      })
+  }
 
   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));
+          setBlogs(blogs.filter((b) => b.id !== blog.id))
           setNotification(
             `Blog ${blog.title} by ${blog.author} removed`,
-            "success"
-          );
+            'success'
+          )
         })
         .catch((error) => {
-          setNotification("Failed to remove blog: " + error, "error");
-        });
+          setNotification('Failed to remove blog: ' + error, 'error')
+        })
     }
-  };
+  }
 
   const loginForm = () => (
     <form onSubmit={handleLogin}>
@@ -128,7 +128,7 @@ const App = () => {
       </div>
       <button type="submit">Login</button>
     </form>
-  );
+  )
 
   const blogForm = () => {
     return (
@@ -148,8 +148,8 @@ const App = () => {
           />
         ))}
       </div>
-    );
-  };
+    )
+  }
 
   return (
     <div>
@@ -167,7 +167,7 @@ const App = () => {
         <div>{blogForm()}</div>
       )}
     </div>
-  );
-};
+  )
+}
 
-export default App;
+export default App

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

@@ -1,30 +1,30 @@
-import { useState } from "react";
-import blogService from "../services/blogs";
-import Togglable from "./Togglable";
+import { useState } from 'react'
+import blogService from '../services/blogs'
+import Togglable from './Togglable'
 
 const Blog = ({ blog, setNotification, removeBlog }) => {
   const blogStyle = {
     paddingTop: 10,
     paddingLeft: 2,
-    border: "solid",
+    border: 'solid',
     borderWidth: 1,
     marginBottom: 5,
-  };
+  }
 
-  const [likes, setLikes] = useState(blog.likes);
+  const [likes, setLikes] = useState(blog.likes)
 
   const handleLike = (blog) => {
-    blog.likes = blog.likes + 1;
+    blog.likes = blog.likes + 1
     blogService
       .update(blog.id, blog)
       .then((returnedBlog) => {
-        setLikes(returnedBlog.likes);
-        setNotification(`You liked ${blog.title}`, "success");
+        setLikes(returnedBlog.likes)
+        setNotification(`You liked ${blog.title}`, 'success')
       })
       .catch((error) => {
-        setNotification(`Like failed. Error: ${error}`, "error");
-      });
-  };
+        setNotification(`Like failed. Error: ${error}`, 'error')
+      })
+  }
 
   return (
     <div style={blogStyle}>
@@ -43,7 +43,7 @@ const Blog = ({ blog, setNotification, removeBlog }) => {
         </Togglable>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default Blog;
+export default Blog

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

@@ -1,25 +1,25 @@
-import { useState } from "react";
+import { useState } from 'react'
 
 export const BlogForm = ({ createBlog }) => {
-  const [title, setTitle] = useState("");
-  const [author, setAuthor] = useState("");
-  const [urlAddress, setUrlAddress] = useState("");
+  const [title, setTitle] = useState('')
+  const [author, setAuthor] = useState('')
+  const [urlAddress, setUrlAddress] = useState('')
 
   const resetInputFields = () => {
-    setTitle("");
-    setAuthor("");
-    setUrlAddress("");
-  };
+    setTitle('')
+    setAuthor('')
+    setUrlAddress('')
+  }
 
   const addBlog = async (event) => {
-    event.preventDefault();
+    event.preventDefault()
     createBlog({
       title: title,
       author: author,
       url: urlAddress,
-    });
-    resetInputFields();
-  };
+    })
+    resetInputFields()
+  }
 
   return (
     <div>
@@ -55,5 +55,5 @@ export const BlogForm = ({ createBlog }) => {
         <button type="submit">Create</button>
       </form>
     </div>
-  );
-};
+  )
+}

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

@@ -1,18 +1,18 @@
 const errorNotification = ({ message }) => {
   if (message === null) {
-    return null;
+    return null
   } else {
-    return <div style={{ color: "red" }}>{message}</div>;
+    return <div style={{ color: 'red' }}>{message}</div>
   }
-};
+}
 
 const successNotification = ({ message }) => {
   if (message === null) {
-    return null;
+    return null
   } else {
-    return <div style={{ color: "green" }}>{message}</div>;
+    return <div style={{ color: 'green' }}>{message}</div>
   }
-};
+}
 
 const Notification = ({ errorMessage, successMessage }) => {
   return (
@@ -20,7 +20,7 @@ const Notification = ({ errorMessage, successMessage }) => {
       {errorNotification({ message: errorMessage })}
       {successNotification({ message: successMessage })}
     </div>
-  );
-};
+  )
+}
 
-export default Notification;
+export default Notification

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

@@ -1,18 +1,19 @@
-import { useState, forwardRef, useImperativeHandle } from "react";
+import { useState, forwardRef, useImperativeHandle } from 'react'
+import PropTypes from 'prop-types'
 
 const Togglable = forwardRef((props, refs) => {
-  const [visible, setVisible] = useState(false);
+  const [visible, setVisible] = useState(false)
 
-  const hideWhenVisible = { display: visible ? "none" : "" };
-  const showWhenVisible = { display: visible ? "" : "none" };
+  const hideWhenVisible = { display: visible ? 'none' : '' }
+  const showWhenVisible = { display: visible ? '' : 'none' }
 
   const toggleVisibility = () => {
-    setVisible(!visible);
-  };
+    setVisible(!visible)
+  }
 
   useImperativeHandle(refs, () => {
-    return { toggleVisibility };
-  });
+    return { toggleVisibility }
+  })
 
   return (
     <div>
@@ -24,7 +25,13 @@ const Togglable = forwardRef((props, refs) => {
         <button onClick={toggleVisibility}>Cancel</button>
       </div>
     </div>
-  );
-});
+  )
+})
 
-export default Togglable;
+Togglable.propTypes = {
+  buttonLabel: PropTypes.string.isRequired,
+}
+
+Togglable.displayName = 'Togglable'
+
+export default Togglable

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

@@ -1,39 +1,39 @@
-import axios from "axios";
-const baseUrl = "/api/blogs";
+import axios from 'axios'
+const baseUrl = '/api/blogs'
 
-let token = null;
+let token = null
 
 const setToken = (newToken) => {
-  token = `Bearer ${newToken}`;
-};
+  token = `Bearer ${newToken}`
+}
 
 const getAll = async () => {
-  const request = axios.get(baseUrl);
-  const response = await request;
-  return response.data;
-};
+  const request = axios.get(baseUrl)
+  const response = await request
+  return response.data
+}
 
 const create = async (newObject) => {
   const config = {
     headers: { Authorization: token },
-  };
+  }
 
-  const response = await axios.post(baseUrl, newObject, config);
-  return response.data;
-};
+  const response = await axios.post(baseUrl, newObject, config)
+  return response.data
+}
 
 const update = async (id, newObject) => {
-  const response = await axios.put(`${baseUrl}/${id}`, newObject);
-  return response.data;
-};
+  const response = await axios.put(`${baseUrl}/${id}`, newObject)
+  return response.data
+}
 
 const remove = async (id) => {
   const config = {
     headers: { Authorization: token },
-  };
-  const response = await axios.delete(`${baseUrl}/${id}`, config);
-  return response.data;
-};
+  }
+  const response = await axios.delete(`${baseUrl}/${id}`, config)
+  return response.data
+}
 
 const blogService = {
   setToken,
@@ -41,6 +41,6 @@ const blogService = {
   create,
   update,
   remove,
-};
+}
 
-export default blogService;
+export default blogService

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

@@ -1,11 +1,11 @@
-import axios from "axios";
-const baseUrl = "/api/login";
+import axios from 'axios'
+const baseUrl = '/api/login'
 
 const login = async (credentials) => {
-  const response = await axios.post(baseUrl, credentials);
-  return response.data;
-};
+  const response = await axios.post(baseUrl, credentials)
+  return response.data
+}
 
-const loginService = { login };
+const loginService = { login }
 
-export default loginService;
+export default loginService