Comment Functionality

controllers/comments.js

@@ -0,0 +1,17 @@
+const Comment = require("../models/Comment");
+
+module.exports = {
+  createComment: async (req, res) => {
+    try {
+      await Comment.create({
+        comment: req.body.comment,
+        post: req.params.id,
+        user: req.user.id,
+      });
+      console.log("Comment has been added!");
+      res.redirect("/post/" + req.params.id);
+    } catch (err) {
+      console.log(err);
+    }
+  },
+}

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) => {
@@ -18,14 +19,27 @@ module.exports = {
       console.log(err);
     }
   },
+  // getPost: async (req, res) => {
+  //   try {
+  //     const post = await Post.findById(req.params.id); //post id we can also use to find comments
+  //     // get comments
+  //     const comments = await Comment.find({ post: req.params.id }).sort({ createdAt: "desc" })
+  //     res.render("post.ejs", { post: post, user: req.user, comments: comments });
+  //   } catch (err) {
+  //     console.log(err);
+  //   }
+  // },
   getPost: async (req, res) => {
     try {
       const post = await Post.findById(req.params.id);
-      res.render("post.ejs", { post: post, user: req.user });
+      // populate 'user' gets the details of each user that comments
+      const comments = await Comment.find({post: req.params.id}).sort({ createdAt: "desc" }).populate('user') //populate user
+      console.log(comments);  // Add this to inspect if 'user' is populated
+      res.render("post.ejs", { post: post, user: req.user , comments: comments});
     } catch (err) {
       console.log(err);
     }
-  },
+  }, 
   createPost: async (req, res) => {
     try {
       // Upload image to cloudinary

models/Comment.js

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

routes/comments.js

@@ -0,0 +1,8 @@
+const express = require("express");
+const router = express.Router();
+const commentsController = require("../controllers/comments");
+const { ensureAuth, ensureGuest } = require("../middleware/auth");
+
+router.post("/createComment/:id", commentsController.createComment);
+
+module.exports = router;

server.js

@@ -10,6 +10,7 @@ const logger = require("morgan");
 const connectDB = require("./config/database");
 const mainRoutes = require("./routes/main");
 const postRoutes = require("./routes/posts");
+const commentRoutes = require("./routes/comments")
 
 //Use .env file in config folder
 require("dotenv").config({ path: "./config/.env" });
@@ -56,6 +57,7 @@ app.use(flash());
 //Setup Routes For Which The Server Is Listening
 app.use("/", mainRoutes);
 app.use("/post", postRoutes);
+app.use("/comment", commentRoutes)
 
 //Server Running
 app.listen(process.env.PORT, () => {

views/post.ejs

@@ -27,6 +27,37 @@
     <div class="col-3 mt-5">
       <p><%= post.caption %></p>
     </div>
+
+    <ul>
+       <% for(var i=0; i<comments.length; i++) { %>
+  <li class="col-6 justify-content-between mt-5">
+    <strong>
+      <% if (comments[i].user && comments[i].user.userName) { %>
+        <%= comments[i].user.userName %> :
+      <% } else { %>
+        Unknown User :
+      <% } %>
+    </strong>
+    <%= comments[i].comment %>
+  </li>
+<% } %>
+
+    </ul>
+
+    <div class="mt-5">
+            <h2>Add a comment</h2>
+            <form action="/comment/createComment/<%= post._id%>" method="POST">
+              <div class="mb-3">
+                <label for="comment" class="form-label">Comment</label>
+                <textarea class="form-control" id="comment" name="comment"></textarea>
+              </div>
+              <button type="submit" class="btn btn-primary">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>