From 88143d7f02ccb9d4b5778c5d166c230b9cdcfbdb Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Tue, 22 Nov 2022 19:58:46 +0100
Subject: [PATCH 1/2] feat(webapp): category filter via params

---
 webapp/pages/index.vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 8b06341eb..aacdc4344 100644
--- a/webapp/pages/index.vue
+++ b/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

From 4535e5d9c5466263822397f2910ad2d673e5113b Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Tue, 22 Nov 2022 20:06:50 +0100
Subject: [PATCH 2/2] test category filter by params

---
 webapp/pages/index.spec.js | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/webapp/pages/index.spec.js b/webapp/pages/index.spec.js
index baf091d47..7b01bafc9 100644
--- a/webapp/pages/index.spec.js
+++ b/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', () => {