diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue index a39e0a148..94a9c0912 100644 --- a/webapp/layouts/default.vue +++ b/webapp/layouts/default.vue @@ -6,11 +6,7 @@ - + @@ -143,7 +139,6 @@ export default { ...mapActions({ quickSearchClear: 'search/quickClear', quickSearch: 'search/quickSearch', - refreshPosts: 'posts/refreshPosts', }), goToPost(item) { this.$nextTick(() => { diff --git a/webapp/nuxt.config.js b/webapp/nuxt.config.js index 17bb5290c..eb628c7d6 100644 --- a/webapp/nuxt.config.js +++ b/webapp/nuxt.config.js @@ -118,7 +118,7 @@ export default { { src: '~/plugins/v-tooltip.js', ssr: false }, { src: '~/plugins/izi-toast.js', ssr: false }, { src: '~/plugins/vue-filters.js' }, - { src: '~/plugins/vue-infinite-scroll.js', ssr: false }, + { src: '~/plugins/vue-infinite-loading.js', ssr: false }, ], router: { diff --git a/webapp/package.json b/webapp/package.json index 322e88817..74e4451fc 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -83,6 +83,7 @@ "v-tooltip": "~2.0.2", "validator": "^12.0.0", "vue-count-to": "~1.0.13", + "vue-infinite-loading": "^2.4.4", "vue-infinite-scroll": "^2.0.2", "vue-izitoast": "^1.2.1", "vue-scrollto": "^2.17.1", diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue index caf5d54f6..da4c2bdcd 100644 --- a/webapp/pages/index.vue +++ b/webapp/pages/index.vue @@ -16,7 +16,7 @@ @@ -97,7 +92,6 @@ export default { orderBy: 'posts/orderBy', selectedOrder: 'posts/selectedOrder', sortingIcon: 'posts/orderIcon', - currentPosts: 'posts/currentPosts', }), selected: { get() { @@ -105,7 +99,7 @@ export default { }, set({ value }) { this.offset = 0 - this.setCurrentPosts([]) + this.posts = [] this.selectOrder(value) }, }, @@ -123,13 +117,12 @@ export default { return filter }, hasResults() { - return this.$apollo.loading || (this.currentPosts && this.currentPosts.length > 0) + return this.$apollo.loading || (this.posts && this.posts.length > 0) }, }, methods: { ...mapMutations({ selectOrder: 'posts/SELECT_ORDER', - setCurrentPosts: 'posts/SET_CURRENT_POSTS', }), clearSearch() { this.$router.push({ path: '/' }) @@ -141,7 +134,7 @@ export default { params: { id: post.id, slug: post.slug }, }).href }, - showMoreContributions() { + showMoreContributions($state) { const { Post: PostQuery } = this.$apollo.queries if (!PostQuery) return // seems this can be undefined on subpages @@ -156,7 +149,9 @@ export default { updateQuery: (previousResult, { fetchMoreResult }) => { if (!fetchMoreResult || fetchMoreResult.Post.length < this.pageSize) { this.hasMore = false + $state.complete() } + const result = { ...previousResult, Post: [ @@ -168,19 +163,19 @@ export default { ...fetchMoreResult.Post, ], } - this.setCurrentPosts(result.Post) + $state.loaded() + return result }, }) }, deletePost(deletedPost) { - const posts = this.currentPosts.filter(post => { + this.posts = this.posts.filter(post => { return post.id !== deletedPost.id }) - this.setCurrentPosts(posts) }, resetPostList() { this.offset = 0 - this.setCurrentPosts([]) + this.posts = [] this.hasMore = true }, pinPost(post) { @@ -224,7 +219,7 @@ export default { } }, update({ Post }) { - this.setCurrentPosts(Post) + this.posts = Post }, fetchPolicy: 'cache-and-network', }, diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue index b0d6a8d11..4400fd3c7 100644 --- a/webapp/pages/profile/_id/_slug.vue +++ b/webapp/pages/profile/_id/_slug.vue @@ -255,16 +255,14 @@ -
- -
+ + + + +
diff --git a/webapp/plugins/vue-infinite-loading.js b/webapp/plugins/vue-infinite-loading.js new file mode 100644 index 000000000..e3e447a21 --- /dev/null +++ b/webapp/plugins/vue-infinite-loading.js @@ -0,0 +1,4 @@ +import Vue from 'vue' +import InfiniteLoading from 'vue-infinite-loading' + +Vue.use(InfiniteLoading, { props: { distance: 10 }, system: { throttleLimit: 800 } }) diff --git a/webapp/plugins/vue-infinite-scroll.js b/webapp/plugins/vue-infinite-scroll.js deleted file mode 100644 index 776db193b..000000000 --- a/webapp/plugins/vue-infinite-scroll.js +++ /dev/null @@ -1,4 +0,0 @@ -import Vue from 'vue' -import infiniteScroll from 'vue-infinite-scroll' - -Vue.use(infiniteScroll) diff --git a/webapp/store/posts.js b/webapp/store/posts.js index 4342c5e9e..25a48f0d5 100644 --- a/webapp/store/posts.js +++ b/webapp/store/posts.js @@ -4,8 +4,6 @@ import xor from 'lodash/xor' import isEmpty from 'lodash/isEmpty' import isEqual from 'lodash/isEqual' import clone from 'lodash/clone' -import { filterPosts } from '~/graphql/PostQuery' -import { first, offset } from '~/constants/posts' const defaultFilter = {} @@ -28,7 +26,6 @@ export const state = () => { ...defaultFilter, }, order: orderOptions['createdAt_desc'], - currentPosts: [], } } @@ -77,9 +74,6 @@ export const mutations = { SELECT_ORDER(state, value) { state.order = orderOptions[value] }, - SET_CURRENT_POSTS(state, posts) { - state.currentPosts = posts - }, } export const getters = { @@ -120,26 +114,4 @@ export const getters = { orderIcon(state) { return state.order.icon }, - currentPosts(state) { - return state.currentPosts || [] - }, -} - -export const actions = { - async refreshPosts({ commit, getters }, { i18n }) { - const client = this.app.apolloProvider.defaultClient - const { - data: { Post }, - } = await client.query({ - query: filterPosts(i18n), - variables: { - filter: getters.filter, - first, - orderBy: ['pinned_asc', getters.orderBy], - offset, - }, - }) - commit('SET_CURRENT_POSTS', Post) - return Post - }, } diff --git a/webapp/yarn.lock b/webapp/yarn.lock index 31a6085fe..521c622ad 100644 --- a/webapp/yarn.lock +++ b/webapp/yarn.lock @@ -16331,6 +16331,11 @@ vue-hot-reload-api@^2.3.0: resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz#2756f46cb3258054c5f4723de8ae7e87302a1ccf" integrity sha512-KmvZVtmM26BQOMK1rwUZsrqxEGeKiYSZGA7SNWE6uExx8UX/cj9hq2MRV/wWC3Cq6AoeDGk57rL9YMFRel/q+g== +vue-infinite-loading@^2.4.4: + version "2.4.4" + resolved "https://registry.yarnpkg.com/vue-infinite-loading/-/vue-infinite-loading-2.4.4.tgz#8a9defb9ceeea797c057cb36bdf558a4b2ce409f" + integrity sha512-eIFBcyKqkivtsDDq7Ee5ybDJVGLxIzU1NcBJCHG7Zx9Ic66QEGzSPs2OPJlGUdtu0/RS7KpUER35ZP/a7FdSOg== + vue-infinite-scroll@^2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/vue-infinite-scroll/-/vue-infinite-scroll-2.0.2.tgz#ca37a91fe92ee0ad3b74acf8682c00917144b711"