Upload 5.23

part5/bloglist-frontend/src/App.js

@@ -107,13 +107,13 @@ const App = () => {
   }
 
   const loginForm = () => (
-    <form onSubmit={handleLogin}>
+    <form onSubmit={handleLogin} className="loginForm">
       <div>
         Username
         <input
           type="text"
           value={username}
-          name="username"
+          className="username"
           onChange={({ target }) => setUsername(target.value)}
         />
       </div>
@@ -122,11 +122,11 @@ const App = () => {
         <input
           type="password"
           value={password}
-          name="password"
+          className="password"
           onChange={({ target }) => setPassword(target.value)}
         />
       </div>
-      <button type="submit">Login</button>
+      <button type="submit" className='loginButton'>Login</button>
     </form>
   )
 
@@ -134,19 +134,21 @@ const App = () => {
     return (
       <div>
         <p> {user.name} logged in </p>
-        <button onClick={handleLogout}>Logout</button>
+        <button onClick={handleLogout} className='logoutButton'>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}
-            setNotification={setNotification}
-            removeBlog={handleRemoveBlog}
-          />
-        ))}
+        {blogs
+          .sort((a, b) => b.likes - a.likes)
+          .map((blog) => (
+            <Blog
+              key={blog.id}
+              blog={blog}
+              setNotification={setNotification}
+              removeBlog={handleRemoveBlog}
+            />
+          ))}
       </div>
     )
   }

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

@@ -70,10 +70,10 @@ describe('test for blogs', () => {
 
     const user = userEvent.setup()
 
-    const title = component.container.getElementsByName('title')
-    const author = component.container.getElementsByName('author')
-    const url = component.container.getElementsByName('urlAddress')
-    const form = component.container.getElementsByName('form')
+    const title = component.container.querySelector('.title')
+    const author = component.container.querySelector('.author')
+    const url = component.container.querySelector('.urlAddress')
+    const form = component.container.querySelector('.form')
 
     await user.type(title, 'How to be a good programmer')
     await user.type(author, 'Andrew Trieu')

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

@@ -24,13 +24,13 @@ export const BlogForm = ({ createBlog }) => {
   return (
     <div>
       <h2> Create new blog</h2>
-      <form onSubmit={addBlog} name='form'>
+      <form onSubmit={addBlog} className='form'>
         <div>
           Title:
           <input
             type="text"
             value={title}
-            name="title"
+            className="title"
             onChange={(event) => setTitle(event.target.value)}
           />
         </div>
@@ -39,7 +39,7 @@ export const BlogForm = ({ createBlog }) => {
           <input
             type="text"
             value={author}
-            name="author"
+            className="author"
             onChange={(event) => setAuthor(event.target.value)}
           />
         </div>
@@ -48,11 +48,11 @@ export const BlogForm = ({ createBlog }) => {
           <input
             type="text"
             value={urlAddress}
-            name="urlAddress"
+            className="urlAddress"
             onChange={(event) => setUrlAddress(event.target.value)}
           />
         </div>
-        <button type="submit">Create</button>
+        <button type="submit" className='createButton'>Create</button>
       </form>
     </div>
   )