From 1e7c085d70e62aad8325f6f34573a8913d971f05 Mon Sep 17 00:00:00 2001
From: Jason Zhu <jasonzhuyq@outlook.com>
Date: Mon, 6 Mar 2023 23:57:28 +1100
Subject: [PATCH] 02_lesson: created AddPostForm component

---
 02_lesson_starter/src/App.js                  |  2 +
 .../src/features/posts/AddPostForm.js         | 55 +++++++++++++++++++
 .../src/features/posts/postsSlice.js          |  8 ++-
 3 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 02_lesson_starter/src/features/posts/AddPostForm.js

diff --git a/02_lesson_starter/src/App.js b/02_lesson_starter/src/App.js
index 06a69ae..e3a7b79 100644
--- a/02_lesson_starter/src/App.js
+++ b/02_lesson_starter/src/App.js
@@ -1,8 +1,10 @@
 import PostsList from "./features/posts/PostsList";
+import AddPostForm from "./features/posts/AddPostForm";
 
 function App() {
   return (
     <main className="App">
+      <AddPostForm />
       <PostsList />
     </main>
   );
diff --git a/02_lesson_starter/src/features/posts/AddPostForm.js b/02_lesson_starter/src/features/posts/AddPostForm.js
new file mode 100644
index 0000000..30174e1
--- /dev/null
+++ b/02_lesson_starter/src/features/posts/AddPostForm.js
@@ -0,0 +1,55 @@
+import { useState } from "react";
+import { nanoid } from "@reduxjs/toolkit";
+import { postAdded } from "./postsSlice";
+import { useDispatch } from "react-redux";
+
+const AddPostForm = () => {
+  const [title, setTitle] = useState(""); // Temporary state for adding information in form
+  const [content, setContent] = useState("");
+  const dispatch = useDispatch();
+
+  const onTitleChanged = (e) => setTitle(e.target.value);
+  const onContentChanged = (e) => setContent(e.target.value);
+
+  const onSavePostClicked = () => {
+    if (title && content) {
+      dispatch(
+        postAdded({
+          id: nanoid(),
+          title,
+          content,
+        })
+      );
+      setTitle("");
+      setContent("");
+    }
+  };
+
+  return (
+    <section>
+      <h2>Add a New Post</h2>
+      <form>
+        <label htmlFor="postTitle">Post Title:</label>
+        <input
+          type="text"
+          id="postTitle"
+          name="postTitle"
+          value={title}
+          onChange={onTitleChanged}
+        />
+        <label htmlFor="postContent">Content:</label>
+        <textarea
+          id="postContent"
+          name="postContent"
+          value={content}
+          onChange={onContentChanged}
+        />
+        <button type="button" onClick={onSavePostClicked}>
+          Save Post
+        </button>
+      </form>
+    </section>
+  );
+};
+
+export default AddPostForm;
diff --git a/02_lesson_starter/src/features/posts/postsSlice.js b/02_lesson_starter/src/features/posts/postsSlice.js
index e0efeb5..6869183 100644
--- a/02_lesson_starter/src/features/posts/postsSlice.js
+++ b/02_lesson_starter/src/features/posts/postsSlice.js
@@ -16,9 +16,15 @@ const initialState = [
 const postsSlice = createSlice({
   name: "posts",
   initialState,
-  reducers: {},
+  reducers: {
+    postAdded(state, action) {
+      state.push(action.payload); // immer.js add new payload without mutation
+    },
+  },
 });
 
 export const selectAllPosts = (state) => state.posts;
 
+export const { postAdded } = postsSlice.actions;
+
 export default postsSlice.reducer;