Set vuex state to reset active button

- when a user clicks on the logo or changes pages, the filter is reset, but the active button didn't update
- still a bug with the active categoryIds since it's not so easy to set the state of an array in vuex
- dry out code for toggleFilters
- fix bug where user clicks on filter by users followed, then filters for categories of those users, then clicks to remove category filter

webapp/components/FilterPosts/FilterPosts.vue

@@ -48,7 +48,7 @@ export default {
         .query({
           query: filterPosts(this.$i18n),
           variables: {
-            filter: filter,
+            filter,
             first: this.pageSize,
             offset: 0,
           },

webapp/components/FilterPosts/FilterPostsMenuItems.vue

@@ -16,7 +16,7 @@
             <ds-button
               icon="check"
               @click.stop.prevent="toggleCategory()"
-              :primary="allCategories"
+              :primary="!filteredByCategories"
             />
             <ds-flex-item>
               <label class="category-labels">{{ $t('filter-posts.categories.all') }}</label>
@@ -77,7 +77,7 @@
                 }"
                 name="filter-by-followed-authors-only"
                 icon="user-plus"
-                :primary="filteredByFollowers"
+                :primary="filteredByUsersFollowed"
                 @click="toggleOnlyFollowed"
               />
               <ds-flex-item>
@@ -93,6 +93,8 @@
   </ds-container>
 </template>
 <script>
+import { mapGetters, mapMutations } from 'vuex'
+
 export default {
   props: {
     user: { type: Object, required: true },
@@ -101,15 +103,24 @@ export default {
   data() {
     return {
       selectedCategoryIds: [],
-      allCategories: true,
       filter: {},
-      filteredByFollowers: false,
+      usersFollowedFilter: { followedBy_some: { id: this.user.id } },
     }
   },
+  computed: {
+    ...mapGetters({
+      filteredByUsersFollowed: 'default/filteredByUsersFollowed',
+      filteredByCategories: 'default/filteredByCategories',
+    }),
+  },
   methods: {
+    ...mapMutations({
+      setFilteredByFollowers: 'default/SET_FILTERED_BY_FOLLOWERS',
+      setFilteredByCategories: 'default/SET_FILTERED_BY_CATEGORIES',
+    }),
     isActive(id) {
       const index = this.selectedCategoryIds.indexOf(id)
-      if (index > -1) {
+      if (index > -1 && this.setFilteredByCategories) {
         return true
       }
       return false
@@ -117,7 +128,6 @@ export default {
     toggleCategory(id) {
       if (!id) {
         this.selectedCategoryIds = []
-        this.allCategories = true
       } else {
         const index = this.selectedCategoryIds.indexOf(id)
         if (index > -1) {
@@ -125,25 +135,28 @@ export default {
         } else {
           this.selectedCategoryIds.push(id)
         }
-        this.allCategories = false
       }
-      if (!this.selectedCategoryIds.length && this.filteredByFollowers) {
+      this.setFilteredByCategories(this.selectedCategoryIds.length)
-        delete this.filter.categories_some
+      this.toggleFilter()
-      } else if (this.filter.author) {
-        this.filter.categories_some = { id_in: this.selectedCategoryIds }
-      } else {
-        this.filter = { categories_some: { id_in: this.selectedCategoryIds } }
-      }
-      this.$emit('filterPosts', this.filter)
     },
     toggleOnlyFollowed() {
-      this.filteredByFollowers = !this.filteredByFollowers
+      this.setFilteredByFollowers(!this.filteredByUsersFollowed)
-      if (!this.selectedCategoryIds.length && !this.filteredByFollowers) {
+      this.toggleFilter()
-        this.filter = {}
+    },
-      } else if (this.filter.categories_some) {
+    toggleFilter() {
-        this.filter.author = { followedBy_some: { id: this.user.id } }
+      if (!this.filteredByUsersFollowed) {
+        this.filter = this.filteredByCategories
+          ? { categories_some: { id_in: this.selectedCategoryIds } }
+          : {}
+      } else if (this.filteredByUsersFollowed) {
+        this.filter = this.filteredByCategories
+          ? {
+              author: this.usersFollowedFilter,
+              categories_some: { id_in: this.selectedCategoryIds },
+            }
+          : { author: this.usersFollowedFilter }
       } else {
-        this.filter = { author: { followedBy_some: { id: this.user.id } } }
+        this.filter = {}
       }
       this.$emit('filterPosts', this.filter)
     },

webapp/layouts/default.vue

@@ -144,7 +144,7 @@
 </template>
 
 <script>
-import { mapGetters, mapActions } from 'vuex'
+import { mapGetters, mapActions, mapMutations } from 'vuex'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 import SearchInput from '~/components/SearchInput.vue'
 import Modal from '~/components/Modal'
@@ -231,6 +231,9 @@ export default {
       quickSearch: 'search/quickSearch',
       fetchPosts: 'posts/fetchPosts',
     }),
+    ...mapMutations({
+      setFilteredByFollowers: 'default/SET_FILTERED_BY_FOLLOWERS',
+    }),
     goToPost(item) {
       this.$nextTick(() => {
         this.$router.push({
@@ -251,6 +254,7 @@ export default {
     },
     redirectToRoot() {
       this.$router.replace('/')
+      this.setFilteredByFollowers(false)
       this.fetchPosts({ i18n: this.$i18n, filter: {} })
     },
   },

webapp/pages/index.vue

@@ -99,6 +99,8 @@ export default {
   },
   beforeDestroy() {
     this.toggleShowFilterPostsDropdown(false)
+    this.setFilteredByUserFollowed(false)
+    this.setFilteredByCategories(false)
   },
   watch: {
     Post(post) {
@@ -121,6 +123,8 @@ export default {
     ...mapMutations({
       setPosts: 'posts/SET_POSTS',
       toggleShowFilterPostsDropdown: 'default/SET_SHOW_FILTER_POSTS_DROPDOWN',
+      setFilteredByUserFollowed: 'default/SET_FILTERED_BY_FOLLOWERS',
+      setFilteredByCategories: 'default/SET_FILTERED_BY_CATEGORIES',
     }),
     changeFilterBubble(filter) {
       if (this.hashtag) {

webapp/store/default.js

@@ -1,6 +1,8 @@
 export const state = () => {
   return {
     showFilterPostsDropdown: false,
+    filteredByUsersFollowed: false,
+    filteredByCategories: false,
   }
 }
 
@@ -8,10 +10,22 @@ export const getters = {
   showFilterPostsDropdown(state) {
     return state.showFilterPostsDropdown || false
   },
+  filteredByUsersFollowed(state) {
+    return state.filteredByUsersFollowed || false
+  },
+  filteredByCategories(state) {
+    return state.filteredByCategories || false
+  },
 }
 
 export const mutations = {
   SET_SHOW_FILTER_POSTS_DROPDOWN(state, boolean) {
     state.showFilterPostsDropdown = boolean || null
   },
+  SET_FILTERED_BY_FOLLOWERS(state, boolean) {
+    state.filteredByUsersFollowed = boolean || null
+  },
+  SET_FILTERED_BY_CATEGORIES(state, boolean) {
+    state.filteredByCategories = boolean || null
+  },
 }