Merge pull request #1479 from Human-Connection/1394-proper_pagination_implementation

Fix #1394

webapp/pages/index.vue

@@ -61,7 +61,6 @@
 
 <script>
 import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
-import uniqBy from 'lodash/uniqBy'
 import HcEmpty from '~/components/Empty'
 import HcPostCard from '~/components/PostCard'
 import HcLoadMore from '~/components/LoadMore.vue'
@@ -126,12 +125,6 @@ export default {
       return this.$apollo.loading || (this.posts && this.posts.length > 0)
     },
   },
-  watch: {
-    postsFilter() {
-      this.offset = 0
-      this.posts = []
-    },
-  },
   methods: {
     toggleOnlySorting(x) {
       this.offset = 0
@@ -150,7 +143,27 @@ export default {
       }).href
     },
     showMoreContributions() {
+      const { Post: PostQuery } = this.$apollo.queries
+      if (!PostQuery) return // seems this can be undefined on subpages
+
       this.offset += this.pageSize
+      PostQuery.fetchMore({
+        variables: {
+          offset: this.offset,
+          filter: this.finalFilters,
+          first: this.pageSize,
+          orderBy: this.sorting,
+        },
+        updateQuery: (previousResult, { fetchMoreResult }) => {
+          if (!fetchMoreResult || fetchMoreResult.Post.length < this.pageSize) {
+            this.hasMore = false
+          }
+          const result = Object.assign({}, previousResult, {
+            Post: [...previousResult.Post, ...fetchMoreResult.Post],
+          })
+          return result
+        },
+      })
     },
     deletePost(deletedPost) {
       this.posts = this.posts.filter(post => {
@@ -164,19 +177,15 @@ export default {
         return filterPosts(this.$i18n)
       },
       variables() {
-        const result = {
+        return {
           filter: this.finalFilters,
           first: this.pageSize,
-          offset: this.offset,
           orderBy: this.sorting,
+          offset: 0,
         }
-        return result
       },
       update({ Post }) {
-        this.hasMore = Post && Post.length >= this.pageSize
+        this.posts = Post
-        if (!Post) return
-        const posts = uniqBy([...this.posts, ...Post], 'id')
-        this.posts = posts
       },
       fetchPolicy: 'cache-and-network',
     },

webapp/pages/profile/_id/_slug.vue

@@ -307,7 +307,7 @@ export default {
     return {
       User: [],
       posts: [],
-      hasMore: false,
+      hasMore: true,
       offset: 0,
       pageSize: 6,
       tabActive: 'post',
@@ -363,7 +363,27 @@ export default {
       this.$apollo.queries.User.refetch()
     },
     showMoreContributions() {
+      const { Post: PostQuery } = this.$apollo.queries
+      if (!PostQuery) return // seems this can be undefined on subpages
+
       this.offset += this.pageSize
+      PostQuery.fetchMore({
+        variables: {
+          offset: this.offset,
+          filter: this.filter,
+          first: this.pageSize,
+          orderBy: this.sorting,
+        },
+        updateQuery: (previousResult, { fetchMoreResult }) => {
+          if (!fetchMoreResult || fetchMoreResult.Post.length < this.pageSize) {
+            this.hasMore = false
+          }
+          const result = Object.assign({}, previousResult, {
+            Post: [...previousResult.Post, ...fetchMoreResult.Post],
+          })
+          return result
+        },
+      })
     },
     resetPostList() {
       this.offset = 0
@@ -392,19 +412,14 @@ export default {
         return {
           filter: this.filter,
           first: this.pageSize,
-          offset: this.offset,
+          offset: 0,
           orderBy: 'createdAt_desc',
         }
       },
-      fetchPolicy: 'cache-and-network',
       update({ Post }) {
-        this.hasMore = Post && Post.length >= this.pageSize
+        this.posts = Post
-        if (!Post) return
-        // 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.
-        this.posts = this.uniq([...this.posts, ...Post])
       },
+      fetchPolicy: 'cache-and-network',
     },
     User: {
       query() {