implement post editing

src/App.css

@@ -38,7 +38,12 @@ label {
   margin-left: 10px;
 }
 
-.PostCreateForm .btn {
+.PostCreate .btn, .PostUpdate .btn {
   margin-top: 5px;
   width: 100%;
 }
+
+.PostDetail .btn {
+  margin-top: 5px;
+  width: 170px;
+}

src/Routes.js

@@ -3,6 +3,7 @@ import App from "./App";
 import Navbar from "./components/Navbar";
 import PostCreate from "./components/PostCreate";
 import PostDetail from "./components/PostDetail";
+import PostUpdate from "./components/PostUpdate";
 import Login from "./components/Login";
 import Register from "./components/Register";
 import Profile from "./components/Profile";
@@ -20,6 +21,7 @@ const Routes = () => {
         <Route exact path={["/", "/home"]} component={App} />
         <Route exact path={posts} component={App} />
         <Route path={`${posts}/create`} component={PostCreate} />
+        <Route path={`${posts}/:postId/edit`} component={PostUpdate} />
         <Route path={`${posts}/:postId`} component={PostDetail} />
         <Route exact path={login} component={Login} />
         <Route exact path={register} component={Register} />

src/components/PostCreate.js

@@ -1,11 +1,15 @@
 import { useState, useEffect } from "react";
 
-import PostCreateForm from "./PostCreateForm";
+import PostForm from "./PostForm";
+import PostFormButtons from "./PostFormButtons";
 import AuthService from "../services/auth.service";
+import UserService from "../services/user.service";
 
 const PostCreate = () => {
   const [admin, setAdmin] = useState(false);
   const [currentUser, setCurrentUser] = useState(false);
+  const [title, setTitle] = useState("");
+  const [body, setBody] = useState("");
 
   useEffect(() => {
     const user = AuthService.getCurrentUser();
@@ -17,13 +21,57 @@ const PostCreate = () => {
     }
   }, []);
 
+  const handleChangeTitle = (value) => {
+    setTitle(value);
+  };
+
+  const handleChangeBody = (value) => {
+    setBody(value);
+  };
+
+  const handleClickCancel = (e) => {
+    window.location.href = `/posts/`;
+  };
+
+  const handleClickSave = () => {
+    const published = false;
+    createPostAndRedirect(published);
+  };
+
+  const handleClickSaveAndPublish = () => {
+    const published = true;
+    createPostAndRedirect(published);
+  };
+
+  const createPostAndRedirect = (published) => {
+    if (title && body) {
+      UserService.createPost(currentUser._id, title, body, published).then(
+        (response) => {
+          const postId = response.data._id;
+          window.location.href = `/posts/${postId}`;
+        }
+      );
+    } else {
+      alert("Title and Body are required.");
+    }
+  };
+
   return (
     <div className="PostCreate">
       <h1>New Post</h1>
       <hr />
       {admin ? (
         <div>
-          <PostCreateForm currentUser={currentUser} />
+          <PostForm
+            onChangeTitle={handleChangeTitle}
+            onChangeBody={handleChangeBody}
+          />
+          <br />
+          <PostFormButtons
+            onClickCancel={handleClickCancel}
+            onClickSave={handleClickSave}
+            onClickSaveAndPublish={handleClickSaveAndPublish}
+          />
         </div>
       ) : (
         <div>Only the Admin can create new posts at this time...</div>

src/components/PostDetail.js

@@ -59,7 +59,11 @@ const PostDetail = () => {
     setPublished(!published);
   };
 
-  const handleClick = () => {
+  const handleClickEdit = () => {
+    window.location.href = `/posts/${postId}/edit`;
+  };
+
+  const handleClickDelete = () => {
     UserService.deletePost(postId).then(() => {
       window.location.href = `/posts/`;
     });
@@ -80,7 +84,11 @@ const PostDetail = () => {
             <span>{published ? "Published" : "Unpublished"}</span>
           </label>
           <br />
-          <button className="btn btn-danger" onClick={handleClick}>
+          <button className="btn btn-warning" onClick={handleClickEdit}>
+            Edit Post
+          </button>
+          <br />
+          <button className="btn btn-danger" onClick={handleClickDelete}>
             Delete Post
           </button>
         </div>

src/components/PostForm.js

@@ -0,0 +1,43 @@
+const PostCreateForm = (props) => {
+  const handleChangeTitle = (e) => {
+    e.preventDefault();
+    props.onChangeTitle(e.target.value);
+  };
+
+  const handleChangeBody = (e) => {
+    e.preventDefault();
+    props.onChangeBody(e.target.value);
+  };
+
+  return (
+    <div className="PostCreateForm">
+      <form>
+        <div className="form-group">
+          <label htmlFor="titleInput">Title:</label>
+          <input
+            id="titleInput"
+            name="titleInput"
+            onChange={handleChangeTitle}
+            className="form-control"
+            placeholder="Title"
+            value={props.title}
+            required
+          />
+          <label htmlFor="bodyInput">Post Body:</label>
+          <textarea
+            id="commentBox"
+            name="commentBox"
+            onChange={handleChangeBody}
+            className="form-control"
+            type="textarea"
+            placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+            value={props.body}
+            required
+          ></textarea>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default PostCreateForm;

src/components/PostFormButtons.js

@@ -0,0 +1,34 @@
+const PostFormButtons = (props) => {
+  const handleClickCancel = (e) => {
+    e.preventDefault();
+    props.onClickCancel();
+  };
+
+  const handleClickSave = (e) => {
+    e.preventDefault();
+    props.onClickSave();
+  };
+
+  const handleClickSaveAndPublish = (e) => {
+    e.preventDefault();
+    props.onClickSaveAndPublish();
+  };
+
+  return (
+    <div className="PostFormButtons">
+      <button className="btn btn-danger" onClick={handleClickCancel}>
+        Cancel
+      </button>
+      <br />
+      <button className="btn btn-primary" onClick={handleClickSave}>
+        Save Post (Unpublished)
+      </button>
+      <br />
+      <button className="btn btn-primary" onClick={handleClickSaveAndPublish}>
+        Save and Publish Post
+      </button>
+    </div>
+  );
+};
+
+export default PostFormButtons;