Users can now delete there comments

VMGWARE · Oct 12, 2023 · 546801a · 546801a
1 parent f06b003
commit 546801a
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 17 deletions.
diff --git a/frontend/src/components/Post/CommentComponent.vue b/frontend/src/components/Post/CommentComponent.vue
@@ -11,23 +11,62 @@
         </router-link>
         <div>
           <p class="card-text mb-0">{{ comment.comment }}</p>
-          <small class="text-muted">
-            Posted by {{ comment.user?.username }}
-            {{
-              new Date(comment.createdAt).toLocaleDateString(undefined, {
-                year: "numeric",
-                month: "long",
-                day: "numeric",
-              })
-            }}
-            at
-            {{
-              new Date(comment.createdAt).toLocaleTimeString(undefined, {
-                hour: "numeric",
-                minute: "numeric",
-              })
-            }}
-          </small>
+          <div class="d-flex justify-content-between align-items-center">
+            <small class="text-muted mr-2">
+              Posted by {{ comment.user?.username }}
+              {{
+                new Date(comment.createdAt).toLocaleDateString(undefined, {
+                  year: "numeric",
+                  month: "long",
+                  day: "numeric",
+                })
+              }}
+              at
+              {{
+                new Date(comment.createdAt).toLocaleTimeString(undefined, {
+                  hour: "numeric",
+                  minute: "numeric",
+                })
+              }}
+            </small>
+            <div
+              class="comment-actions ml-auto"
+              v-if="comment.user?._id === $store.state.user._id"
+            >
+              <div class="dropdown">
+                <button
+                  class="btn btn-sm text-light"
+                  type="button"
+                  id="dropdownMenuButton"
+                  data-bs-toggle="dropdown"
+                  aria-haspopup="true"
+                  aria-expanded="false"
+                >
+                  <i class="fas fa-ellipsis-h"></i>
+                </button>
+                <div
+                  class="dropdown-menu dropdown-menu-right"
+                  aria-labelledby="dropdownMenuButton"
+                >
+                  <button
+                    class="btn btn-edit btn-sm mr-2 dropdown-item"
+                    type="button"
+                    style="color: #fff; cursor: pointer"
+                  >
+                    <i class="fas fa-edit"></i> Edit
+                  </button>
+                  <button
+                    class="btn btn-delete btn-sm dropdown-item"
+                    type="button"
+                    @click="deleteComment(comment._id)"
+                    style="color: #fff; cursor: pointer"
+                  >
+                    <i class="fas fa-trash"></i> Delete
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -44,9 +83,26 @@
   margin-right: 10px;
   background-color: #ffc34d;
 }
+
+.btn-edit {
+  background-color: #ffc34d;
+  color: #fff;
+  border-radius: 0.25rem;
+  margin: 3px;
+}
+
+.btn-delete {
+  background-color: #ff6666;
+  color: #fff;
+  border-radius: 0.25rem;
+  margin: 3px;
+}
 </style>
 
 <script>
+import axios from "axios";
+import { useToast } from "vue-toastification";
+
 export default {
   name: "CommentComponent",
   props: {
@@ -55,5 +111,22 @@ export default {
       required: true,
     },
   },
+  methods: {
+    async deleteComment(commentId) {
+      try {
+        axios.defaults.headers.common[
+          "Authorization"
+        ] = `Bearer ${this.$store.state.token}`;
+        // Implement functionality to delete the post
+        const response = await axios.delete(`/v1/comments/${commentId}`);
+        if (response.status === 200) {
+          this.$emit("commentDeleted", commentId);
+        }
+      } catch (error) {
+        console.log(error);
+        useToast().error("Error deleting comment. Please try again later.");
+      }
+    },
+  },
 };
 </script>
diff --git a/frontend/src/components/PostComponent.vue b/frontend/src/components/PostComponent.vue
@@ -116,6 +116,7 @@
           v-for="comment in thisPost.comments"
           :key="comment._id"
           :id="'comment_' + comment._id"
+          @comment-deleted="handleCommentDeleted"
         />
       </div>
       <div v-else>
@@ -323,6 +324,14 @@ export default {
       const options = { year: "numeric", month: "long", day: "numeric" };
       return new Date(dateString).toLocaleDateString(undefined, options);
     },
+    handleCommentDeleted(deletedCommentId) {
+      console.log("Comment Deleted: ", deletedCommentId);
+
+      // Remove the comment with the specified _id from the comments array
+      this.thisPost.comments = this.thisPost.comments.filter(
+        (comment) => comment._id !== deletedCommentId
+      );
+    },
   },
   mounted() {
     // Check if the post is liked