Added comments with usernames

controllers/comments.js

@@ -0,0 +1,24 @@
+const cloudinary = require("../middleware/cloudinary");
+const Post = require("../models/Post");
+const Comment = require("../models/Comment");
+
+module.exports = {
+
+    createComment: async (req, res) => {
+        try {
+            console.log(req.body)
+            await Comment.create({
+                comment: req.body.comment,
+                likes: 0,
+                userName: req.user.userName,
+                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 cloudinary = require("../middleware/cloudinary");
 const Post = require("../models/Post");
+const Comment = require("../models/Comment");
 
 module.exports = {
   getProfile: async (req, res) => {
@@ -21,23 +22,34 @@ 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);
     }
   },
   createPost: async (req, res) => {
     try {
-      // Upload image to cloudinary
-      const result = await cloudinary.uploader.upload(req.file.path);
+
 
       await Post.create({
-        title: req.body.title,
-        image: result.secure_url,
-        cloudinaryId: result.public_id,
-        caption: req.body.caption,
+        plugin: req.body.plugin,
+        company: req.body.company,
+        category: req.body.category,
+        freeOrPaid: req.body.freeOrPaid,
+        link: req.body.link,
         likes: 0,
+        userName: req.user.userName,
         user: req.user.id,
+
       });
       console.log("Post has been added!");
       res.redirect("/profile");
@@ -64,7 +76,7 @@ module.exports = {
       // Find post by id
       let post = await Post.findById({ _id: req.params.id });
       // Delete image from cloudinary
-      await cloudinary.uploader.destroy(post.cloudinaryId);
+      // await cloudinary.uploader.destroy(post.cloudinaryId);
       // Delete post from db
       await Post.remove({ _id: req.params.id });
       console.log("Deleted Post");

models/Comment.js

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

models/Post.js

@@ -1,26 +1,34 @@
 const mongoose = require("mongoose");
 
 const PostSchema = new mongoose.Schema({
-  title: {
+  plugin: {
     type: String,
     required: true,
   },
-  image: {
+  company: {
     type: String,
     require: true,
   },
-  cloudinaryId: {
+  category: {
     type: String,
     require: true,
   },
-  caption: {
+  freeOrPaid: {
+    type: String,
+    required: true,
+  },
+  link: {
     type: String,
     required: true,
   },
   likes: {
     type: Number,
     required: true,
   },
+  userName: {
+    type: String,
+    ref: "User"
+  },
   user: {
     type: mongoose.Schema.Types.ObjectId,
     ref: "User",
@@ -31,4 +39,5 @@ const PostSchema = new mongoose.Schema({
   },
 });
 
+//MongoDB Collection named here - will give lowercase pllural of name
 module.exports = mongoose.model("Post", PostSchema);

public/css/style.css

@@ -0,0 +1,5 @@
+/* .center {
+    justify-content: center;
+    align-items: center;
+} */
+

routes/comments.js

@@ -0,0 +1,15 @@
+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);
+
+
+// router.delete("/deletePost/:id", postsController.deletePost);
+
+module.exports = router;

routes/posts.js

@@ -7,7 +7,7 @@ const { ensureAuth, ensureGuest } = require("../middleware/auth");
 //Post Routes - simplified for now
 router.get("/:id", ensureAuth, postsController.getPost);
 
-router.post("/createPost", upload.single("file"), postsController.createPost);
+router.post("/createPost", postsController.createPost);
 
 router.put("/likePost/:id", postsController.likePost);
 

server.js

@@ -1,15 +1,22 @@
+// All of the modules needed to make the app work 
 const express = require("express");
 const app = express();
+//helps us talk to our mongodb databse
 const mongoose = require("mongoose");
 const passport = require("passport");
+//allows our users to stay logged in across sessions
 const session = require("express-session");
+//Storing our actual session in mongodb
 const MongoStore = require("connect-mongo")(session);
+//allows us to do put and delete requests with forms
 const methodOverride = require("method-override");
 const flash = require("express-flash");
+//our logger
 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 +63,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/feed.ejs

@@ -1,4 +1,32 @@
 <%- include('partials/header') -%>
+<div class="container">
+  <div class="row justify-content-center mt-5">
+    <div class="col-md-6"> 
+      <ul class="list-unstyled">
+        <% for(var i=0; i<posts.length; i++) {%>
+          <li class="mb-4"> 
+            <a href="/post/<%= posts[i]._id%>">
+              <h2><%= posts[i].plugin %></h2>
+            </a>
+
+          </li>
+        <% } %>
+      </ul>
+    </div>
+  </div>
+</div>
+
+<div class="container text-center">
+  <div class="row justify-content-center">
+    <div class="col-6 mt-5 text-center">
+      <a class="btn btn-primary" href="/profile">Return to Profile</a>
+     <a class="btn btn-primary" href="/feed">Top of Feed</a>
+    </div>
+  </div>
+</div>
+<%- include('partials/footer') -%>
+
+<!-- <%- include('partials/header') -%>
   <div class="container">
     <div class="row justify-content-center mt-5">
       <ul class="row list-unstyled">
@@ -7,9 +35,15 @@
             <a href="/post/<%= posts[i]._id%>">
               <img class="img-fluid" src="<%= posts[i].image%>">
             </a>
+            <h2><%= posts[i].title %></h2>
+            <p><%= posts[i].caption %></p>
           </li>
         <% } %>
         </ul>
     </div>
   </div>  
-<%- include('partials/footer') -%>
+  <div class="col-6 mt-5">
+    <a class="btn btn-primary" href="/profile">Return to Profile</a>
+    <a class="btn btn-primary" href="/feed">Top of Feed</a>
+  </div>
+<%- include('partials/footer') -%> -->

views/partials/header.ejs

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Binary Upload Boom</title>
+    <title>Plugin Leaderboards</title>
     <link
       rel="icon"
       type="image/png"
@@ -28,8 +28,8 @@
   <body>
     <header class="container">
       <div class="text-center">
-        <h1 class=""><a href="/profile">Binary Upload Boom</a></h1>
-        <span>The #100Devs Social Network</span>
+        <h1 class=""><a href="/profile">Plugin Leaderboards</a></h1>
+        <span>Music Plugins Ranked By The Community</span>
       </div>
     </header>
   </body>

views/post.ejs

@@ -2,8 +2,10 @@
 <div class="container">
   <div class="row justify-content-center mt-5">
     <div class="col-6">
-      <h2><%= post.title %></h2>
-      <img class="img-fluid" src="<%= post.image%>" />
+      <h2><%= post.plugin %></h2>
+      <h2><%= post.userName %></h2>
+
+      <!-- <img class="img-fluid" src="<%= post.image%>" /> -->
       <div class="row justify-content-between">
         <form
           class="col-1"
@@ -25,8 +27,34 @@
       </div>
     </div>
     <div class="col-3 mt-5">
-      <p><%= post.caption %></p>
+      <ul class="list-unstyled">
+        <li>Category: <%= post.category %></li>
+        <li>Free or Paid? <%= post.freeOrPaid %></li>
+        <li>Link To Plugin: <a href="<%= post.link %>" target="_blank"><%= post.link %></a></li>
+      </ul>
     </div>
+    <!-- loop to display comments -->
+    <ul>
+      <% for(var i=0; i<comments.length; i++) {%>
+        <li class="col-6 justify-content-between mt-5" data-id='<%=comments._id%>'> 
+          <%= comments[i].userName + ":" %> <%= comments[i].comment %>
+        </li>
+
+      <% } %>
+    </ul>
+
+    <!-- form for making comments -->
+    <div class="mt-5">
+      <form action="/comment/createComment/<%=post._id%>" method="POST">
+        <div class="mb-3">
+            <label for="comment" class="form-label">Share your thoughts on <%= post.plugin %></label>
+            <input type="text" class="form-control" id="comment" name="comment">
+        </div>
+        <button type="submit" class="btn btn-primary">Add Comment</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>