diff --git a/webapp/components/FilterMenu/FilterMenu.spec.js b/webapp/components/FilterMenu/FilterMenu.spec.js index 948abb0eb..c377e1838 100644 --- a/webapp/components/FilterMenu/FilterMenu.spec.js +++ b/webapp/components/FilterMenu/FilterMenu.spec.js @@ -20,7 +20,7 @@ describe('FilterMenu.vue', () => { describe('given a user', () => { beforeEach(() => { propsData = { - hashtag: {}, + hashtag: null, } }) @@ -37,7 +37,7 @@ describe('FilterMenu.vue', () => { }) it('renders a card if there are hashtags', () => { - propsData.hashtag = { hashtag: 'Frieden' } + propsData.hashtag = 'Frieden' wrapper = Wrapper() expect(wrapper.is('.ds-card')).toBe(true) }) diff --git a/webapp/components/FilterMenu/FilterMenu.vue b/webapp/components/FilterMenu/FilterMenu.vue index 269c86250..c306588c7 100644 --- a/webapp/components/FilterMenu/FilterMenu.vue +++ b/webapp/components/FilterMenu/FilterMenu.vue @@ -28,7 +28,7 @@ diff --git a/webapp/components/FilterPosts/FilterPostsMenuItems.vue b/webapp/components/FilterPosts/FilterPostsMenuItems.vue index ab7e5d491..4db44aa41 100644 --- a/webapp/components/FilterPosts/FilterPostsMenuItems.vue +++ b/webapp/components/FilterPosts/FilterPostsMenuItems.vue @@ -15,8 +15,8 @@ @@ -40,7 +40,7 @@ @@ -78,7 +78,7 @@ name="filter-by-followed-authors-only" icon="user-plus" :primary="filteredByUsersFollowed" - @click="toggleOnlyFollowed" + @click="toggleFilteredByFollowed(user.id)" /> @@ -107,56 +107,16 @@ export default { }, computed: { ...mapGetters({ - filteredByUsersFollowed: 'posts/filteredByUsersFollowed', - filteredByCategories: 'posts/filteredByCategories', - usersFollowedFilter: 'posts/usersFollowedFilter', - categoriesFilter: 'posts/categoriesFilter', - selectedCategoryIds: 'posts/selectedCategoryIds', + filteredCategoryIds: 'postsFilter/filteredCategoryIds', + filteredByUsersFollowed: 'postsFilter/filteredByUsersFollowed', }), }, 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', + toggleFilteredByFollowed: 'postsFilter/TOGGLE_FILTER_BY_FOLLOWED', + resetCategories: 'postsFilter/RESET_CATEGORIES', + toggleCategory: 'postsFilter/TOGGLE_CATEGORY', }), - isActive(id) { - const index = this.selectedCategoryIds.indexOf(id) - if (index > -1 && this.setFilteredByCategories) { - return true - } - return false - }, - toggleCategory(categoryId) { - if (!categoryId) { - this.setSelectedCategoryIds() - } else { - this.setSelectedCategoryIds(categoryId) - } - this.setFilteredByCategories(!!this.selectedCategoryIds.length) - this.setCategoriesFilter( - this.selectedCategoryIds.length - ? { categories_some: { id_in: this.selectedCategoryIds } } - : {}, - ) - this.toggleFilter() - }, - toggleOnlyFollowed() { - this.setFilteredByFollowers(!this.filteredByUsersFollowed) - this.setUsersFollowedFilter( - this.filteredByUsersFollowed ? { author: { followedBy_some: { id: this.user.id } } } : {}, - ) - this.toggleFilter() - }, - toggleFilter() { - this.filter = { - ...this.usersFollowedFilter, - ...this.categoriesFilter, - } - this.$emit('filterPosts', this.filter) - }, }, } diff --git a/webapp/pages/index.spec.js b/webapp/pages/index.spec.js index fc2555411..805640ef6 100644 --- a/webapp/pages/index.spec.js +++ b/webapp/pages/index.spec.js @@ -26,22 +26,10 @@ describe('PostIndex', () => { beforeEach(() => { store = new Vuex.Store({ getters: { - 'posts/posts': () => { - return [ - { - id: 'p23', - name: 'It is a post', - author: { - id: 'u1', - }, - }, - ] - }, + 'postsFilter/postsFilter': () => ({}), 'auth/user': () => { return { id: 'u23' } }, - 'posts/usersFollowedFilter': () => {}, - 'posts/categoriesFilter': () => {}, }, }) mocks = { @@ -102,12 +90,6 @@ describe('PostIndex', () => { expect(wrapper.vm.hashtag).toBeNull() }) - it('calls the changeFilterBubble if there are hasthags in the route query', () => { - mocks.$route.query.hashtag = { id: 'hashtag' } - wrapper = Wrapper() - expect(mocks.$apollo.queries.Post.refetch).toHaveBeenCalledTimes(1) - }) - describe('mount', () => { beforeEach(() => { wrapper = mount(PostIndex, { @@ -125,12 +107,9 @@ describe('PostIndex', () => { expect(wrapper.vm.sorting).toEqual('createdAt_desc') }) - it('loads more posts when a user clicks on the load more button', () => { - wrapper - .findAll('button') - .at(2) - .trigger('click') - expect(mocks.$apollo.queries.Post.fetchMore).toHaveBeenCalledTimes(1) + it('updates offset when a user clicks on the load more button', () => { + wrapper.find('.load-more button').trigger('click') + expect(wrapper.vm.offset).toEqual(12) }) }) }) diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue index c85354d73..5f0e9c115 100644 --- a/webapp/pages/index.vue +++ b/webapp/pages/index.vue @@ -16,7 +16,7 @@ tag.name) : '-' - }, - offset() { - return (this.page - 1) * this.pageSize - }, - }, - methods: { - ...mapMutations({ - setPosts: 'posts/SET_POSTS', - }), - changeFilterBubble(filter) { + finalFilters() { + let filter = this.postsFilter if (this.hashtag) { filter = { ...filter, tags_some: { name: this.hashtag }, } } - this.filter = filter - this.$apollo.queries.Post.refetch() + return filter }, + }, + watch: { + postsFilter() { + this.offset = 0 + this.posts = [] + }, + }, + methods: { toggleOnlySorting(x) { - this.filter = { - ...this.usersFollowedFilter, - ...this.categoriesFilter, - } - + this.offset = 0 + this.posts = [] this.sortingIcon = x.icons this.sorting = x.order - this.$apollo.queries.Post.refetch() }, clearSearch() { this.$router.push({ path: '/' }) this.hashtag = null - delete this.filter.tags_some - this.changeFilterBubble(this.filter) - }, - uniq(items, field = 'id') { - return uniqBy(items, field) }, href(post) { return this.$router.resolve({ @@ -155,31 +130,12 @@ export default { }).href }, showMoreContributions() { - // this.page++ - // Fetch more data and transform the original result - this.page++ - this.$apollo.queries.Post.fetchMore({ - variables: { - filter: this.filter, - first: this.pageSize, - offset: this.offset, - }, - // Transform the previous result with new data - updateQuery: (previousResult, { fetchMoreResult }) => { - let output = { Post: this.Post } - output.Post = [...previousResult.Post, ...fetchMoreResult.Post] - return output - }, - fetchPolicy: 'cache-and-network', - }) + this.offset += this.pageSize }, deletePost(_index, postId) { - this.Post = this.Post.filter(post => { + this.posts = this.posts.filter(post => { return post.id !== postId }) - // Why "uniq(Post)" is used in the array for list creation? - // Ideal solution here: - // this.Post.splice(index, 1) }, }, apollo: { @@ -188,16 +144,20 @@ export default { return filterPosts(this.$i18n) }, variables() { - return { - filter: { - ...this.usersFollowedFilter, - ...this.categoriesFilter, - ...this.filter, - }, + const result = { + filter: this.finalFilters, first: this.pageSize, - offset: 0, + offset: this.offset, orderBy: this.sorting, } + return result + }, + update({ Post }) { + // TODO: find out why `update` gets called twice initially. + // We have to filter for uniq posts only because we get the same + // result set twice. + const posts = uniqBy([...this.posts, ...Post], 'id') + this.posts = posts }, fetchPolicy: 'cache-and-network', },