add delete option in comments

Author: ankushdutt

public/stylesheets/style.css

@@ -67,7 +67,7 @@ body{
 }
 
 /* icon */
-.icon .fa {
+.icon {
     font-size: 1.5em;
 }
 
@@ -109,6 +109,17 @@ body{
     color: hsl(0, 0%, 21%);
 }
 
+#remove-icon {
+    color: rgba(196, 62, 62, 0.726);
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+}
+ 
+#remove-icon:hover {
+    color: rgb(255, 0, 0);
+}
+
 .nav-item {
     padding: 10px;
     color: white;

routes/blogs.js

@@ -37,7 +37,6 @@ router.get("/blog/:id", function(req, res) {
             console.log(err);
         }
         else{
-            console.log(foundBlog)
             res.render("blogs/info", {blog: foundBlog})
         }
     })

routes/comments.js

@@ -5,7 +5,7 @@ var Comment     = require("../models/comment");
 var middleware  = require("../middleware")
 
 //POST
-router.post("/blog/:id/comment", function(req, res){
+router.post("/blog/:id/comment", middleware.isLoggedIn, function(req, res){
     console.log(req.params.id)
     Blog.findById(req.params.id, function(err, blog){
         if(err){
@@ -30,35 +30,16 @@ router.post("/blog/:id/comment", function(req, res){
     })
 })
 
-// //EDIT
-// router.get("/:comment_id/edit", middleware.checkCommentOwnership, function(req, res){
-//     Blog.findById(req.params.comment_id, function(err, foundComment){
-//         if(err){
-//             res.redirect("back")
-//         } else{
-//             res.render("comments/edit", {campgroundid: req.params.id, comment: foundComment})
-//         }
-//     })
-// })
-
-// //UPDATE
-// router.put("/:comment_id", middleware.checkCommentOwnership, function(req, res){
-//     Comment.findByIdAndUpdate(req.params.comment_id, req.body.comment, function(err, updatedComment){
-//         if(err){
-//             res.redirect("back")
-//         } else{
-//             res.redirect("/campgrounds/"+req.params.id)
-//         }
-//     })
-// })
-
 //DELETE
-router.delete("/:comment_id", middleware.checkCommentOwnership, function(req, res){
-    Blog.findByIdAndRemove(req.params.comment_id, function(err){
+router.delete("/blog/:id/comment/:comment_id", middleware.checkCommentOwnership, function(req, res){
+    console.log("hey")
+    Comment.findByIdAndRemove(req.params.comment_id, function(err){
         if(err){
+            console.log("err: ", err)
             res.redirect("back")
         } else{
             // req.flash("success", "Comments Deleted!")
+            console.log("deleted successfully")
             res.redirect("/blog/"+req.params.id)
         }
     })

views/blogs/info.ejs

@@ -86,6 +86,11 @@
 		<div class="columns is-centered is-multiline">
 			<div class="column is-6">
 				<strong><%=comment.author.username%></strong> - <%=comment.text%>
+				<%if(currentUser && comment.author.id.equals(currentUser._id)) {%>
+					<form action="/blog/<%=blog._id%>/comment/<%=comment._id%>?_method=DELETE" method="POST" style="display: inline;">
+						<button id="remove-icon" class="fas fa-minus-circle"></button>
+					</form>
+				<%}%>
 			</div>
 		</div>
 	<%})%>

views/blogs/new.ejs

@@ -1,15 +1,20 @@
 <%- include('../partials/header') %>
-<center><h3 class="title is-3" style="padding: 50px;">Creat a New Blog</h3></center>
+<center><h3 class="title is-3" style="padding: 50px;">Create a New Blog</h3></center>
 <form action="/blogs" method="POST" style="margin: auto; width: 40%;">
     <div class="field">
-        <input class="input is-info" type="text" name="title" placeholder="Title" required>
+      <label class="label">Title:</label>
+      <input class="input is-info" type="text" name="title" placeholder="Title" required>
     </div>
     <div class="field">
+      <label class="label">Image URL:</label>
       <input class="input is-info" type="text" name="image" placeholder="Image URL">
     </div>
     <div class="field">
-      <textarea id="content" class="textarea is-info" name="body" rows="10" placeholder="Body (Markdown in Supported!)"></textarea>
+      <label class="label">Body (Supports Markdown):</label>
+      <textarea id="content" class="textarea is-info" name="body" rows="10" placeholder="Body"></textarea>
     </div>
-    <button class="button is-info is-outlined">Create</button>
+    <span style="display: inline-flex;">
+      <button class="button is-info is-outlined" style="margin-right: 10px;">Create</button>
+    </span>
 </form>
 <%- include('../partials/footer') %>

views/partials/footer.ejs

@@ -6,17 +6,17 @@
 			<div class="nav-center">
 				<a class="nav-item">
 				<span class="icon">
-					<i class="fa fa-twitter"></i>
+					<i class="fab fa-twitter fa-lg"></i>
 				</span>
 				</a>
 				<a class="nav-item">
 				<span class="icon">
-					<i class="fa fa-facebook"></i>
+					<i class="fab fa-facebook fa-lg"></i>
 				</span>
 				</a>
 				<a class="nav-item">
 				<span class="icon">
-					<i class="fa fa-github"></i>
+					<i class="fab fa-github fa-lg"></i>
 				</span>
 				</a>
 			</div>

views/partials/header.ejs

@@ -5,7 +5,7 @@
     <!-- styles and fonts -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
     <link rel="stylesheet" href="/stylesheets/style.css">
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
     <!-- end of styles and fonts -->
   </head>