From 00fcac11456c01ae916b158a51057dfaf13a9f84 Mon Sep 17 00:00:00 2001
From: Jason Zhu <jasonzhuyq@outlook.com>
Date: Tue, 7 Mar 2023 13:33:09 +1100
Subject: [PATCH] 02_lesson: Add author formally into postList

---
 02_lesson_starter/src/features/posts/PostAuthor.js | 10 ++++++++++
 02_lesson_starter/src/features/posts/PostsList.js  |  5 ++++-
 2 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 02_lesson_starter/src/features/posts/PostAuthor.js

diff --git a/02_lesson_starter/src/features/posts/PostAuthor.js b/02_lesson_starter/src/features/posts/PostAuthor.js
new file mode 100644
index 0000000..4d188e7
--- /dev/null
+++ b/02_lesson_starter/src/features/posts/PostAuthor.js
@@ -0,0 +1,10 @@
+import { useSelector } from "react-redux";
+import { selectAllUsers } from "../users/usersSlice";
+
+const PostAuthor = ({ userId }) => {
+  const users = useSelector(selectAllUsers);
+  const author = users.find((user) => user.id === userId);
+  return <span>by {author ? author.name : "Unknown author"}</span>;
+};
+
+export default PostAuthor;
diff --git a/02_lesson_starter/src/features/posts/PostsList.js b/02_lesson_starter/src/features/posts/PostsList.js
index 36dd6be..67964d9 100644
--- a/02_lesson_starter/src/features/posts/PostsList.js
+++ b/02_lesson_starter/src/features/posts/PostsList.js
@@ -1,5 +1,6 @@
 import { useSelector } from "react-redux";
 import { selectAllPosts } from "./postsSlice";
+import PostAuthor from "./PostAuthor";
 
 const PostsList = () => {
   const posts = useSelector(selectAllPosts);
@@ -7,8 +8,10 @@ const PostsList = () => {
   const renderedPosts = posts.map((post) => (
     <article key={post.id}>
       <h3>{post.title}</h3>
-      <h4>{post.userId}</h4>
       <p>{post.content.substring(0, 100)}</p>
+      <p className="postCredit">
+        <PostAuthor userId={post.userId} />
+      </p>
     </article>
   ));