Merge pull request #4134 from Ocelot-Social-Community/remove-categories

refactor: Disable Categories

backend/src/middleware/validation/validationMiddleware.js

@@ -2,8 +2,6 @@ import { UserInputError } from 'apollo-server'
 
 const COMMENT_MIN_LENGTH = 1
 const NO_POST_ERR_MESSAGE = 'Comment cannot be created without a post!'
-const NO_CATEGORIES_ERR_MESSAGE =
-  'You cannot save a post without at least one category or more than three'
 const USERNAME_MIN_LENGTH = 3
 const validateCreateComment = async (resolve, root, args, context, info) => {
   const content = args.content.replace(/<(?:.|\n)*?>/gm, '').trim()
@@ -46,20 +44,6 @@ const validateUpdateComment = async (resolve, root, args, context, info) => {
   return resolve(root, args, context, info)
 }
 
-const validatePost = async (resolve, root, args, context, info) => {
-  const { categoryIds } = args
-  if (!Array.isArray(categoryIds) || !categoryIds.length || categoryIds.length > 3) {
-    throw new UserInputError(NO_CATEGORIES_ERR_MESSAGE)
-  }
-  return resolve(root, args, context, info)
-}
-
-const validateUpdatePost = async (resolve, root, args, context, info) => {
-  const { categoryIds } = args
-  if (typeof categoryIds === 'undefined') return resolve(root, args, context, info)
-  return validatePost(resolve, root, args, context, info)
-}
-
 const validateReport = async (resolve, root, args, context, info) => {
   const { resourceId } = args
   const { user } = context
@@ -138,8 +122,6 @@ export default {
   Mutation: {
     CreateComment: validateCreateComment,
     UpdateComment: validateUpdateComment,
-    CreatePost: validatePost,
-    UpdatePost: validateUpdatePost,
     UpdateUser: validateUpdateUser,
     fileReport: validateReport,
     review: validateReview,

backend/src/middleware/validation/validationMiddleware.spec.js

@@ -30,27 +30,7 @@ const updateCommentMutation = gql`
     }
   }
 `
-const createPostMutation = gql`
-  mutation($id: ID, $title: String!, $content: String!, $language: String, $categoryIds: [ID]) {
-    CreatePost(
-      id: $id
-      title: $title
-      content: $content
-      language: $language
-      categoryIds: $categoryIds
-    ) {
-      id
-    }
-  }
-`
 
-const updatePostMutation = gql`
-  mutation($id: ID!, $title: String!, $content: String!, $categoryIds: [ID]) {
-    UpdatePost(id: $id, title: $title, content: $content, categoryIds: $categoryIds) {
-      id
-    }
-  }
-`
 const reportMutation = gql`
   mutation($resourceId: ID!, $reasonCategory: ReasonCategory!, $reasonDescription: String!) {
     fileReport(
@@ -227,104 +207,6 @@ describe('validateCreateComment', () => {
       })
     })
   })
-
-  describe('validatePost', () => {
-    let createPostVariables
-    beforeEach(async () => {
-      createPostVariables = {
-        title: 'I am  a title',
-        content: 'Some content',
-      }
-      authenticatedUser = await commentingUser.toJson()
-    })
-
-    describe('categories', () => {
-      describe('null', () => {
-        it('throws UserInputError', async () => {
-          createPostVariables = { ...createPostVariables, categoryIds: null }
-          await expect(
-            mutate({ mutation: createPostMutation, variables: createPostVariables }),
-          ).resolves.toMatchObject({
-            data: { CreatePost: null },
-            errors: [
-              {
-                message: 'You cannot save a post without at least one category or more than three',
-              },
-            ],
-          })
-        })
-      })
-
-      describe('empty', () => {
-        it('throws UserInputError', async () => {
-          createPostVariables = { ...createPostVariables, categoryIds: [] }
-          await expect(
-            mutate({ mutation: createPostMutation, variables: createPostVariables }),
-          ).resolves.toMatchObject({
-            data: { CreatePost: null },
-            errors: [
-              {
-                message: 'You cannot save a post without at least one category or more than three',
-              },
-            ],
-          })
-        })
-      })
-
-      describe('more than 3 categoryIds', () => {
-        it('throws UserInputError', async () => {
-          createPostVariables = {
-            ...createPostVariables,
-            categoryIds: ['cat9', 'cat27', 'cat15', 'cat4'],
-          }
-          await expect(
-            mutate({ mutation: createPostMutation, variables: createPostVariables }),
-          ).resolves.toMatchObject({
-            data: { CreatePost: null },
-            errors: [
-              {
-                message: 'You cannot save a post without at least one category or more than three',
-              },
-            ],
-          })
-        })
-      })
-    })
-  })
-
-  describe('validateUpdatePost', () => {
-    describe('post created without categories somehow', () => {
-      let owner, updatePostVariables
-      beforeEach(async () => {
-        const postSomehowCreated = await neode.create('Post', {
-          id: 'how-was-this-created',
-        })
-        owner = await neode.create('User', {
-          id: 'author-of-post-without-category',
-          slug: 'hacker',
-        })
-        await postSomehowCreated.relateTo(owner, 'author')
-        authenticatedUser = await owner.toJson()
-        updatePostVariables = {
-          id: 'how-was-this-created',
-          title: 'I am  a title',
-          content: 'Some content',
-          categoryIds: [],
-        }
-      })
-
-      it('requires at least one category for successful update', async () => {
-        await expect(
-          mutate({ mutation: updatePostMutation, variables: updatePostVariables }),
-        ).resolves.toMatchObject({
-          data: { UpdatePost: null },
-          errors: [
-            { message: 'You cannot save a post without at least one category or more than three' },
-          ],
-        })
-      })
-    })
-  })
 })
 
 describe('validateReport', () => {

backend/src/schema/resolvers/posts.js

@@ -76,7 +76,6 @@ export default {
   },
   Mutation: {
     CreatePost: async (_parent, params, context, _resolveInfo) => {
-      const { categoryIds } = params
       const { image: imageInput } = params
       delete params.categoryIds
       delete params.image
@@ -92,13 +91,9 @@ export default {
             WITH post
             MATCH (author:User {id: $userId})
             MERGE (post)<-[:WROTE]-(author)
-            WITH post
-            UNWIND $categoryIds AS categoryId
-            MATCH (category:Category {id: categoryId})
-            MERGE (post)-[:CATEGORIZED]->(category)
             RETURN post {.*}
           `,
-          { userId: context.user.id, categoryIds, params },
+          { userId: context.user.id, params },
         )
         const [post] = createPostTransactionResponse.records.map((record) => record.get('post'))
         if (imageInput) {

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

@@ -136,7 +136,7 @@ type Post {
       """
     )
   tags: [Tag]! @relation(name: "TAGGED", direction: "OUT")
-  categories: [Category]! @relation(name: "CATEGORIZED", direction: "OUT")
+  categories: [Category] @relation(name: "CATEGORIZED", direction: "OUT")
 
   comments: [Comment]! @relation(name: "COMMENTS", direction: "IN")
   commentsCount: Int!

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

@@ -107,7 +107,7 @@ type User {
   shouted: [Post]! @relation(name: "SHOUTED", direction: "OUT")
   shoutedCount: Int! @cypher(statement: "MATCH (this)-[:SHOUTED]->(r:Post) WHERE NOT r.deleted = true AND NOT r.disabled = true RETURN COUNT(DISTINCT r)")
 
-  categories: [Category]! @relation(name: "CATEGORIZED", direction: "OUT")
+  categories: [Category] @relation(name: "CATEGORIZED", direction: "OUT")
 
   badges: [Badge]! @relation(name: "REWARDED", direction: "IN")
   badgesCount: Int! @cypher(statement: "MATCH (this)<-[:REWARDED]-(r:Badge) RETURN COUNT(r)")

webapp/components/ContributionForm/ContributionForm.spec.js

@@ -4,7 +4,6 @@ import ContributionForm from './ContributionForm.vue'
 import Vue from 'vue'
 import Vuex from 'vuex'
 import PostMutations from '~/graphql/PostMutations.js'
-import CategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
 
 import ImageUploader from '~/components/ImageUploader/ImageUploader'
 import MutationObserver from 'mutation-observer'
@@ -17,34 +16,6 @@ config.stubs['client-only'] = '<span><slot /></span>'
 config.stubs['nuxt-link'] = '<span><slot /></span>'
 config.stubs['v-popover'] = '<span><slot /></span>'
 
-const categories = [
-  {
-    id: 'cat3',
-    slug: 'health-wellbeing',
-    icon: 'medkit',
-  },
-  {
-    id: 'cat12',
-    slug: 'it-internet-data-privacy',
-    icon: 'mouse-pointer',
-  },
-  {
-    id: 'cat9',
-    slug: 'democracy-politics',
-    icon: 'university',
-  },
-  {
-    id: 'cat15',
-    slug: 'consumption-sustainability',
-    icon: 'shopping-cart',
-  },
-  {
-    id: 'cat4',
-    slug: 'environment-nature',
-    icon: 'tree',
-  },
-]
-
 describe('ContributionForm.vue', () => {
   let wrapper,
     postTitleInput,
@@ -54,8 +25,7 @@ describe('ContributionForm.vue', () => {
     propsData,
     categoryIds,
     englishLanguage,
-    deutschLanguage,
-    dataPrivacyButton
+    deutschLanguage
   const postTitle = 'this is a title for a post'
   const postTitleTooShort = 'xx'
   let postTitleTooLong = ''
@@ -136,7 +106,6 @@ describe('ContributionForm.vue', () => {
     describe('CreatePost', () => {
       describe('invalid form submission', () => {
         beforeEach(async () => {
-          wrapper.find(CategoriesSelect).setData({ categories })
           postTitleInput = wrapper.find('.ds-input')
           postTitleInput.setValue(postTitle)
           await wrapper.vm.updateEditorContent(postContent)
@@ -144,10 +113,6 @@ describe('ContributionForm.vue', () => {
             .findAll('li')
             .filter((language) => language.text() === 'English')
           englishLanguage.trigger('click')
-          dataPrivacyButton = await wrapper
-            .find(CategoriesSelect)
-            .find('[data-test="category-buttons-cat12"]')
-          dataPrivacyButton.trigger('click')
         })
 
         it('title cannot be empty', async () => {
@@ -173,22 +138,6 @@ describe('ContributionForm.vue', () => {
           await wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
         })
-
-        it('has at least one category', async () => {
-          dataPrivacyButton = await wrapper
-            .find(CategoriesSelect)
-            .find('[data-test="category-buttons-cat12"]')
-          dataPrivacyButton.trigger('click')
-          wrapper.find('form').trigger('submit')
-          expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
-        })
-
-        it('has no more than three categories', async () => {
-          wrapper.vm.formData.categoryIds = ['cat4', 'cat9', 'cat15', 'cat27']
-          await Vue.nextTick()
-          wrapper.find('form').trigger('submit')
-          expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
-        })
       })
 
       describe('valid form submission', () => {
@@ -200,23 +149,17 @@ describe('ContributionForm.vue', () => {
               content: postContent,
               language: 'en',
               id: null,
-              categoryIds: ['cat12'],
               image: null,
             },
           }
           postTitleInput = wrapper.find('.ds-input')
           postTitleInput.setValue(postTitle)
           await wrapper.vm.updateEditorContent(postContent)
-          wrapper.find(CategoriesSelect).setData({ categories })
           englishLanguage = wrapper
             .findAll('li')
             .filter((language) => language.text() === 'English')
           englishLanguage.trigger('click')
           await Vue.nextTick()
-          dataPrivacyButton = await wrapper
-            .find(CategoriesSelect)
-            .find('[data-test="category-buttons-cat12"]')
-          dataPrivacyButton.trigger('click')
           await Vue.nextTick()
         })
 
@@ -293,16 +236,11 @@ describe('ContributionForm.vue', () => {
           postTitleInput.setValue(postTitle)
           await wrapper.vm.updateEditorContent(postContent)
           categoryIds = ['cat12']
-          wrapper.find(CategoriesSelect).setData({ categories })
           englishLanguage = wrapper
             .findAll('li')
             .filter((language) => language.text() === 'English')
           englishLanguage.trigger('click')
           await Vue.nextTick()
-          dataPrivacyButton = await wrapper
-            .find(CategoriesSelect)
-            .find('[data-test="category-buttons-cat12"]')
-          dataPrivacyButton.trigger('click')
           await Vue.nextTick()
         })
 
@@ -365,7 +303,6 @@ describe('ContributionForm.vue', () => {
               content: propsData.contribution.content,
               language: propsData.contribution.language,
               id: propsData.contribution.id,
-              categoryIds: ['cat12'],
               image: {
                 sensitive: false,
               },
@@ -380,18 +317,6 @@ describe('ContributionForm.vue', () => {
           expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
         })
 
-        it('supports updating categories', async () => {
-          expectedParams.variables.categoryIds.push('cat3')
-          wrapper.find(CategoriesSelect).setData({ categories })
-          await Vue.nextTick()
-          const healthWellbeingButton = await wrapper
-            .find(CategoriesSelect)
-            .find('[data-test="category-buttons-cat3"]')
-          healthWellbeingButton.trigger('click')
-          await wrapper.find('form').trigger('submit')
-          expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
-        })
-
         it('supports deleting a teaser image', async () => {
           expectedParams.variables.image = null
           propsData.contribution.image = { url: '/uploads/someimage.png' }

webapp/components/ContributionForm/ContributionForm.vue

@@ -50,11 +50,6 @@
           {{ contentLength }}
           <base-icon v-if="errors && errors.content" name="warning" />
         </ds-chip>
-        <categories-select model="categoryIds" :existingCategoryIds="formData.categoryIds" />
-        <ds-chip size="base" :color="errors && errors.categoryIds && 'danger'">
-          {{ formData.categoryIds.length }} / 3
-          <base-icon v-if="errors && errors.categoryIds" name="warning" />
-        </ds-chip>
         <ds-select
           model="language"
           icon="globe"
@@ -86,14 +81,12 @@ import { mapGetters } from 'vuex'
 import HcEditor from '~/components/Editor/Editor'
 import locales from '~/locales'
 import PostMutations from '~/graphql/PostMutations.js'
-import CategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
 import ImageUploader from '~/components/ImageUploader/ImageUploader'
 import links from '~/constants/links.js'
 
 export default {
   components: {
     HcEditor,
-    CategoriesSelect,
     ImageUploader,
   },
   props: {
@@ -103,7 +96,7 @@ export default {
     },
   },
   data() {
-    const { title, content, image, language, categories } = this.contribution
+    const { title, content, image, language } = this.contribution
 
     const languageOptions = orderBy(locales, 'name').map((locale) => {
       return { label: locale.name, value: locale.code }
@@ -119,21 +112,10 @@ export default {
         imageAspectRatio,
         imageBlurred,
         language: languageOptions.find((option) => option.value === language) || null,
-        categoryIds: categories ? categories.map((category) => category.id) : [],
       },
       formSchema: {
         title: { required: true, min: 3, max: 100 },
         content: { required: true },
-        categoryIds: {
-          type: 'array',
-          required: true,
-          validator: (_, value = []) => {
-            if (value.length === 0 || value.length > 3) {
-              return [new Error(this.$t('common.validations.categories'))]
-            }
-            return []
-          },
-        },
         language: { required: true },
         imageBlurred: { required: false },
       },
@@ -155,7 +137,7 @@ export default {
   methods: {
     submit() {
       let image = null
-      const { title, content, categoryIds } = this.formData
+      const { title, content } = this.formData
       if (this.formData.image) {
         image = {
           sensitive: this.formData.imageBlurred,
@@ -172,7 +154,6 @@ export default {
           variables: {
             title,
             content,
-            categoryIds,
             id: this.contribution.id || null,
             language: this.formData.language.value,
             image,

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

@@ -46,21 +46,6 @@
       <content-viewer class="content hyphenate-text" :content="post.content" />
       <!-- eslint-enable vue/no-v-html -->
       <ds-space margin="xx-large" />
-      <!-- Categories -->
-      <div class="categories">
-        <ds-space margin="xx-small" />
-        <hc-category
-          v-for="category in post.categories"
-          :key="category.id"
-          :icon="category.icon"
-          :name="$t(`contribution.category.name.${category.slug}`)"
-        />
-        <!-- Post language -->
-        <ds-tag v-if="post.language" class="category-tag language">
-          <base-icon name="globe" />
-          {{ post.language.toUpperCase() }}
-        </ds-tag>
-      </div>
       <ds-space margin-bottom="small" />
       <!-- Tags -->
       <div v-if="post.tags && post.tags.length" class="tags">
@@ -110,7 +95,6 @@
 
 <script>
 import ContentViewer from '~/components/Editor/ContentViewer'
-import HcCategory from '~/components/Category'
 import HcHashtag from '~/components/Hashtag/Hashtag'
 import ContentMenu from '~/components/ContentMenu/ContentMenu'
 import UserTeaser from '~/components/UserTeaser/UserTeaser'
@@ -134,7 +118,6 @@ export default {
     mode: 'out-in',
   },
   components: {
-    HcCategory,
     HcHashtag,
     UserTeaser,
     HcShoutButton,