Merge pull request #5699 from Ocelot-Social-Community/params-for-category-filter

feat(webapp): 🍰 Params For Category Filter

webapp/pages/index.spec.js

@@ -20,6 +20,8 @@ describe('PostIndex', () => {
   beforeEach(() => {
     mutations = {
       'posts/TOGGLE_ORDER': jest.fn(),
+      'posts/RESET_CATEGORIES': jest.fn(),
+      'posts/TOGGLE_CATEGORY': jest.fn(),
     }
     store = new Vuex.Store({
       getters: {
@@ -93,6 +95,23 @@ describe('PostIndex', () => {
       wrapper.find(HashtagsFilter).vm.$emit('clearSearch')
       expect(wrapper.vm.hashtag).toBeNull()
     })
+
+    describe('category filter', () => {
+      beforeEach(() => {
+        mocks.$route.query = {
+          categoryId: 'cat3',
+        }
+        wrapper = Wrapper()
+      })
+
+      it('resets the category filter', () => {
+        expect(mutations['posts/RESET_CATEGORIES']).toBeCalled()
+      })
+
+      it('sets the category', () => {
+        expect(mutations['posts/TOGGLE_CATEGORY']).toBeCalledWith({}, 'cat3')
+      })
+    })
   })
 
   describe('mount', () => {

webapp/pages/index.vue

@@ -61,7 +61,7 @@ import HcEmpty from '~/components/Empty/Empty'
 import PostTeaser from '~/components/PostTeaser/PostTeaser.vue'
 import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
 import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
-import { mapGetters } from 'vuex'
+import { mapGetters, mapMutations } from 'vuex'
 import { DonationsQuery } from '~/graphql/Donations'
 import { filterPosts } from '~/graphql/PostQuery.js'
 import UpdateQuery from '~/components/utils/UpdateQuery'
@@ -108,9 +108,22 @@ export default {
     hasResults() {
       return this.$apollo.loading || (this.posts && this.posts.length > 0)
     },
+    categoryId() {
+      return this.$route.query && this.$route.query.categoryId ? this.$route.query.categoryId : null
+    },
   },
   watchQuery: ['hashtag'],
+  mounted() {
+    if (this.categoryId) {
+      this.resetCategories()
+      this.toggleCategory(this.categoryId)
+    }
+  },
   methods: {
+    ...mapMutations({
+      resetCategories: 'posts/RESET_CATEGORIES',
+      toggleCategory: 'posts/TOGGLE_CATEGORY',
+    }),
     clearSearch() {
       this.$router.push({ path: '/' })
       this.hashtag = null