From e544725e873a89299c91f981ffa562ff85532dcf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 9 Sep 2019 10:27:21 +0200
Subject: [PATCH 1/6] Remove `editPending` and `SET_EDIT_PENDING` from the
 store

---
 webapp/components/Comment.vue                 |  7 ++----
 .../CommentForm/CommentForm.spec.js           |  1 -
 webapp/components/CommentForm/CommentForm.vue |  8 +------
 .../EditCommentForm/EditCommentForm.vue       | 24 +++++++++----------
 webapp/store/editor.js                        |  7 ------
 5 files changed, 15 insertions(+), 32 deletions(-)

diff --git a/webapp/components/Comment.vue b/webapp/components/Comment.vue
index 7547927eb..fbb39c094 100644
--- a/webapp/components/Comment.vue
+++ b/webapp/components/Comment.vue
@@ -58,7 +58,7 @@
 </template>
 
 <script>
-import { mapGetters, mapMutations } from 'vuex'
+import { mapGetters } from 'vuex'
 import HcUser from '~/components/User/User'
 import ContentMenu from '~/components/ContentMenu'
 import ContentViewer from '~/components/Editor/ContentViewer'
@@ -126,15 +126,12 @@ export default {
     },
   },
   methods: {
-    ...mapMutations({
-      setEditPending: 'editor/SET_EDIT_PENDING',
-    }),
     isAuthor(id) {
       return this.user.id === id
     },
     editCommentMenu(showMenu) {
+      console.log('editCommentMenu, showMenu: ', showMenu)
       this.openEditCommentMenu = showMenu
-      this.setEditPending(showMenu)
     },
     async deleteCommentCallback() {
       try {
diff --git a/webapp/components/CommentForm/CommentForm.spec.js b/webapp/components/CommentForm/CommentForm.spec.js
index 8aab9bf65..594c6e45b 100644
--- a/webapp/components/CommentForm/CommentForm.spec.js
+++ b/webapp/components/CommentForm/CommentForm.spec.js
@@ -54,7 +54,6 @@ describe('CommentForm.vue', () => {
       'editor/placeholder': () => {
         return 'some cool placeholder'
       },
-      'editor/editPending': () => false,
     }
     const store = new Vuex.Store({
       getters,
diff --git a/webapp/components/CommentForm/CommentForm.vue b/webapp/components/CommentForm/CommentForm.vue
index 8439165d4..935784c28 100644
--- a/webapp/components/CommentForm/CommentForm.vue
+++ b/webapp/components/CommentForm/CommentForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <ds-form v-show="!editPending" v-model="form" @submit="handleSubmit">
+  <ds-form v-model="form" @submit="handleSubmit">
     <template slot-scope="{ errors }">
       <ds-card>
         <hc-editor
@@ -30,7 +30,6 @@
 
 <script>
 import gql from 'graphql-tag'
-import { mapGetters } from 'vuex'
 import HcEditor from '~/components/Editor/Editor'
 import PostQuery from '~/graphql/PostQuery'
 import CommentMutations from '~/graphql/CommentMutations'
@@ -52,11 +51,6 @@ export default {
       users: [],
     }
   },
-  computed: {
-    ...mapGetters({
-      editPending: 'editor/editPending',
-    }),
-  },
   methods: {
     updateEditorContent(value) {
       const content = value.replace(/<(?:.|\n)*?>/gm, '').trim()
diff --git a/webapp/components/EditCommentForm/EditCommentForm.vue b/webapp/components/EditCommentForm/EditCommentForm.vue
index 2d20dc821..34e45a8b8 100644
--- a/webapp/components/EditCommentForm/EditCommentForm.vue
+++ b/webapp/components/EditCommentForm/EditCommentForm.vue
@@ -8,14 +8,19 @@
         <ds-flex :gutter="{ base: 'small', md: 'small', sm: 'x-large', xs: 'x-large' }">
           <ds-flex-item :width="{ base: '0%', md: '50%', sm: '0%', xs: '0%' }" />
           <ds-flex-item :width="{ base: '40%', md: '20%', sm: '30%', xs: '30%' }">
-            <ds-button ghost class="cancelBtn" @click.prevent="closeEditWindow">
-              {{ $t('actions.cancel') }}
-            </ds-button>
+            <ds-button
+              ghost
+              class="cancelBtn"
+              @click.prevent="closeEditWindow"
+            >{{ $t('actions.cancel') }}</ds-button>
           </ds-flex-item>
           <ds-flex-item :width="{ base: '40%', md: '20%', sm: '40%', xs: '40%' }">
-            <ds-button type="submit" :loading="loading" :disabled="disabled || errors" primary>
-              {{ $t('post.comment.submit') }}
-            </ds-button>
+            <ds-button
+              type="submit"
+              :loading="loading"
+              :disabled="disabled || errors"
+              primary
+            >{{ $t('post.comment.submit') }}</ds-button>
           </ds-flex-item>
         </ds-flex>
       </ds-card>
@@ -26,7 +31,6 @@
 <script>
 import gql from 'graphql-tag'
 import HcEditor from '~/components/Editor/Editor'
-import { mapMutations } from 'vuex'
 import CommentMutations from '~/graphql/CommentMutations.js'
 
 export default {
@@ -52,9 +56,6 @@ export default {
     }
   },
   methods: {
-    ...mapMutations({
-      setEditPending: 'editor/SET_EDIT_PENDING',
-    }),
     updateEditorContent(value) {
       const sanitizedContent = value.replace(/<(?:.|\n)*?>/gm, '').trim()
       this.disabled = value === this.comment.content || sanitizedContent.length < 1
@@ -79,8 +80,7 @@ export default {
 
           this.$toast.success(this.$t('post.comment.updated'))
           this.disabled = false
-          this.$emit('showEditCommentMenu', false)
-          this.setEditPending(false)
+          this.closeEditWindow()
         })
         .catch(err => {
           this.$toast.error(err.message)
diff --git a/webapp/store/editor.js b/webapp/store/editor.js
index cbf9d9289..9c5f665a0 100644
--- a/webapp/store/editor.js
+++ b/webapp/store/editor.js
@@ -1,7 +1,6 @@
 export const state = () => {
   return {
     placeholder: null,
-    editPending: false,
   }
 }
 
@@ -9,16 +8,10 @@ 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
-  },
 }

From 3f4e7171635e71c37d54472f68278777ef752863 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 9 Sep 2019 10:58:10 +0200
Subject: [PATCH 2/6] Move user queries to `graphql/User.js`

---
 webapp/components/CommentForm/CommentForm.vue | 13 ++-------
 .../EditCommentForm/EditCommentForm.vue       | 28 ++++++-------------
 webapp/graphql/User.js                        | 13 +++++++++
 3 files changed, 23 insertions(+), 31 deletions(-)

diff --git a/webapp/components/CommentForm/CommentForm.vue b/webapp/components/CommentForm/CommentForm.vue
index 935784c28..765bb22af 100644
--- a/webapp/components/CommentForm/CommentForm.vue
+++ b/webapp/components/CommentForm/CommentForm.vue
@@ -29,8 +29,8 @@
 </template>
 
 <script>
-import gql from 'graphql-tag'
 import HcEditor from '~/components/Editor/Editor'
+import { minimisedUserQuery } from '~/graphql/User'
 import PostQuery from '~/graphql/PostQuery'
 import CommentMutations from '~/graphql/CommentMutations'
 
@@ -97,16 +97,7 @@ export default {
   apollo: {
     User: {
       query() {
-        return gql`
-          {
-            User(orderBy: slug_asc) {
-              id
-              slug
-              name
-              avatar
-            }
-          }
-        `
+        return minimisedUserQuery()
       },
       result(result) {
         this.users = result.data.User
diff --git a/webapp/components/EditCommentForm/EditCommentForm.vue b/webapp/components/EditCommentForm/EditCommentForm.vue
index 34e45a8b8..8b586fbc0 100644
--- a/webapp/components/EditCommentForm/EditCommentForm.vue
+++ b/webapp/components/EditCommentForm/EditCommentForm.vue
@@ -8,19 +8,14 @@
         <ds-flex :gutter="{ base: 'small', md: 'small', sm: 'x-large', xs: 'x-large' }">
           <ds-flex-item :width="{ base: '0%', md: '50%', sm: '0%', xs: '0%' }" />
           <ds-flex-item :width="{ base: '40%', md: '20%', sm: '30%', xs: '30%' }">
-            <ds-button
-              ghost
-              class="cancelBtn"
-              @click.prevent="closeEditWindow"
-            >{{ $t('actions.cancel') }}</ds-button>
+            <ds-button ghost class="cancelBtn" @click.prevent="closeEditWindow">
+              {{ $t('actions.cancel') }}
+            </ds-button>
           </ds-flex-item>
           <ds-flex-item :width="{ base: '40%', md: '20%', sm: '40%', xs: '40%' }">
-            <ds-button
-              type="submit"
-              :loading="loading"
-              :disabled="disabled || errors"
-              primary
-            >{{ $t('post.comment.submit') }}</ds-button>
+            <ds-button type="submit" :loading="loading" :disabled="disabled || errors" primary>
+              {{ $t('post.comment.submit') }}
+            </ds-button>
           </ds-flex-item>
         </ds-flex>
       </ds-card>
@@ -29,8 +24,8 @@
 </template>
 
 <script>
-import gql from 'graphql-tag'
 import HcEditor from '~/components/Editor/Editor'
+import { minimisedUserQuery } from '~/graphql/User'
 import CommentMutations from '~/graphql/CommentMutations.js'
 
 export default {
@@ -90,14 +85,7 @@ export default {
   apollo: {
     User: {
       query() {
-        return gql`
-          {
-            User(orderBy: slug_asc) {
-              id
-              slug
-            }
-          }
-        `
+        return minimisedUserQuery()
       },
       result({ data: { User } }) {
         this.users = User
diff --git a/webapp/graphql/User.js b/webapp/graphql/User.js
index 37551364e..3bf106991 100644
--- a/webapp/graphql/User.js
+++ b/webapp/graphql/User.js
@@ -77,6 +77,19 @@ export default i18n => {
   `
 }
 
+export const minimisedUserQuery = () => {
+  return gql`
+    query {
+      User(orderBy: slug_asc) {
+        id
+        slug
+        name
+        avatar
+      }
+    }
+  `
+}
+
 export const notificationQuery = i18n => {
   const lang = i18n.locale().toUpperCase()
   return gql`

From 9f203cda3bc7acbd1fd16fb6ab4b8a580fce0a14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 9 Sep 2019 13:03:43 +0200
Subject: [PATCH 3/6] Refactor by melting `EditCommentForm.vue` into
 `CommentForm.vue`

---
 webapp/components/Comment.vue                 |  9 +-
 .../CommentForm/CommentForm.spec.js           |  3 +
 webapp/components/CommentForm/CommentForm.vue | 82 ++++++++++++----
 .../EditCommentForm/EditCommentForm.vue       | 96 -------------------
 webapp/constants/comment.js                   |  1 +
 webapp/plugins/vue-filters.js                 |  9 +-
 6 files changed, 76 insertions(+), 124 deletions(-)
 delete mode 100644 webapp/components/EditCommentForm/EditCommentForm.vue
 create mode 100644 webapp/constants/comment.js

diff --git a/webapp/components/Comment.vue b/webapp/components/Comment.vue
index fbb39c094..4d71025f9 100644
--- a/webapp/components/Comment.vue
+++ b/webapp/components/Comment.vue
@@ -29,9 +29,10 @@
 
       <ds-space margin-bottom="small" />
       <div v-if="openEditCommentMenu">
-        <hc-edit-comment-form
-          :comment="comment"
+        <hc-comment-form
+          :update="true"
           :post="post"
+          :comment="comment"
           @showEditCommentMenu="editCommentMenu"
         />
       </div>
@@ -62,7 +63,7 @@ import { mapGetters } from 'vuex'
 import HcUser from '~/components/User/User'
 import ContentMenu from '~/components/ContentMenu'
 import ContentViewer from '~/components/Editor/ContentViewer'
-import HcEditCommentForm from '~/components/EditCommentForm/EditCommentForm'
+import HcCommentForm from '~/components/CommentForm/CommentForm'
 import CommentMutations from '~/graphql/CommentMutations'
 
 export default {
@@ -76,7 +77,7 @@ export default {
     HcUser,
     ContentMenu,
     ContentViewer,
-    HcEditCommentForm,
+    HcCommentForm,
   },
   props: {
     post: { type: Object, default: () => {} },
diff --git a/webapp/components/CommentForm/CommentForm.spec.js b/webapp/components/CommentForm/CommentForm.spec.js
index 594c6e45b..964730b5f 100644
--- a/webapp/components/CommentForm/CommentForm.spec.js
+++ b/webapp/components/CommentForm/CommentForm.spec.js
@@ -41,6 +41,9 @@ describe('CommentForm.vue', () => {
         error: jest.fn(),
         success: jest.fn(),
       },
+      $filters: {
+        removeHtml: a => a,
+      },
     }
     propsData = {
       post: {
diff --git a/webapp/components/CommentForm/CommentForm.vue b/webapp/components/CommentForm/CommentForm.vue
index 765bb22af..5712536a6 100644
--- a/webapp/components/CommentForm/CommentForm.vue
+++ b/webapp/components/CommentForm/CommentForm.vue
@@ -2,18 +2,18 @@
   <ds-form v-model="form" @submit="handleSubmit">
     <template slot-scope="{ errors }">
       <ds-card>
-        <hc-editor
-          ref="editor"
-          :users="users"
-          :hashtags="null"
-          :value="form.content"
-          @input="updateEditorContent"
-        />
+        <!-- with client-only the content is not shown -->
+        <hc-editor ref="editor" :users="users" :value="form.content" @input="updateEditorContent" />
         <ds-space />
         <ds-flex :gutter="{ base: 'small', md: 'small', sm: 'x-large', xs: 'x-large' }">
           <ds-flex-item :width="{ base: '0%', md: '50%', sm: '0%', xs: '0%' }" />
           <ds-flex-item :width="{ base: '40%', md: '20%', sm: '30%', xs: '30%' }">
-            <ds-button :disabled="disabled" ghost class="cancelBtn" @click.prevent="clear">
+            <ds-button
+              :disabled="disabled && !update"
+              ghost
+              class="cancelBtn"
+              @click.prevent="handleCancel"
+            >
               {{ $t('actions.cancel') }}
             </ds-button>
           </ds-flex-item>
@@ -30,6 +30,7 @@
 
 <script>
 import HcEditor from '~/components/Editor/Editor'
+import { COMMENT_MIN_LENGTH } from '../../constants/comment'
 import { minimisedUserQuery } from '~/graphql/User'
 import PostQuery from '~/graphql/PostQuery'
 import CommentMutations from '~/graphql/CommentMutations'
@@ -39,36 +40,55 @@ export default {
     HcEditor,
   },
   props: {
+    update: { type: Boolean, default: () => false },
     post: { type: Object, default: () => {} },
+    comment: {
+      type: Object,
+      default: () => {},
+    },
   },
   data() {
     return {
       disabled: true,
       loading: false,
       form: {
-        content: '',
+        content: !this.update || !this.comment.content ? '' : this.comment.content,
       },
       users: [],
     }
   },
   methods: {
     updateEditorContent(value) {
-      const content = value.replace(/<(?:.|\n)*?>/gm, '').trim()
-      if (content.length < 1) {
-        this.disabled = true
+      const sanitizedContent = this.$filters.removeHtml(value, false)
+      if (!this.update) {
+        if (sanitizedContent.length < COMMENT_MIN_LENGTH) {
+          this.disabled = true
+        } else {
+          this.disabled = false
+        }
       } else {
-        this.disabled = false
+        this.disabled =
+          value === this.comment.content || sanitizedContent.length < COMMENT_MIN_LENGTH
       }
       this.form.content = value
     },
     clear() {
       this.$refs.editor.clear()
     },
+    closeEditWindow() {
+      this.$emit('showEditCommentMenu', false)
+    },
+    handleCancel() {
+      if (!this.update) {
+        this.clear()
+      } else {
+        this.closeEditWindow()
+      }
+    },
     handleSubmit() {
-      this.loading = true
-      this.disabled = true
-      this.$apollo
-        .mutate({
+      let mutateParams
+      if (!this.update) {
+        mutateParams = {
           mutation: CommentMutations(this.$i18n).CreateComment,
           variables: {
             postId: this.post.id,
@@ -82,12 +102,32 @@ export default {
             data.Post[0].comments.push(CreateComment)
             await store.writeQuery({ query: PostQuery(this.$i18n), data })
           },
-        })
+        }
+      } else {
+        mutateParams = {
+          mutation: CommentMutations(this.$i18n).UpdateComment,
+          variables: {
+            content: this.form.content,
+            id: this.comment.id,
+          },
+        }
+      }
+
+      this.loading = true
+      this.disabled = true
+      this.$apollo
+        .mutate(mutateParams)
         .then(res => {
           this.loading = false
-          this.clear()
-          this.$toast.success(this.$t('post.comment.submitted'))
-          this.disabled = false
+          if (!this.update) {
+            this.clear()
+            this.$toast.success(this.$t('post.comment.submitted'))
+            this.disabled = false
+          } else {
+            this.$toast.success(this.$t('post.comment.updated'))
+            this.disabled = false
+            this.closeEditWindow()
+          }
         })
         .catch(err => {
           this.$toast.error(err.message)
diff --git a/webapp/components/EditCommentForm/EditCommentForm.vue b/webapp/components/EditCommentForm/EditCommentForm.vue
deleted file mode 100644
index 8b586fbc0..000000000
--- a/webapp/components/EditCommentForm/EditCommentForm.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-  <ds-form v-model="form" @submit="handleSubmit">
-    <template slot-scope="{ errors }">
-      <ds-card>
-        <!-- with client-only the content is not shown -->
-        <hc-editor ref="editor" :users="users" :value="form.content" @input="updateEditorContent" />
-        <ds-space />
-        <ds-flex :gutter="{ base: 'small', md: 'small', sm: 'x-large', xs: 'x-large' }">
-          <ds-flex-item :width="{ base: '0%', md: '50%', sm: '0%', xs: '0%' }" />
-          <ds-flex-item :width="{ base: '40%', md: '20%', sm: '30%', xs: '30%' }">
-            <ds-button ghost class="cancelBtn" @click.prevent="closeEditWindow">
-              {{ $t('actions.cancel') }}
-            </ds-button>
-          </ds-flex-item>
-          <ds-flex-item :width="{ base: '40%', md: '20%', sm: '40%', xs: '40%' }">
-            <ds-button type="submit" :loading="loading" :disabled="disabled || errors" primary>
-              {{ $t('post.comment.submit') }}
-            </ds-button>
-          </ds-flex-item>
-        </ds-flex>
-      </ds-card>
-    </template>
-  </ds-form>
-</template>
-
-<script>
-import HcEditor from '~/components/Editor/Editor'
-import { minimisedUserQuery } from '~/graphql/User'
-import CommentMutations from '~/graphql/CommentMutations.js'
-
-export default {
-  components: {
-    HcEditor,
-  },
-  props: {
-    comment: {
-      type: Object,
-      default() {
-        return {}
-      },
-    },
-  },
-  data() {
-    return {
-      disabled: true,
-      loading: false,
-      form: {
-        content: this.comment.content,
-      },
-      users: [],
-    }
-  },
-  methods: {
-    updateEditorContent(value) {
-      const sanitizedContent = value.replace(/<(?:.|\n)*?>/gm, '').trim()
-      this.disabled = value === this.comment.content || sanitizedContent.length < 1
-      this.form.content = value
-    },
-    closeEditWindow() {
-      this.$emit('showEditCommentMenu', false)
-    },
-    handleSubmit() {
-      this.loading = true
-      this.disabled = true
-      this.$apollo
-        .mutate({
-          mutation: CommentMutations(this.$i18n).UpdateComment,
-          variables: {
-            content: this.form.content,
-            id: this.comment.id,
-          },
-        })
-        .then(() => {
-          this.loading = false
-
-          this.$toast.success(this.$t('post.comment.updated'))
-          this.disabled = false
-          this.closeEditWindow()
-        })
-        .catch(err => {
-          this.$toast.error(err.message)
-        })
-    },
-  },
-  apollo: {
-    User: {
-      query() {
-        return minimisedUserQuery()
-      },
-      result({ data: { User } }) {
-        this.users = User
-      },
-    },
-  },
-}
-</script>
diff --git a/webapp/constants/comment.js b/webapp/constants/comment.js
new file mode 100644
index 000000000..bab79ad37
--- /dev/null
+++ b/webapp/constants/comment.js
@@ -0,0 +1 @@
+export const COMMENT_MIN_LENGTH = 1
diff --git a/webapp/plugins/vue-filters.js b/webapp/plugins/vue-filters.js
index 2001ee67b..f0b40de93 100644
--- a/webapp/plugins/vue-filters.js
+++ b/webapp/plugins/vue-filters.js
@@ -83,10 +83,13 @@ export default ({ app = {} }) => {
 
       return excerpt
     },
-    removeHtml: content => {
+    removeHtml: (content, replaceLinebreaks = true) => {
       if (!content) return ''
-      // replace linebreaks with spaces first
-      let contentExcerpt = content.replace(/<br>/gim, ' ').trim()
+      let contentExcerpt = content
+      if (replaceLinebreaks) {
+        // replace linebreaks with spaces first
+        contentExcerpt = contentExcerpt.replace(/<br>/gim, ' ').trim()
+      }
       // remove the rest of the HTML
       contentExcerpt = contentExcerpt.replace(/<(?:.|\n)*?>/gm, '').trim()
 

From 2c732bfbfb17809928959d8fef82350d4a5698db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 9 Sep 2019 15:53:50 +0200
Subject: [PATCH 4/6] Refactor create and update comment to emit events

---
 webapp/components/Comment.vue                 |  5 ++++-
 webapp/components/CommentForm/CommentForm.vue | 19 +++++++++----------
 webapp/components/CommentList/CommentList.vue |  7 ++++---
 webapp/pages/post/_id/_slug/index.vue         |  5 ++++-
 4 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/webapp/components/Comment.vue b/webapp/components/Comment.vue
index 4d71025f9..2ce4d9933 100644
--- a/webapp/components/Comment.vue
+++ b/webapp/components/Comment.vue
@@ -34,6 +34,7 @@
           :post="post"
           :comment="comment"
           @showEditCommentMenu="editCommentMenu"
+          @updateComment="updateComment"
         />
       </div>
       <div v-show="!openEditCommentMenu">
@@ -131,9 +132,11 @@ export default {
       return this.user.id === id
     },
     editCommentMenu(showMenu) {
-      console.log('editCommentMenu, showMenu: ', showMenu)
       this.openEditCommentMenu = showMenu
     },
+    async updateComment(comment) {
+      this.$emit('updateComment', comment)
+    },
     async deleteCommentCallback() {
       try {
         const {
diff --git a/webapp/components/CommentForm/CommentForm.vue b/webapp/components/CommentForm/CommentForm.vue
index 5712536a6..6f1c7d931 100644
--- a/webapp/components/CommentForm/CommentForm.vue
+++ b/webapp/components/CommentForm/CommentForm.vue
@@ -32,7 +32,6 @@
 import HcEditor from '~/components/Editor/Editor'
 import { COMMENT_MIN_LENGTH } from '../../constants/comment'
 import { minimisedUserQuery } from '~/graphql/User'
-import PostQuery from '~/graphql/PostQuery'
 import CommentMutations from '~/graphql/CommentMutations'
 
 export default {
@@ -94,21 +93,13 @@ export default {
             postId: this.post.id,
             content: this.form.content,
           },
-          update: async (store, { data: { CreateComment } }) => {
-            const data = await store.readQuery({
-              query: PostQuery(this.$i18n),
-              variables: { id: this.post.id },
-            })
-            data.Post[0].comments.push(CreateComment)
-            await store.writeQuery({ query: PostQuery(this.$i18n), data })
-          },
         }
       } else {
         mutateParams = {
           mutation: CommentMutations(this.$i18n).UpdateComment,
           variables: {
-            content: this.form.content,
             id: this.comment.id,
+            content: this.form.content,
           },
         }
       }
@@ -120,10 +111,18 @@ export default {
         .then(res => {
           this.loading = false
           if (!this.update) {
+            const {
+              data: { CreateComment },
+            } = res
+            this.$emit('createComment', CreateComment)
             this.clear()
             this.$toast.success(this.$t('post.comment.submitted'))
             this.disabled = false
           } else {
+            const {
+              data: { UpdateComment },
+            } = res
+            this.$emit('updateComment', UpdateComment)
             this.$toast.success(this.$t('post.comment.updated'))
             this.disabled = false
             this.closeEditWindow()
diff --git a/webapp/components/CommentList/CommentList.vue b/webapp/components/CommentList/CommentList.vue
index 710607b94..17da8dda4 100644
--- a/webapp/components/CommentList/CommentList.vue
+++ b/webapp/components/CommentList/CommentList.vue
@@ -22,7 +22,8 @@
         :key="comment.id"
         :comment="comment"
         :post="post"
-        @deleteComment="deleteComment"
+        @deleteComment="updateCommentList"
+        @updateComment="updateCommentList"
       />
     </div>
     <hc-empty v-else name="empty" icon="messages" />
@@ -41,9 +42,9 @@ export default {
     post: { type: Object, default: () => {} },
   },
   methods: {
-    deleteComment(deleted) {
+    updateCommentList(updatedComment) {
       this.post.comments = this.post.comments.map(comment => {
-        return comment.id === deleted.id ? deleted : comment
+        return comment.id === updatedComment.id ? updatedComment : comment
       })
     },
   },
diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue
index 5e4ce758e..e888d4f9d 100644
--- a/webapp/pages/post/_id/_slug/index.vue
+++ b/webapp/pages/post/_id/_slug/index.vue
@@ -68,7 +68,7 @@
       <ds-section slot="footer">
         <hc-comment-list :post="post" />
         <ds-space margin-bottom="large" />
-        <hc-comment-form :post="post" />
+        <hc-comment-form :post="post" @createComment="createComment" />
       </ds-section>
     </ds-card>
   </transition>
@@ -151,6 +151,9 @@ export default {
         this.$toast.error(err.message)
       }
     },
+    async createComment(comment) {
+      this.post.comments.push(comment)
+    },
   },
   apollo: {
     Post: {

From 7dc5856845d061febfc32e1da9abf7e5e5f365ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 11 Sep 2019 15:13:31 +0200
Subject: [PATCH 5/6] write tests and fix minor appearing and position problems
 with context menu

---
 webapp/components/Comment.spec.js             |  36 ++-
 webapp/components/Comment.vue                 |  25 ++-
 .../CommentForm/CommentForm.spec.js           | 212 +++++++++++++-----
 3 files changed, 202 insertions(+), 71 deletions(-)

diff --git a/webapp/components/Comment.spec.js b/webapp/components/Comment.spec.js
index 375280cea..81972e501 100644
--- a/webapp/components/Comment.spec.js
+++ b/webapp/components/Comment.spec.js
@@ -33,7 +33,11 @@ describe('Comment.vue', () => {
       },
       $apollo: {
         mutate: jest.fn().mockResolvedValue({
-          data: { DeleteComment: { id: 'it-is-the-deleted-comment' } },
+          data: {
+            DeleteComment: {
+              id: 'it-is-the-deleted-comment',
+            },
+          },
         }),
       },
     }
@@ -125,7 +129,11 @@ describe('Comment.vue', () => {
 
           it('emits "deleteComment"', () => {
             expect(wrapper.emitted('deleteComment')).toEqual([
-              [{ id: 'it-is-the-deleted-comment' }],
+              [
+                {
+                  id: 'it-is-the-deleted-comment',
+                },
+              ],
             ])
           })
 
@@ -138,6 +146,30 @@ describe('Comment.vue', () => {
           })
         })
       })
+
+      describe('test update comment', () => {
+        beforeEach(() => {
+          wrapper = Wrapper()
+        })
+
+        describe('with a given comment', () => {
+          beforeEach(async () => {
+            await wrapper.vm.updateComment({
+              id: 'it-is-the-updated-comment',
+            })
+          })
+
+          it('emits "updateComment"', () => {
+            expect(wrapper.emitted('updateComment')).toEqual([
+              [
+                {
+                  id: 'it-is-the-updated-comment',
+                },
+              ],
+            ])
+          })
+        })
+      })
     })
   })
 })
diff --git a/webapp/components/Comment.vue b/webapp/components/Comment.vue
index 2ce4d9933..b7c73b84d 100644
--- a/webapp/components/Comment.vue
+++ b/webapp/components/Comment.vue
@@ -13,19 +13,20 @@
     <ds-card :id="`commentId-${comment.id}`">
       <ds-space margin-bottom="small">
         <hc-user :user="author" :date-time="comment.createdAt" />
+        <!-- Content Menu (can open Modals) -->
+        <client-only>
+          <content-menu
+            v-show="!openEditCommentMenu"
+            placement="bottom-end"
+            resource-type="comment"
+            :resource="comment"
+            :modalsData="menuModalsData"
+            style="float-right"
+            :is-owner="isAuthor(author.id)"
+            @showEditCommentMenu="editCommentMenu"
+          />
+        </client-only>
       </ds-space>
-      <!-- Content Menu (can open Modals) -->
-      <client-only>
-        <content-menu
-          placement="bottom-end"
-          resource-type="comment"
-          :resource="comment"
-          :modalsData="menuModalsData"
-          style="float-right"
-          :is-owner="isAuthor(author.id)"
-          @showEditCommentMenu="editCommentMenu"
-        />
-      </client-only>
 
       <ds-space margin-bottom="small" />
       <div v-if="openEditCommentMenu">
diff --git a/webapp/components/CommentForm/CommentForm.spec.js b/webapp/components/CommentForm/CommentForm.spec.js
index 1ab778859..94ce5aa66 100644
--- a/webapp/components/CommentForm/CommentForm.spec.js
+++ b/webapp/components/CommentForm/CommentForm.spec.js
@@ -12,8 +12,8 @@ describe('CommentForm.vue', () => {
   let mocks
   let wrapper
   let propsData
-  let cancelBtn
   let cancelMethodSpy
+  let closeMethodSpy
 
   beforeEach(() => {
     mocks = {
@@ -21,20 +21,6 @@ describe('CommentForm.vue', () => {
       $i18n: {
         locale: () => 'en',
       },
-      $apollo: {
-        mutate: jest
-          .fn()
-          .mockResolvedValueOnce({
-            data: {
-              CreateComment: {
-                contentExcerpt: 'this is a comment',
-              },
-            },
-          })
-          .mockRejectedValue({
-            message: 'Ouch!',
-          }),
-      },
       $toast: {
         error: jest.fn(),
         success: jest.fn(),
@@ -43,60 +29,172 @@ describe('CommentForm.vue', () => {
         removeHtml: a => a,
       },
     }
-    propsData = {
-      post: {
-        id: 1,
-      },
-    }
   })
 
   describe('mount', () => {
-    const Wrapper = () => {
-      return mount(CommentForm, {
-        mocks,
-        localVue,
-        propsData,
+    describe('create comment', () => {
+      beforeEach(() => {
+        mocks = {
+          ...mocks,
+          $apollo: {
+            mutate: jest
+              .fn()
+              .mockResolvedValueOnce({
+                data: {
+                  CreateComment: {
+                    contentExcerpt: 'this is a comment',
+                  },
+                },
+              })
+              .mockRejectedValue({
+                message: 'Ouch!',
+              }),
+          },
+        }
+        propsData = {
+          post: {
+            id: 'p001',
+          },
+        }
+        const Wrapper = () => {
+          return mount(CommentForm, {
+            mocks,
+            localVue,
+            propsData,
+          })
+        }
+        wrapper = Wrapper()
+        cancelMethodSpy = jest.spyOn(wrapper.vm, 'clear')
       })
-    }
 
-    beforeEach(() => {
-      wrapper = Wrapper()
-      cancelMethodSpy = jest.spyOn(wrapper.vm, 'clear')
-    })
-
-    it('calls the apollo mutation when form is submitted', async () => {
-      wrapper.vm.updateEditorContent('this is a comment')
-      await wrapper.find('form').trigger('submit')
-      expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
-    })
-
-    it('calls clear method when the cancel button is clicked', () => {
-      wrapper.vm.updateEditorContent('ok')
-      cancelBtn = wrapper.find('.cancelBtn')
-      cancelBtn.trigger('click')
-      expect(cancelMethodSpy).toHaveBeenCalledTimes(1)
-    })
-
-    describe('mutation resolves', () => {
-      beforeEach(async () => {
+      it('calls the apollo mutation when form is submitted', async () => {
         wrapper.vm.updateEditorContent('this is a comment')
-        wrapper.find('form').trigger('submit')
+        await wrapper.find('form').trigger('submit')
+        expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
       })
 
-      it('shows a success toaster', async () => {
-        await mocks.$apollo.mutate
-        expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
-      })
-
-      it('clears the editor', () => {
+      it('calls `clear` method when the cancel button is clicked', async () => {
+        wrapper.vm.updateEditorContent('ok')
+        await wrapper.find('.cancelBtn').trigger('submit')
         expect(cancelMethodSpy).toHaveBeenCalledTimes(1)
       })
 
-      describe('mutation fails', () => {
-        it('shows the error toaster', async () => {
-          await wrapper.find('form').trigger('submit')
+      describe('mutation resolves', () => {
+        beforeEach(async () => {
+          wrapper.vm.updateEditorContent('this is a comment')
+          wrapper.find('form').trigger('submit')
+        })
+
+        it('shows a success toaster', async () => {
           await mocks.$apollo.mutate
-          expect(mocks.$toast.error).toHaveBeenCalledTimes(1)
+          expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
+        })
+
+        it('clears the editor', () => {
+          expect(cancelMethodSpy).toHaveBeenCalledTimes(1)
+        })
+
+        describe('mutation fails', () => {
+          it('shows the error toaster', async () => {
+            await wrapper.find('form').trigger('submit')
+            await mocks.$apollo.mutate
+            expect(mocks.$toast.error).toHaveBeenCalledTimes(1)
+          })
+        })
+      })
+    })
+
+    describe('update comment', () => {
+      beforeEach(() => {
+        mocks = {
+          ...mocks,
+          $apollo: {
+            mutate: jest
+              .fn()
+              .mockResolvedValueOnce({
+                data: {
+                  UpdateComment: {
+                    contentExcerpt: 'this is a comment',
+                  },
+                },
+              })
+              .mockRejectedValue({
+                message: 'Ouch!',
+              }),
+          },
+        }
+        propsData = {
+          update: true,
+          comment: {
+            id: 'c001',
+          },
+        }
+        const Wrapper = () => {
+          return mount(CommentForm, {
+            mocks,
+            localVue,
+            propsData,
+          })
+        }
+        wrapper = Wrapper()
+        closeMethodSpy = jest.spyOn(wrapper.vm, 'closeEditWindow')
+      })
+
+      describe('form submitted', () => {
+        it('calls the apollo mutation', async () => {
+          wrapper.vm.updateEditorContent('this is a comment')
+          await wrapper.find('form').trigger('submit')
+          expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
+        })
+
+        it('calls `closeEditWindow` method', async () => {
+          wrapper.vm.updateEditorContent('ok')
+          await wrapper.find('form').trigger('submit')
+          expect(closeMethodSpy).toHaveBeenCalledTimes(1)
+        })
+
+        it('emits `showEditCommentMenu` event', async () => {
+          wrapper.vm.updateEditorContent('ok')
+          await wrapper.find('form').trigger('submit')
+          expect(wrapper.emitted('showEditCommentMenu')).toEqual([[false]])
+        })
+      })
+
+      describe('cancel button is clicked', () => {
+        it('calls `closeEditWindow` method', async () => {
+          wrapper.vm.updateEditorContent('ok')
+          await wrapper.find('.cancelBtn').trigger('submit')
+          expect(closeMethodSpy).toHaveBeenCalledTimes(1)
+        })
+
+        it('emits `showEditCommentMenu` event', async () => {
+          wrapper.vm.updateEditorContent('ok')
+          await wrapper.find('.cancelBtn').trigger('submit')
+          expect(wrapper.emitted('showEditCommentMenu')).toEqual([[false]])
+        })
+      })
+
+      describe('mutation resolves', () => {
+        beforeEach(async () => {
+          wrapper.vm.updateEditorContent('this is a comment')
+          wrapper.find('form').trigger('submit')
+        })
+
+        it('shows a success toaster', async () => {
+          await mocks.$apollo.mutate
+          expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
+        })
+
+        it('closes the editor', () => {
+          expect(closeMethodSpy).toHaveBeenCalledTimes(1)
+        })
+
+        describe('mutation fails', () => {
+          it('shows the error toaster', async () => {
+            await wrapper.find('form').trigger('submit')
+            await mocks.$apollo.mutate
+            expect(mocks.$toast.error).toHaveBeenCalledTimes(1)
+          })
         })
       })
     })

From 36a0844fdd79c44091b0a209b3729249e8f1ac93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Thu, 12 Sep 2019 09:30:47 +0200
Subject: [PATCH 6/6] Followed @mattwrd18 suggestion

---
 webapp/components/Comment.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/components/Comment.vue b/webapp/components/Comment.vue
index b7c73b84d..ca96c8d59 100644
--- a/webapp/components/Comment.vue
+++ b/webapp/components/Comment.vue
@@ -135,7 +135,7 @@ export default {
     editCommentMenu(showMenu) {
       this.openEditCommentMenu = showMenu
     },
-    async updateComment(comment) {
+    updateComment(comment) {
       this.$emit('updateComment', comment)
     },
     async deleteCommentCallback() {