Hide new CommentForm while editing a comment

webapp/components/Comment/Comment.vue

@@ -149,6 +149,7 @@ export default {
     },
     editCommentMenu(showMenu) {
       this.openEditCommentMenu = showMenu
+      this.$emit('toggleNewCommentForm', !showMenu)
     },
     updateComment(comment) {
       this.$emit('updateComment', comment)

webapp/components/CommentList/CommentList.vue

@@ -25,6 +25,7 @@
         :routeHash="routeHash"
         @deleteComment="updateCommentList"
         @updateComment="updateCommentList"
+        @toggleNewCommentForm="toggleNewCommentForm"
       />
     </div>
   </div>
@@ -51,6 +52,9 @@ export default {
         return comment.id === updatedComment.id ? updatedComment : comment
       })
     },
+    toggleNewCommentForm(showNewCommentForm) {
+      this.$emit('toggleNewCommentForm', showNewCommentForm)
+    },
   },
 }
 </script>

webapp/pages/post/_id/_slug/index.vue

@@ -70,9 +70,13 @@
       </ds-space>
       <!-- Comments -->
       <ds-section slot="footer">
-        <hc-comment-list :post="post" :routeHash="$route.hash" />
+        <hc-comment-list
+          :post="post"
+          :routeHash="$route.hash"
+          @toggleNewCommentForm="toggleNewCommentForm"
+        />
         <ds-space margin-bottom="large" />
-        <hc-comment-form :post="post" @createComment="createComment" />
+        <hc-comment-form v-if="showNewCommentForm" :post="post" @createComment="createComment" />
       </ds-section>
     </ds-card>
   </transition>
@@ -119,6 +123,7 @@ export default {
       post: null,
       ready: false,
       title: 'loading',
+      showNewCommentForm: true,
     }
   },
   watch: {
@@ -181,6 +186,9 @@ export default {
         })
         .catch(error => this.$toast.error(error.message))
     },
+    toggleNewCommentForm(showNewCommentForm) {
+      this.showNewCommentForm = showNewCommentForm
+    },
   },
   apollo: {
     Post: {