diff --git a/webapp/components/FilterPosts/FilterPosts.spec.js b/webapp/components/FilterPosts/FilterPosts.spec.js index 202e089e5..63d12df67 100644 --- a/webapp/components/FilterPosts/FilterPosts.spec.js +++ b/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') diff --git a/webapp/components/FilterPosts/FilterPostsMenuItems.vue b/webapp/components/FilterPosts/FilterPostsMenuItems.vue index f3c930317..1d507a21f 100644 --- a/webapp/components/FilterPosts/FilterPostsMenuItems.vue +++ b/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) { - if (!id) { - this.selectedCategoryIds = [] + toggleCategory(categoryId) { + if (!categoryId) { + this.setSelectedCategoryIds([]) } else { - const index = this.selectedCategoryIds.indexOf(id) - if (index > -1) { - this.selectedCategoryIds.splice(index, 1) - } else { - this.selectedCategoryIds.push(id) - } + this.setSelectedCategoryIds(categoryId) } 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) { - this.filter = this.filteredByCategories - ? { categories_some: { id_in: this.selectedCategoryIds } } - : {} - } else if (this.filteredByUsersFollowed) { + if (this.filteredByUsersFollowed) { this.filter = this.filteredByCategories ? { - author: this.usersFollowedFilter, - categories_some: { id_in: this.selectedCategoryIds }, + ...this.usersFollowedFilter, + ...this.categoriesFilter, } - : { author: this.usersFollowedFilter } + : { ...this.usersFollowedFilter } + } else { + this.filter = this.filteredByCategories ? { ...this.categoriesFilter } : {} } this.$emit('filterPosts', this.filter) }, diff --git a/webapp/pages/index.spec.js b/webapp/pages/index.spec.js index 6178fccdb..920757d01 100644 --- a/webapp/pages/index.spec.js +++ b/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, diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue index 12d50ad8f..f9f8b2602 100644 --- a/webapp/pages/index.vue +++ b/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() diff --git a/webapp/store/posts.js b/webapp/store/posts.js index 636d1c314..54878057c 100644 --- a/webapp/store/posts.js +++ b/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 = {