From c7dc2f6a5c3f6bf09722260853b9986b7c881339 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Mon, 15 Jul 2019 19:09:33 -0300
Subject: [PATCH] Hide CommentForm when an edit is in progress

- Follow @Tirokk PR review
---
 webapp/components/Comment.vue                 | 40 ++++++++++---------
 .../components/comments/CommentForm/index.vue |  8 +++-
 .../components/comments/CommentForm/spec.js   |  1 +
 .../comments/EditCommentForm/index.vue        |  5 +++
 webapp/store/editor.js                        |  7 ++++
 5 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/webapp/components/Comment.vue b/webapp/components/Comment.vue
index f0155afa8..1fdfad7cf 100644
--- a/webapp/components/Comment.vue
+++ b/webapp/components/Comment.vue
@@ -35,24 +35,22 @@
           @showEditCommentMenu="editCommentMenu"
         />
       </div>
-      <div
-        v-if="isCollapsed && !openEditCommentMenu"
-        v-html="comment.contentExcerpt"
-        style="padding-left: 40px;"
-      />
-      <div
-        v-show="comment.content !== comment.contentExcerpt"
-        style="text-align: right;  margin-right: 20px; margin-top: -12px;"
-      >
-        <a v-if="isCollapsed" style="padding-left: 40px;" @click="isCollapsed = !isCollapsed">
-          {{ $t('comment.show.more') }}
-        </a>
-      </div>
-      <div v-if="!isCollapsed" v-html="comment.content" style="padding-left: 40px;" />
-      <div style="text-align: right;  margin-right: 20px; margin-top: -12px;">
-        <a v-if="!isCollapsed" @click="isCollapsed = !isCollapsed" style="padding-left: 40px; ">
-          {{ $t('comment.show.less') }}
-        </a>
+      <div v-show="!openEditCommentMenu">
+        <div v-if="isCollapsed" v-html="comment.contentExcerpt" style="padding-left: 40px;" />
+        <div
+          v-show="comment.content !== comment.contentExcerpt"
+          style="text-align: right;  margin-right: 20px; margin-top: -12px;"
+        >
+          <a v-if="isCollapsed" style="padding-left: 40px;" @click="isCollapsed = !isCollapsed">
+            {{ $t('comment.show.more') }}
+          </a>
+        </div>
+        <div v-if="!isCollapsed" v-html="comment.content" style="padding-left: 40px;" />
+        <div style="text-align: right;  margin-right: 20px; margin-top: -12px;">
+          <a v-if="!isCollapsed" @click="isCollapsed = !isCollapsed" style="padding-left: 40px; ">
+            {{ $t('comment.show.less') }}
+          </a>
+        </div>
       </div>
       <ds-space margin-bottom="small" />
     </ds-card>
@@ -61,7 +59,7 @@
 
 <script>
 import gql from 'graphql-tag'
-import { mapGetters } from 'vuex'
+import { mapGetters, mapMutations } from 'vuex'
 import HcUser from '~/components/User'
 import ContentMenu from '~/components/ContentMenu'
 import HcEditCommentForm from '~/components/comments/EditCommentForm'
@@ -126,11 +124,15 @@ export default {
     },
   },
   methods: {
+    ...mapMutations({
+      setEditPending: 'editor/SET_EDIT_PENDING',
+    }),
     isAuthor(id) {
       return this.user.id === id
     },
     editCommentMenu(showMenu) {
       this.openEditCommentMenu = showMenu
+      this.setEditPending(showMenu)
     },
     async deleteCommentCallback() {
       try {
diff --git a/webapp/components/comments/CommentForm/index.vue b/webapp/components/comments/CommentForm/index.vue
index 14dcace43..e0e0058e5 100644
--- a/webapp/components/comments/CommentForm/index.vue
+++ b/webapp/components/comments/CommentForm/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <ds-form v-model="form" @submit="handleSubmit">
+  <ds-form v-show="!editPending" v-model="form" @submit="handleSubmit">
     <template slot-scope="{ errors }">
       <ds-card>
         <hc-editor ref="editor" :users="users" :value="form.content" @input="updateEditorContent" />
@@ -27,6 +27,7 @@ import gql from 'graphql-tag'
 import HcEditor from '~/components/Editor/Editor'
 import PostCommentsQuery from '~/graphql/PostCommentsQuery.js'
 import CommentMutations from '~/graphql/CommentMutations.js'
+import { mapGetters } from 'vuex'
 
 export default {
   components: {
@@ -46,6 +47,11 @@ export default {
       users: [],
     }
   },
+  computed: {
+    ...mapGetters({
+      editPending: 'editor/editPending',
+    }),
+  },
   methods: {
     updateEditorContent(value) {
       const content = value.replace(/<(?:.|\n)*?>/gm, '').trim()
diff --git a/webapp/components/comments/CommentForm/spec.js b/webapp/components/comments/CommentForm/spec.js
index c3622151c..8420c97ba 100644
--- a/webapp/components/comments/CommentForm/spec.js
+++ b/webapp/components/comments/CommentForm/spec.js
@@ -40,6 +40,7 @@ describe('CommentForm.vue', () => {
       'editor/placeholder': () => {
         return 'some cool placeholder'
       },
+      'editor/editPending': () => false,
     }
     const store = new Vuex.Store({
       getters,
diff --git a/webapp/components/comments/EditCommentForm/index.vue b/webapp/components/comments/EditCommentForm/index.vue
index c17425596..02ed17465 100644
--- a/webapp/components/comments/EditCommentForm/index.vue
+++ b/webapp/components/comments/EditCommentForm/index.vue
@@ -32,6 +32,7 @@
 <script>
 import gql from 'graphql-tag'
 import HcEditor from '~/components/Editor/Editor'
+import { mapMutations } from 'vuex'
 
 export default {
   components: {
@@ -56,6 +57,9 @@ export default {
     }
   },
   methods: {
+    ...mapMutations({
+      setEditPending: 'editor/SET_EDIT_PENDING',
+    }),
     updateEditorContent(value) {
       const content = value.replace(/<(?:.|\n)*?>/gm, '').trim()
       if (content.length < 1) {
@@ -92,6 +96,7 @@ export default {
           this.$toast.success(this.$t('post.comment.updated'))
           this.disabled = false
           this.$emit('showEditCommentMenu', false)
+          this.setEditPending(false)
         })
         .catch(err => {
           this.$toast.error(err.message)
diff --git a/webapp/store/editor.js b/webapp/store/editor.js
index 9c5f665a0..cbf9d9289 100644
--- a/webapp/store/editor.js
+++ b/webapp/store/editor.js
@@ -1,6 +1,7 @@
 export const state = () => {
   return {
     placeholder: null,
+    editPending: false,
   }
 }
 
@@ -8,10 +9,16 @@ export const getters = {
   placeholder(state) {
     return state.placeholder
   },
+  editPending(state) {
+    return state.editPending
+  },
 }
 
 export const mutations = {
   SET_PLACEHOLDER_TEXT(state, text) {
     state.placeholder = text
   },
+  SET_EDIT_PENDING(state, boolean) {
+    state.editPending = boolean
+  },
 }