Users can now edit comments

VMGWARE · Oct 12, 2023 · 8f2db63 · 8f2db63
1 parent a2590b7
commit 8f2db63
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 3 deletions.
diff --git a/backend/app.js b/backend/app.js
@@ -58,7 +58,7 @@ app.use(function (req, res, next) {
     "Access-Control-Allow-Headers",
     "Origin, X-Requested-With, Content-Type, Accept, Authorization, X-Forwarded-For"
   );
-  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
+  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, PATCH, DELETE, OPTIONS");
   res.header("Access-Control-Allow-Credentials", true);
   next();
 });

diff --git a/frontend/src/components/Post/CommentComponent.vue b/frontend/src/components/Post/CommentComponent.vue
@@ -10,7 +10,35 @@
           />
         </router-link>
         <div>
-          <p class="card-text mb-0">{{ comment.comment }}</p>
+          <p class="card-text mb-0" v-if="!isEditing">{{ comment.comment }}</p>
+          <textarea
+            v-else
+            v-model="editedComment"
+            class="form-control"
+            rows="3"
+            placeholder="Write a comment..."
+          ></textarea>
+
+          <button
+            v-if="isEditing"
+            class="btn btn-secondary btn-sm"
+            type="button"
+            @click="editComment(comment._id)"
+            style="color: #fff; cursor: pointer"
+          >
+            <i class="fas fa-save"></i> Save
+          </button>
+
+          <!-- Cancel -->
+          <button
+            v-if="isEditing"
+            class="btn btn-secondary btn-sm"
+            type="button"
+            @click="toggleEditing"
+            style="color: #fff; cursor: pointer"
+          >
+            <i class="fas fa-times"></i> Cancel
+          </button>
           <div class="d-flex justify-content-between align-items-center">
             <small class="text-muted mr-2">
               Posted by {{ comment.user?.username }}
@@ -52,8 +80,10 @@
                     class="btn btn-edit btn-sm mr-2 dropdown-item"
                     type="button"
                     style="color: #fff; cursor: pointer"
+                    @click="toggleEditing"
                   >
-                    <i class="fas fa-edit"></i> Edit
+                    <i class="fas fa-edit"></i>
+                    {{ isEditing ? "Cancel" : "Edit" }}
                   </button>
                   <button
                     class="btn btn-delete btn-sm dropdown-item"
@@ -111,6 +141,12 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      isEditing: false,
+      editedComment: "",
+    };
+  },
   methods: {
     async deleteComment(commentId) {
       try {
@@ -127,6 +163,27 @@ export default {
         useToast().error("Error deleting comment. Please try again later.");
       }
     },
+    async editComment(commentId) {
+      try {
+        axios.defaults.headers.common[
+          "Authorization"
+        ] = `Bearer ${this.$store.state.token}`;
+        const response = await axios.patch(`/v1/comments/${commentId}`, {
+          comment: this.editedComment,
+        });
+        if (response.status === 200) {
+          this.isEditing = false;
+          this.$emit("commentEdited", response.data.data);
+        }
+      } catch (error) {
+        console.log(error);
+        useToast().error("Error editing comment. Please try again later.");
+      }
+    },
+    toggleEditing() {
+      this.isEditing = !this.isEditing;
+      this.editedComment = this.comment.comment; // Copy the current comment text to the editedComment
+    },
   },
 };
 </script>
diff --git a/frontend/src/components/PostComponent.vue b/frontend/src/components/PostComponent.vue
@@ -117,6 +117,7 @@
           :key="comment._id"
           :id="'comment_' + comment._id"
           @comment-deleted="handleCommentDeleted"
+          @comment-edited="handleCommentEdited"
         />
       </div>
       <div v-else>
@@ -332,6 +333,20 @@ export default {
         (comment) => comment._id !== deletedCommentId
       );
     },
+    handleCommentEdited(editedComment) {
+      console.log("Comment Edited: ", editedComment._id);
+
+      // Find the comment with the specified _id
+      const commentIndex = this.thisPost.comments.findIndex(
+        (comment) => comment._id === editedComment._id
+      );
+
+      // Update the comment
+      this.thisPost.comments[commentIndex].comment = editedComment.comment;
+
+      // Update the updatedAt field
+      this.thisPost.comments[commentIndex].updatedAt = editedComment.updatedAt;
+    },
   },
   mounted() {
     // Check if the post is liked