Upload 5.16

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

@@ -1,6 +1,6 @@
 import { useState } from 'react'
-import blogService from '../services/blogs'
-import Togglable from './Togglable'
+import blogService from '../services/blogs.js'
+import Togglable from './Togglable.js'
 
 const Blog = ({ blog, setNotification, removeBlog }) => {
   const blogStyle = {
@@ -26,13 +26,26 @@ const Blog = ({ blog, setNotification, removeBlog }) => {
       })
   }
 
+  const findUser = async (blogId) => {
+    const blogs = await blogService.getAll()
+    const blogToFind = blogs.filter((blog) => blog.user).find((blog) => blog.id === blogId)
+
+    blog.user = blogToFind?.user
+  }
+
+  if (!blog.user) {
+    findUser(blog.id)
+  }
+
   return (
-    <div style={blogStyle}>
+    <div style={blogStyle} className="blog">
       <div>
-        <em>{blog.title}</em>
-        <Togglable buttonLabel="View">
+        <em>
+          {blog.title} by {blog.author}
+        </em>
+        <Togglable buttonLabel="View" className="blogButton">
           <ul>
-            <li> Author: {blog.author}</li>
+            <li>User: {blog.user?.name || 'Unknown' }</li>
             <li> URL: {blog.url}</li>
             <li>
               {likes} likes&nbsp;