reply comment working

src/components/comments/Comments.vue

@@ -16,12 +16,18 @@
           <button
             class="btn | justify-start w-full | bg-white-10 text-white | px-8"
             data-icon="chevron-single-left"
-            @click="openedComment = null"
+            @click="
+              openedComment = null;
+              isAddOpen = false;
+            "
           >
             <span>Retour à la liste</span>
           </button>
-          <Comment :comment="openedComment" />
-          <div v-if="openedComment?.replies?.length > 0" class="replies">
+          <Comment :comment="openedComment" data-opened="true" />
+          <div
+            v-if="Object.values(openedComment.replies).length > 0"
+            class="replies"
+          >
             <Comment
               v-for="(reply, commentIndex) in Object.values(
                 openedComment.replies
@@ -36,7 +42,7 @@
       <template v-else> état aucun commentaire </template>
     </div>
     <button
-      v-if="!openedComment && !isAddOpen"
+      v-if="!openedComment"
       id="create-comment"
       class="btn btn--white-20 | w-full"
       @click="isAddOpen = true"
@@ -44,10 +50,10 @@
       Ajouter un commentaire
     </button>
     <button
-      v-else
+      v-else-if="openedComment && !isAddOpen"
       id="reply-comment"
       class="btn btn--white-20 | justify-start w-full | text-white-50"
-      @click="isReplyOpen = true"
+      @click="isAddOpen = true"
     >
       Répondre…
     </button>
@@ -57,7 +63,7 @@
       action=""
       method="post"
       class="flow | bg-white-20 | p-12 | rounded-xl"
-      @submit="addComment"
+      @submit="handleSubmit"
     >
       <label class="sr-only" for="comment">Votre commentaire</label>
       <textarea
@@ -70,7 +76,7 @@
       ></textarea>
       <footer class="flex">
         <input type="submit" class="btn btn--tranparent" />
-        <button class="btn btn--white-10" @click="closeAddField()">
+        <button class="btn btn--white-10" @click="isAddOpen = false">
           Annuler
         </button>
       </footer>
@@ -107,10 +113,10 @@ const isAddOpen = ref(false);
 const emits = defineEmits(["update:file"]);
 
 // Functions
-async function addComment(event) {
+function handleSubmit(event) {
   event.preventDefault();
   const date = dayjs().format();
-  const comment = {
+  const newComment = {
     pageUri: page.uri + "/client-brief",
     filePageIndex: currentPageIndex,
     fileName: file.name,
@@ -119,7 +125,24 @@ async function addComment(event) {
     date,
     id: uniqid(),
   };
-  const newFile = await api.addComment(comment);
+  if (openedComment.value) {
+    replyComment(newComment);
+  } else {
+    addComment(newComment);
+  }
+}
+
+async function replyComment(newComment) {
+  newComment.parentId = openedComment.value.id;
+  const newFile = await api.replyComment(newComment);
+  newCommentText.value = "";
+  isAddOpen.value = false;
+  openedComment.value = newFile.comments[openedComment.value.id];
+  emits("update:file", newFile);
+}
+
+async function addComment(newComment) {
+  const newFile = await api.addComment(newComment);
   newCommentText.value = "";
   isAddOpen.value = false;
   emits("update:file", newFile);

src/stores/api.js

@@ -144,6 +144,29 @@ export const useApiStore = defineStore("api", () => {
     }
   }
 
+  async function replyComment(comment) {
+    const headers = {
+      method: "POST",
+      body: JSON.stringify(comment),
+    };
+
+    try {
+      const response = await fetch("/reply-comment.json", headers);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const newFile = await response.json();
+      return newFile;
+    } catch (error) {
+      console.error(
+        "Une erreur s'est produite lors de l'ajout de la réponse' :",
+        commentaire,
+        error
+      );
+      throw error;
+    }
+  }
+
   async function readNotification(userUuid, group, notificationId) {
     const headers = {
       method: "POST",
@@ -175,6 +198,7 @@ export const useApiStore = defineStore("api", () => {
     fetchData,
     fetchRoute,
     addComment,
+    replyComment,
     readNotification,
   };
 });