Fix bug, maintain filters across page changes

- filter was a bit off for categories, clear the filter if there are no categories
- a user should maintain their filter until they clear it

webapp/components/FilterPosts/FilterPostsMenuItems.vue

@@ -131,29 +131,29 @@ export default {
     },
     toggleCategory(categoryId) {
       if (!categoryId) {
-        this.setSelectedCategoryIds([])
+        this.setSelectedCategoryIds()
       } else {
         this.setSelectedCategoryIds(categoryId)
       }
       this.setFilteredByCategories(!!this.selectedCategoryIds.length)
-      this.setCategoriesFilter({ categories_some: { id_in: this.selectedCategoryIds } })
+      this.setCategoriesFilter(
+        this.selectedCategoryIds.length
+          ? { categories_some: { id_in: this.selectedCategoryIds } }
+          : {},
+      )
       this.toggleFilter()
     },
     toggleOnlyFollowed() {
       this.setFilteredByFollowers(!this.filteredByUsersFollowed)
-      this.setUsersFollowedFilter({ author: { followedBy_some: { id: this.user.id } } })
+      this.setUsersFollowedFilter(
+        this.filteredByUsersFollowed ? { author: { followedBy_some: { id: this.user.id } } } : {},
+      )
       this.toggleFilter()
     },
     toggleFilter() {
-      if (this.filteredByUsersFollowed) {
-        this.filter = this.filteredByCategories
-          ? {
-              ...this.usersFollowedFilter,
-              ...this.categoriesFilter,
-            }
-          : { ...this.usersFollowedFilter }
-      } else {
-        this.filter = this.filteredByCategories ? { ...this.categoriesFilter } : {}
+      this.filter = {
+        ...this.usersFollowedFilter,
+        ...this.categoriesFilter,
       }
       this.$emit('filterPosts', this.filter)
     },

webapp/layouts/default.vue

@@ -184,6 +184,8 @@ export default {
       quickSearchResults: 'search/quickResults',
       quickSearchPending: 'search/quickPending',
       showFilterPostsDropdown: 'default/showFilterPostsDropdown',
+      usersFollowedFilter: 'posts/usersFollowedFilter',
+      categoriesFilter: 'posts/categoriesFilter',
     }),
     userName() {
       const { name } = this.user || {}
@@ -256,8 +258,14 @@ export default {
     },
     redirectToRoot() {
       this.$router.replace('/')
-      this.setFilteredByFollowers(false)
-      this.fetchPosts({ i18n: this.$i18n, filter: {} })
+      this.fetchPosts({
+        i18n: this.$i18n,
+        filter: {
+          ...this.usersFollowedFilter,
+          ...this.categoriesFilter,
+          ...this.filter,
+        },
+      })
     },
   },
   apollo: {

webapp/pages/index.vue

@@ -99,10 +99,6 @@ export default {
   },
   beforeDestroy() {
     this.toggleShowFilterPostsDropdown(false)
-    this.setFilteredByUserFollowed(false)
-    this.setFilteredByCategories(false)
-    this.setFilteredByUserFollowed(false)
-    this.setSelectedCategoryIds([])
   },
   watch: {
     Post(post) {
@@ -127,9 +123,6 @@ export default {
     ...mapMutations({
       setPosts: 'posts/SET_POSTS',
       toggleShowFilterPostsDropdown: 'default/SET_SHOW_FILTER_POSTS_DROPDOWN',
-      setFilteredByUserFollowed: 'posts/SET_FILTERED_BY_FOLLOWERS',
-      setFilteredByCategories: 'posts/SET_FILTERED_BY_CATEGORIES',
-      setSelectedCategoryIds: 'posts/SET_SELECTED_CATEGORY_IDS',
     }),
     changeFilterBubble(filter) {
       if (this.hashtag) {
@@ -201,7 +194,11 @@ export default {
       },
       variables() {
         return {
-          filter: this.filter,
+          filter: {
+            ...this.usersFollowedFilter,
+            ...this.categoriesFilter,
+            ...this.filter,
+          },
           first: this.pageSize,
           offset: 0,
           orderBy: this.sorting,

webapp/store/posts.js

@@ -28,7 +28,7 @@ export const mutations = {
     state.categoriesFilter = filter || null
   },
   SET_SELECTED_CATEGORY_IDS(state, categoryId) {
-    if (!categoryId.length) {
+    if (!categoryId) {
       state.selectedCategoryIds = []
     } else {
       const index = state.selectedCategoryIds.indexOf(categoryId)
@@ -68,7 +68,7 @@ export const actions = {
     const {
       data: { Post },
     } = await client.query({
-      query: gql(`
+      query: gql`
         query Post($filter: _PostFilter, $first: Int, $offset: Int) {
           Post(filter: $filter, first: $first, offset: $offset) {
             id
@@ -107,7 +107,7 @@ export const actions = {
             }
             shoutedCount
           }
-      }`),
+      }`,
       variables: {
         filter,
         first: 12,