implement post creation

src/App.css

@@ -30,10 +30,15 @@ label {
   border-radius: 50%;
 }
 
-.PostList, .PostDetail {
+.PostList, .PostDetail, .PostCreate {
   margin: 0 20px;
 }
 
 .navbar-brand {
   margin-left: 10px;
 }
+
+.PostCreateForm .btn {
+  margin-top: 5px;
+  width: 100%;
+}

src/Routes.js

@@ -1,6 +1,7 @@
 import { BrowserRouter, Switch, Route } from "react-router-dom";
 import App from "./App";
 import Navbar from "./components/Navbar";
+import PostCreate from "./components/PostCreate";
 import PostDetail from "./components/PostDetail";
 import Login from "./components/Login";
 import Register from "./components/Register";
@@ -18,6 +19,7 @@ const Routes = () => {
       <Switch>
         <Route exact path={["/", "/home"]} component={App} />
         <Route exact path={posts} component={App} />
+        <Route path={`${posts}/create`} component={PostCreate} />
         <Route path={`${posts}/:postId`} component={PostDetail} />
         <Route exact path={login} component={Login} />
         <Route exact path={register} component={Register} />

src/components/PostCreate.js

@@ -0,0 +1,35 @@
+import { useState, useEffect } from "react";
+
+import PostCreateForm from "./PostCreateForm";
+import AuthService from "../services/auth.service";
+
+const PostCreate = () => {
+  const [admin, setAdmin] = useState(false);
+  const [currentUser, setCurrentUser] = useState(false);
+
+  useEffect(() => {
+    const user = AuthService.getCurrentUser();
+    if (user) {
+      const roles = [];
+      user.roles.map((role) => roles.push(role.name));
+      setAdmin(roles.includes("ROLE_ADMIN"));
+      setCurrentUser(user);
+    }
+  }, []);
+
+  return (
+    <div className="PostCreate">
+      <h1>New Post</h1>
+      <hr />
+      {admin ? (
+        <div>
+          <PostCreateForm currentUser={currentUser} />
+        </div>
+      ) : (
+        <div>Only the Admin can create new posts at this time...</div>
+      )}
+    </div>
+  );
+};
+
+export default PostCreate;

src/components/PostCreateForm.js

@@ -0,0 +1,99 @@
+import { useState } from "react";
+
+import UserService from "../services/user.service";
+
+const PostCreateForm = (props) => {
+  const user = props.currentUser;
+  const [title, setTitle] = useState("");
+  const [body, setBody] = useState("");
+
+  const handleTitleChangeText = (e) => {
+    const title = e.target.value;
+    setTitle(title);
+  };
+
+  const handleBodyChangeText = (e) => {
+    const body = e.target.value;
+    setBody(body);
+  };
+
+  const handleCancelClick = (e) => {
+    e.preventDefault();
+
+    window.location.href = `/posts/`;
+  };
+
+  const handleSaveClick = (e) => {
+    e.preventDefault();
+    const published = false;
+    createPostAndRedirect(published);
+  };
+
+  const handleSaveAndPublishClick = (e) => {
+    e.preventDefault();
+    const published = true;
+    createPostAndRedirect(published);
+  };
+
+  const createPostAndRedirect = (published) => {
+    if (title && body) {
+      UserService.createPost(user._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="PostCreateForm">
+      <form>
+        <div className="form-group">
+          <label htmlFor="titleInput">Title:</label>
+          <input
+            id="titleInput"
+            name="titleInput"
+            onChange={handleTitleChangeText}
+            className="form-control"
+            placeholder="Title"
+            value={title}
+            required
+          />
+          <label htmlFor="bodyInput">Post Body:</label>
+          <textarea
+            id="commentBox"
+            name="commentBox"
+            onChange={handleBodyChangeText}
+            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={body}
+            required
+          ></textarea>
+        </div>
+        <br />
+        <div>
+          <button className="btn btn-danger" onClick={handleCancelClick}>
+            Cancel
+          </button>
+          <br />
+          <button className="btn btn-primary" onClick={handleSaveClick}>
+            Save Post
+          </button>
+          <br />
+          <button
+            className="btn btn-primary"
+            onClick={handleSaveAndPublishClick}
+          >
+            Save and Publish Post
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default PostCreateForm;

src/components/PostDetail.js

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { useParams, Link } from "react-router-dom";
 import Switch from "react-switch";
 
@@ -44,14 +44,15 @@ const PostDetail = () => {
   }, [post.published]);
 
   const [comments, setComments] = useState([]);
-  const reloadComments = () => {
+  const reloadComments = useCallback(() => {
     UserService.getComments(postId).then((response) => {
       setComments(response.data);
     });
-  };
+  }, [postId]);
+
   useEffect(() => {
     reloadComments();
-  }, []);
+  }, [reloadComments]);
 
   const handleChange = () => {
     UserService.togglePublished(postId);

src/components/PostList.js

@@ -23,8 +23,21 @@ const PostList = () => {
     }
   }, []);
 
+  const handleClick = () => {
+    window.location.href = "/posts/create";
+  };
+
   return (
     <div className="PostList">
+      {admin && (
+        <div>
+          <button className="btn btn-primary" onClick={handleClick}>
+            + New Post
+          </button>
+          <br />
+          <br />
+        </div>
+      )}
       {posts.map((post) => {
         if (post.published || admin) {
           return (

src/services/user.service.js

@@ -10,6 +10,17 @@ const getPost = (id) => {
   return axios.get(`${API_URL}/posts/${id}`);
 };
 
+const createPost = (userId, title, body, published) => {
+  return axios.post(`${API_URL}/posts/create`, {
+    params: {
+      userId,
+      title,
+      body,
+      published,
+    },
+  });
+};
+
 const deletePost = (id) => {
   return axios.post(`${API_URL}/posts/${id}/delete`);
 };
@@ -39,6 +50,7 @@ const togglePublished = (postId) => {
 const UserService = {
   getPosts,
   getPost,
+  createPost,
   deletePost,
   getComments,
   deleteComment,

todo.md

@@ -1,3 +1,4 @@
 - admin board
-	- create post
 	- edit post
+	- rich text editor for posting and commenting
+	- make large post to test truncating on post list