Refactor by melting EditCommentForm.vue into CommentForm.vue

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: () => {} },

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: {

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)

webapp/components/EditCommentForm/EditCommentForm.vue

@@ -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>

webapp/constants/comment.js

@@ -0,0 +1 @@
+export const COMMENT_MIN_LENGTH = 1

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()