Fix bug with lost filter when sorting

- add filtered state to vuex, so as to maintain filter
- filter is reset when visiting other pages, so reset the active buttons in the filter posts dropdown
- maybe we want to maintain the filters between page transitions and only clear when the user requests to?

webapp/components/FilterPosts/FilterPosts.spec.js

@@ -50,14 +50,13 @@ describe('FilterPosts.vue', () => {
 
   describe('mount', () => {
     const store = new Vuex.Store({
-      state: {
-        filteredByCategories: false,
-        filteredByUsersFollowed: false,
-      },
       mutations: {
         'posts/SET_POSTS': mutations.SET_POSTS,
         'posts/SET_FILTERED_BY_CATEGORIES': mutations.SET_FILTERED_BY_CATEGORIES,
         'posts/SET_FILTERED_BY_FOLLOWERS': mutations.SET_FILTERED_BY_FOLLOWERS,
+        'posts/SET_USERS_FOLLOWED_FILTER': mutations.SET_USERS_FOLLOWED_FILTER,
+        'posts/SET_CATEGORIES_FILTER': mutations.SET_CATEGORIES_FILTER,
+        'posts/SET_SELECTED_CATEGORY_IDS': mutations.SET_SELECTED_CATEGORY_IDS,
       },
       getters: {
         'auth/user': () => {
@@ -65,6 +64,9 @@ describe('FilterPosts.vue', () => {
         },
         'posts/filteredByCategories': getters.filteredByCategories,
         'posts/filteredByUsersFollowed': getters.filteredByUsersFollowed,
+        'posts/usersFollowedFilter': getters.usersFollowedFilter,
+        'posts/categoriesFilter': getters.categoriesFilter,
+        'posts/selectedCategoryIds': getters.selectedCategoryIds,
       },
     })
     const Wrapper = () => {
@@ -72,7 +74,13 @@ describe('FilterPosts.vue', () => {
     }
 
     beforeEach(() => {
-      store.state.filteredByUsersFollowed = false
+      store.replaceState({
+        filteredByCategories: false,
+        filteredByUsersFollowed: false,
+        usersFollowedFilter: {},
+        categoriesFilter: {},
+        selectedCategoryIds: [],
+      })
       wrapper = Wrapper()
       menuToggle = wrapper.findAll('a').at(0)
       menuToggle.trigger('click')

webapp/components/FilterPosts/FilterPostsMenuItems.vue

@@ -102,21 +102,25 @@ export default {
   },
   data() {
     return {
-      selectedCategoryIds: [],
       filter: {},
-      usersFollowedFilter: { followedBy_some: { id: this.user.id } },
     }
   },
   computed: {
     ...mapGetters({
       filteredByUsersFollowed: 'posts/filteredByUsersFollowed',
       filteredByCategories: 'posts/filteredByCategories',
+      usersFollowedFilter: 'posts/usersFollowedFilter',
+      categoriesFilter: 'posts/categoriesFilter',
+      selectedCategoryIds: 'posts/selectedCategoryIds',
     }),
   },
   methods: {
     ...mapMutations({
       setFilteredByFollowers: 'posts/SET_FILTERED_BY_FOLLOWERS',
       setFilteredByCategories: 'posts/SET_FILTERED_BY_CATEGORIES',
+      setUsersFollowedFilter: 'posts/SET_USERS_FOLLOWED_FILTER',
+      setCategoriesFilter: 'posts/SET_CATEGORIES_FILTER',
+      setSelectedCategoryIds: 'posts/SET_SELECTED_CATEGORY_IDS',
     }),
     isActive(id) {
       const index = this.selectedCategoryIds.indexOf(id)
@@ -125,36 +129,31 @@ export default {
       }
       return false
     },
-    toggleCategory(id) {
+    toggleCategory(categoryId) {
-      if (!id) {
+      if (!categoryId) {
-        this.selectedCategoryIds = []
+        this.setSelectedCategoryIds([])
       } else {
-        const index = this.selectedCategoryIds.indexOf(id)
+        this.setSelectedCategoryIds(categoryId)
-        if (index > -1) {
-          this.selectedCategoryIds.splice(index, 1)
-        } else {
-          this.selectedCategoryIds.push(id)
-        }
       }
       this.setFilteredByCategories(!!this.selectedCategoryIds.length)
+      this.setCategoriesFilter({ categories_some: { id_in: this.selectedCategoryIds } })
       this.toggleFilter()
     },
     toggleOnlyFollowed() {
       this.setFilteredByFollowers(!this.filteredByUsersFollowed)
+      this.setUsersFollowedFilter({ author: { followedBy_some: { id: this.user.id } } })
       this.toggleFilter()
     },
     toggleFilter() {
-      if (!this.filteredByUsersFollowed) {
+      if (this.filteredByUsersFollowed) {
-        this.filter = this.filteredByCategories
-          ? { categories_some: { id_in: this.selectedCategoryIds } }
-          : {}
-      } else if (this.filteredByUsersFollowed) {
         this.filter = this.filteredByCategories
           ? {
-              author: this.usersFollowedFilter,
+              ...this.usersFollowedFilter,
-              categories_some: { id_in: this.selectedCategoryIds },
+              ...this.categoriesFilter,
             }
-          : { author: this.usersFollowedFilter }
+          : { ...this.usersFollowedFilter }
+      } else {
+        this.filter = this.filteredByCategories ? { ...this.categoriesFilter } : {}
       }
       this.$emit('filterPosts', this.filter)
     },

webapp/pages/index.spec.js

@@ -41,6 +41,8 @@ describe('PostIndex', () => {
         'auth/user': () => {
           return { id: 'u23' }
         },
+        'posts/usersFollowedFilter': () => {},
+        'posts/categoriesFilter': () => {},
       },
       mutations: {
         'default/SET_SHOW_FILTER_POSTS_DROPDOWN': mutations.SET_SHOW_FILTER_POSTS_DROPDOWN,

webapp/pages/index.vue

@@ -101,6 +101,8 @@ export default {
     this.toggleShowFilterPostsDropdown(false)
     this.setFilteredByUserFollowed(false)
     this.setFilteredByCategories(false)
+    this.setFilteredByUserFollowed(false)
+    this.setSelectedCategoryIds([])
   },
   watch: {
     Post(post) {
@@ -111,6 +113,8 @@ export default {
     ...mapGetters({
       currentUser: 'auth/user',
       posts: 'posts/posts',
+      usersFollowedFilter: 'posts/usersFollowedFilter',
+      categoriesFilter: 'posts/categoriesFilter',
     }),
     tags() {
       return this.posts ? this.posts.tags.map(tag => tag.name) : '-'
@@ -125,6 +129,7 @@ export default {
       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) {
@@ -137,6 +142,11 @@ export default {
       this.$apollo.queries.Post.refetch()
     },
     toggleOnlySorting(x) {
+      this.filter = {
+        ...this.usersFollowedFilter,
+        ...this.categoriesFilter,
+      }
+
       this.sortingIcon = x.icons
       this.sorting = x.order
       this.$apollo.queries.Post.refetch()

webapp/store/posts.js

@@ -5,6 +5,9 @@ export const state = () => {
     posts: [],
     filteredByUsersFollowed: false,
     filteredByCategories: false,
+    usersFollowedFilter: {},
+    categoriesFilter: {},
+    selectedCategoryIds: [],
   }
 }
 
@@ -18,6 +21,24 @@ export const mutations = {
   SET_FILTERED_BY_CATEGORIES(state, boolean) {
     state.filteredByCategories = boolean || null
   },
+  SET_USERS_FOLLOWED_FILTER(state, filter) {
+    state.usersFollowedFilter = filter || null
+  },
+  SET_CATEGORIES_FILTER(state, filter) {
+    state.categoriesFilter = filter || null
+  },
+  SET_SELECTED_CATEGORY_IDS(state, categoryId) {
+    if (!categoryId.length) {
+      state.selectedCategoryIds = []
+    } else {
+      const index = state.selectedCategoryIds.indexOf(categoryId)
+      if (index > -1) {
+        state.selectedCategoryIds.splice(index, 1)
+      } else {
+        state.selectedCategoryIds.push(categoryId)
+      }
+    }
+  },
 }
 
 export const getters = {
@@ -30,6 +51,15 @@ export const getters = {
   filteredByCategories(state) {
     return state.filteredByCategories || false
   },
+  usersFollowedFilter(state) {
+    return state.usersFollowedFilter || {}
+  },
+  categoriesFilter(state) {
+    return state.categoriesFilter || {}
+  },
+  selectedCategoryIds(state) {
+    return state.selectedCategoryIds || []
+  },
 }
 
 export const actions = {