Merge branch '260-add-comment-form' of https://github.com/Human-Connection/Human-Connection into 260-add-comment-form

backend/src/resolvers/comments.js

@@ -1,5 +1,7 @@
 import { neo4jgraphql } from 'neo4j-graphql-js'
+import { UserInputError } from 'apollo-server'
 
+const COMMENT_MIN_LENGTH = 3
 export default {
   Query: {
     CommentByPost: async (object, params, context, resolveInfo) => {
@@ -23,6 +25,11 @@ export default {
   },
   Mutation: {
     CreateComment: async (object, params, context, resolveInfo) => {
+      const content = params.content.replace(/<(?:.|\n)*?>/gm, '').trim()
+
+      if (!params.content || content.length < COMMENT_MIN_LENGTH) {
+        throw new UserInputError(`Comment must be at least ${COMMENT_MIN_LENGTH} characters long!`)
+      }
       const { postId } = params
       delete params.postId
       const comment = await neo4jgraphql(object, params, context, resolveInfo, false)

backend/src/resolvers/comments.spec.js

@@ -44,7 +44,7 @@ describe('CreateComment', () => {
       client = new GraphQLClient(host, { headers })
     })
 
-    it('creates a post', async () => {
+    it('creates a comment', async () => {
       variables = {
         postId: 'p1',
         content: 'I\'m authorised to comment'
@@ -57,5 +57,25 @@ describe('CreateComment', () => {
 
       await expect(client.request(mutation, variables)).resolves.toMatchObject(expected)
     })
+
+    it('throw an error if an empty string is sent as content', async () => {
+      variables = {
+        postId: 'p1',
+        content: '<p></p>'
+      }
+
+      await expect(client.request(mutation, variables))
+        .rejects.toThrow('Comment must be at least 3 characters long!')
+    })
+
+    it('throws an error if a comment is less than 3 characters', async () => {
+      variables = {
+        postId: 'p1',
+        content: '<p>ab</p>'
+      }
+
+      await expect(client.request(mutation, variables))
+        .rejects.toThrow('Comment must be at least 3 characters long!')
+    })
   })
 })

webapp/components/Editor/index.vue

@@ -224,7 +224,7 @@ export default {
           new ListItem(),
           new Placeholder({
             emptyNodeClass: 'is-empty',
-            emptyNodeText: 'Schreib etwas inspirerendes…'
+            emptyNodeText: this.$t('editor.placeholder')
           }),
           new History(),
           new Mention({

webapp/locales/de.json

@@ -8,6 +8,9 @@
     "moreInfo": "Was ist Human Connection?",
     "hello": "Hallo"
   },
+  "editor": {
+    "placeholder": "Schreib etwas inspirerendes…"
+  },
   "profile": {
     "name": "Mein Profil",
     "memberSince": "Mitglied seit",

webapp/locales/en.json

@@ -8,6 +8,9 @@
     "moreInfo": "What is Human Connection?",
     "hello": "Hello"
   },
+  "editor": {
+    "placeholder": "Leave your inspirational thoughts…"
+  },
   "profile": {
     "name": "My Profile",
     "memberSince": "Member since",

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

@@ -115,7 +115,6 @@
             <ds-form
               ref="commentForm"
               v-model="form"
-              :schema="formSchema"
               @submit="handleSubmit"
             >
               <template slot-scope="{ errors }">
@@ -217,9 +216,6 @@ export default {
       disabled: false,
       form: {
         content: ''
-      },
-      formSchema: {
-        content: { required: true, min: 3 }
       }
     }
   },
@@ -349,7 +345,6 @@ export default {
     },
     addComment(comment) {
       this.$apollo.queries.CommentByPost.refetch()
-      // this.post = { ...this.post, comments: [...this.post.comments, comment] }
     },
     handleSubmit() {
       const content = this.form.content