Add functionality to display user names with comments on posts

controllers/posts.js

@@ -1,5 +1,6 @@
 const cloudinary = require("../middleware/cloudinary");
 const Post = require("../models/Post");
+const Comment = require("../models/Comment")
 
 module.exports = {
   getProfile: async (req, res) => {
@@ -21,7 +22,12 @@ module.exports = {
   getPost: async (req, res) => {
     try {
       const post = await Post.findById(req.params.id);
-      res.render("post.ejs", { post: post, user: req.user });
+      const comments = await Comment
+        .find( { post: req.params.id })
+        .populate("user", "userName")
+        .sort({ createdAt: "desc" })
+        .lean();
+      res.render("post.ejs", { post: post, user: req.user, comments: comments});
     } catch (err) {
       console.log(err);
     }
@@ -73,4 +79,17 @@ module.exports = {
       res.redirect("/profile");
     }
   },
+  addComment: async (req, res) => {
+    try {
+        await Comment.create({
+            comment: req.body.comment,
+            user: req.user.id,
+            post: req.params.id             
+        });
+      console.log("Comment has been added!");
+      res.redirect(`/post/${req.params.id}`);
+    } catch (err) {
+      console.log(err);
+    }
+  }
 };

models/Comment.js

@@ -0,0 +1,22 @@
+const mongoose = require("mongoose");
+
+const CommentSchema = new mongoose.Schema({
+  comment: {
+    type: String,
+    required: true,
+  },
+  user: {
+    type: mongoose.Schema.Types.ObjectId,
+    ref: "User",
+  },
+  post: {
+    type: String,
+    required: true,
+  },
+  createdAt: {
+    type: Date,
+    default: Date.now,
+  },
+});
+
+module.exports = mongoose.model("Comment", CommentSchema);

routes/posts.js

@@ -13,4 +13,6 @@ router.put("/likePost/:id", postsController.likePost);
 
 router.delete("/deletePost/:id", postsController.deletePost);
 
+router.post("/addComment/:id", postsController.addComment)
+
 module.exports = router;

views/post.ejs

@@ -27,6 +27,27 @@
     <div class="col-3 mt-5">
       <p><%= post.caption %></p>
     </div>
+    <div>
+      <h3>Comments</h3>
+      <ul>
+        <% comments.forEach( comment => { %>
+          <li class='todoItem' data-id='<%=comment._id%>'>
+              <p><%= comment.comment %></p>
+              <p><%= comment.user.userName %></p>
+              <p><%= comment.createdAt %></p>
+          </li>
+        <% }) %>  
+      </ul>
+    </div>
+    <div>
+      <form
+      action="/post/addComment/<%= post.id %>"
+      method="POST"
+      >
+      <input type="textarea" name="comment" placeholder="Write a comment">
+      <button class="btn btn-primary" type="submit">Submit</button>
+      </form>
+    </div>
     <div class="col-6 mt-5">
       <a class="btn btn-primary" href="/profile">Return to Profile</a>
       <a class="btn btn-primary" href="/feed">Return to Feed</a>