auto detect language. Input field in contribution form removed.

backend/src/middleware/languages/languages.js

@@ -12,17 +12,30 @@ const setPostLanguage = (text) => {
   const lngDetector = new LanguageDetect()
   lngDetector.setLanguageType('iso2')
   const result = lngDetector.detect(removeHtmlTags(text), 2)
-  return result[0][0]
+  return {
+    language: result[0][0],
+    languageScore: result[0][1],
+    secondaryLanguage: result[1][0],
+    secondaryLanguageScore: result[1][1],
+  }
 }
 
 export default {
   Mutation: {
     CreatePost: async (resolve, root, args, context, info) => {
-      args.language = await setPostLanguage(args.content)
+      const languages = await setPostLanguage(args.content)
+      args = {
+        ...args,
+        ...languages,
+      }
       return resolve(root, args, context, info)
     },
     UpdatePost: async (resolve, root, args, context, info) => {
-      args.language = await setPostLanguage(args.content)
+      const languages = await setPostLanguage(args.content)
+      args = {
+        ...args,
+        ...languages,
+      }
       return resolve(root, args, context, info)
     },
   },

backend/src/middleware/languages/languages.spec.js

@@ -25,13 +25,16 @@ beforeAll(async () => {
 })
 
 afterAll(async () => {
-  // await cleanDatabase()
+  await cleanDatabase()
 })
 
 const createPostMutation = gql`
   mutation($title: String!, $content: String!, $categoryIds: [ID]) {
     CreatePost(title: $title, content: $content, categoryIds: $categoryIds) {
       language
+      languageScore
+      secondaryLanguage
+      secondaryLanguageScore
     }
   }
 `
@@ -58,15 +61,17 @@ describe('languagesMiddleware', () => {
       ...variables,
       content: 'Jeder sollte vor seiner eigenen Tür kehren.',
     }
-    await expect(
-      mutate({
-        mutation: createPostMutation,
-        variables,
-      }),
-    ).resolves.toMatchObject({
+    const response = await mutate({
+      mutation: createPostMutation,
+      variables,
+    })
+    expect(response).toMatchObject({
       data: {
         CreatePost: {
           language: 'de',
+          languageScore: 0.5134188034188034,
+          secondaryLanguage: 'no',
+          secondaryLanguageScore: 0.3655555555555555,
         },
       },
     })
@@ -77,15 +82,17 @@ describe('languagesMiddleware', () => {
       ...variables,
       content: 'A journey of a thousand miles begins with a single step.',
     }
-    await expect(
-      mutate({
-        mutation: createPostMutation,
-        variables,
-      }),
-    ).resolves.toMatchObject({
+    const response = await mutate({
+      mutation: createPostMutation,
+      variables,
+    })
+    expect(response).toMatchObject({
       data: {
         CreatePost: {
           language: 'en',
+          languageScore: 0.3430188679245283,
+          secondaryLanguage: 'da',
+          secondaryLanguageScore: 0.19968553459119498,
         },
       },
     })
@@ -96,15 +103,17 @@ describe('languagesMiddleware', () => {
       ...variables,
       content: 'A caballo regalado, no le mires el diente.',
     }
-    await expect(
-      mutate({
-        mutation: createPostMutation,
-        variables,
-      }),
-    ).resolves.toMatchObject({
+    const response = await mutate({
+      mutation: createPostMutation,
+      variables,
+    })
+    expect(response).toMatchObject({
       data: {
         CreatePost: {
           language: 'es',
+          languageScore: 0.46589743589743593,
+          secondaryLanguage: 'pt',
+          secondaryLanguageScore: 0.3834188034188034,
         },
       },
     })
@@ -116,15 +125,17 @@ describe('languagesMiddleware', () => {
       content:
         '<strong>Jeder</strong> <strike>sollte</strike> <strong>vor</strong> <span>seiner</span> eigenen <blockquote>Tür</blockquote> kehren.',
     }
-    await expect(
-      mutate({
-        mutation: createPostMutation,
-        variables,
-      }),
-    ).resolves.toMatchObject({
+    const response = await mutate({
+      mutation: createPostMutation,
+      variables,
+    })
+    expect(response).toMatchObject({
       data: {
         CreatePost: {
           language: 'de',
+          languageScore: 0.5134188034188034,
+          secondaryLanguage: 'no',
+          secondaryLanguageScore: 0.3655555555555555,
         },
       },
     })

backend/src/schema/resolvers/posts.spec.js

@@ -317,19 +317,6 @@ describe('CreatePost', () => {
         expected,
       )
     })
-
-    describe('language', () => {
-      beforeEach(() => {
-        variables = { ...variables, language: 'es' }
-      })
-
-      it('allows a user to set the language of the post', async () => {
-        const expected = { data: { CreatePost: { language: 'es' } } }
-        await expect(mutate({ mutation: createPostMutation, variables })).resolves.toMatchObject(
-          expected,
-        )
-      })
-    })
   })
 })
 

backend/src/schema/types/type/Post.gql

@@ -122,6 +122,9 @@ type Post {
   createdAt: String
   updatedAt: String
   language: String
+  languageScore: Float
+  secondaryLanguage: String
+  secondaryLanguageScore: Float
   pinnedAt: String @cypher(
       statement: "MATCH (this)<-[pinned:PINNED]-(:User) WHERE NOT this.deleted = true AND NOT this.disabled = true RETURN pinned.createdAt"
     )

webapp/components/ContributionForm/ContributionForm.spec.js

@@ -23,9 +23,7 @@ describe('ContributionForm.vue', () => {
     cancelBtn,
     mocks,
     propsData,
-    categoryIds,
-    englishLanguage,
-    deutschLanguage
+    categoryIds
   const postTitle = 'this is a title for a post'
   const postTitleTooShort = 'xx'
   let postTitleTooLong = ''
@@ -52,7 +50,6 @@ describe('ContributionForm.vue', () => {
               slug: 'this-is-a-title-for-a-post',
               content: postContent,
               contentExcerpt: postContent,
-              language: 'en',
               categoryIds,
             },
           },
@@ -109,10 +106,6 @@ describe('ContributionForm.vue', () => {
           postTitleInput = wrapper.find('.ds-input')
           postTitleInput.setValue(postTitle)
           await wrapper.vm.updateEditorContent(postContent)
-          englishLanguage = wrapper
-            .findAll('li')
-            .filter((language) => language.text() === 'English')
-          englishLanguage.trigger('click')
         })
 
         it('title cannot be empty', async () => {
@@ -147,7 +140,6 @@ describe('ContributionForm.vue', () => {
             variables: {
               title: postTitle,
               content: postContent,
-              language: 'en',
               id: null,
               image: null,
             },
@@ -155,10 +147,6 @@ describe('ContributionForm.vue', () => {
           postTitleInput = wrapper.find('.ds-input')
           postTitleInput.setValue(postTitle)
           await wrapper.vm.updateEditorContent(postContent)
-          englishLanguage = wrapper
-            .findAll('li')
-            .filter((language) => language.text() === 'English')
-          englishLanguage.trigger('click')
           await Vue.nextTick()
           await Vue.nextTick()
         })
@@ -168,16 +156,6 @@ describe('ContributionForm.vue', () => {
           expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
         })
 
-        it('supports changing the language', async () => {
-          expectedParams.variables.language = 'de'
-          deutschLanguage = wrapper
-            .findAll('li')
-            .filter((language) => language.text() === 'Deutsch')
-          deutschLanguage.trigger('click')
-          wrapper.find('form').trigger('submit')
-          expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
-        })
-
         it('supports adding a teaser image', async () => {
           expectedParams.variables.image = {
             aspectRatio: null,
@@ -236,10 +214,6 @@ describe('ContributionForm.vue', () => {
           postTitleInput.setValue(postTitle)
           await wrapper.vm.updateEditorContent(postContent)
           categoryIds = ['cat12']
-          englishLanguage = wrapper
-            .findAll('li')
-            .filter((language) => language.text() === 'English')
-          englishLanguage.trigger('click')
           await Vue.nextTick()
           await Vue.nextTick()
         })
@@ -260,7 +234,6 @@ describe('ContributionForm.vue', () => {
             slug: 'dies-ist-ein-post',
             title: 'dies ist ein Post',
             content: 'auf Deutsch geschrieben',
-            language: 'de',
             image,
             categories: [
               {
@@ -290,7 +263,6 @@ describe('ContributionForm.vue', () => {
                 slug: 'this-is-a-title-for-a-post',
                 content: postContent,
                 contentExcerpt: postContent,
-                language: 'en',
                 categoryIds,
               },
             },
@@ -301,7 +273,6 @@ describe('ContributionForm.vue', () => {
             variables: {
               title: propsData.contribution.title,
               content: propsData.contribution.content,
-              language: propsData.contribution.language,
               id: propsData.contribution.id,
               image: {
                 sensitive: false,

webapp/components/ContributionForm/ContributionForm.vue

@@ -50,17 +50,6 @@
           {{ contentLength }}
           <base-icon v-if="errors && errors.content" name="warning" />
         </ds-chip>
-        <ds-select
-          model="language"
-          icon="globe"
-          class="select-field"
-          :options="languageOptions"
-          :placeholder="$t('contribution.languageSelectText')"
-          :label="$t('contribution.languageSelectLabel')"
-        />
-        <ds-chip v-if="errors && errors.language" size="base" color="danger">
-          <base-icon name="warning" />
-        </ds-chip>
         <div class="buttons">
           <base-button data-test="cancel-button" :disabled="loading" @click="$router.back()" danger>
             {{ $t('actions.cancel') }}
@@ -76,10 +65,8 @@
 
 <script>
 import gql from 'graphql-tag'
-import orderBy from 'lodash/orderBy'
 import { mapGetters } from 'vuex'
 import HcEditor from '~/components/Editor/Editor'
-import locales from '~/locales'
 import PostMutations from '~/graphql/PostMutations.js'
 import ImageUploader from '~/components/ImageUploader/ImageUploader'
 import links from '~/constants/links.js'
@@ -96,11 +83,7 @@ export default {
     },
   },
   data() {
-    const { title, content, image, language } = this.contribution
-
-    const languageOptions = orderBy(locales, 'name').map((locale) => {
-      return { label: locale.name, value: locale.code }
-    })
+    const { title, content, image } = this.contribution
     const { sensitive: imageBlurred = false, aspectRatio: imageAspectRatio = null } = image || {}
 
     return {
@@ -111,15 +94,12 @@ export default {
         image: image || null,
         imageAspectRatio,
         imageBlurred,
-        language: languageOptions.find((option) => option.value === language) || null,
       },
       formSchema: {
         title: { required: true, min: 3, max: 100 },
         content: { required: true },
-        language: { required: true },
         imageBlurred: { required: false },
       },
-      languageOptions,
       loading: false,
       users: [],
       hashtags: [],
@@ -155,7 +135,6 @@ export default {
             title,
             content,
             id: this.contribution.id || null,
-            language: this.formData.language.value,
             image,
           },
         })

webapp/graphql/PostMutations.js

@@ -3,20 +3,8 @@ import gql from 'graphql-tag'
 export default () => {
   return {
     CreatePost: gql`
-      mutation(
-        $title: String!
-        $content: String!
-        $language: String
-        $categoryIds: [ID]
-        $image: ImageInput
-      ) {
-        CreatePost(
-          title: $title
-          content: $content
-          language: $language
-          categoryIds: $categoryIds
-          image: $image
-        ) {
+      mutation($title: String!, $content: String!, $categoryIds: [ID], $image: ImageInput) {
+        CreatePost(title: $title, content: $content, categoryIds: $categoryIds, image: $image) {
           title
           slug
           content
@@ -34,7 +22,6 @@ export default () => {
         $id: ID!
         $title: String!
         $content: String!
-        $language: String
         $image: ImageInput
         $categoryIds: [ID]
       ) {
@@ -42,7 +29,6 @@ export default () => {
           id: $id
           title: $title
           content: $content
-          language: $language
           image: $image
           categoryIds: $categoryIds
         ) {