From 201b02ac1da6c03ffada97cb9e0756f30790c131 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 26 Oct 2018 17:38:25 +0200
Subject: [PATCH] made load more a component and added it to the newsfeed too

---
 components/LoadMore.vue     | 21 ++++++++++++
 graphql/UserProfileQuery.js |  2 +-
 pages/index.vue             | 67 ++++++++++++++++++++++++++++---------
 pages/profile/_slug.vue     | 18 ++++------
 4 files changed, 80 insertions(+), 28 deletions(-)
 create mode 100644 components/LoadMore.vue

diff --git a/components/LoadMore.vue b/components/LoadMore.vue
new file mode 100644
index 000000000..e905925a7
--- /dev/null
+++ b/components/LoadMore.vue
@@ -0,0 +1,21 @@
+<template>
+  <ds-space
+    margin-top="large"
+    style="text-align: center">
+    <ds-button
+      :icon="loading ? 'spinner' : 'arrow-down'"
+      :disabled="loading"
+      ghost
+      @click="$emit('click')">
+      mehr laden
+    </ds-button>
+  </ds-space>
+</template>
+
+<script>
+export default {
+  props: {
+    loading: { type: Boolean, default: false }
+  }
+}
+</script>
diff --git a/graphql/UserProfileQuery.js b/graphql/UserProfileQuery.js
index 943895cf7..df115adde 100644
--- a/graphql/UserProfileQuery.js
+++ b/graphql/UserProfileQuery.js
@@ -1,7 +1,7 @@
 import gql from 'graphql-tag'
 
 export default gql(`
-  query User($slug: String!, $offset: Int, $first: Int) {
+  query User($slug: String!, $first: Int, $offset: Int) {
     User(slug: $slug) {
       id
       name
diff --git a/pages/index.vue b/pages/index.vue
index fb1abf6d5..9f6f9c5e2 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,33 +1,46 @@
 <template>
-  <ds-flex
-    :width="{ base: '100%' }"
-    gutter="base">
-    <ds-flex-item
-      v-for="post in Post"
-      :width="{ base: '100%', xs: '100%', md: '50%', xl: '33%' }"
-      :key="post.id">
-      <hc-post-card :post="post" />
-    </ds-flex-item>
-  </ds-flex>
+  <div>
+    <ds-flex
+      :width="{ base: '100%' }"
+      gutter="base">
+      <ds-flex-item
+        v-for="post in Post"
+        :width="{ base: '100%', xs: '100%', md: '50%', xl: '33%' }"
+        :key="post.id">
+        <hc-post-card :post="post" />
+      </ds-flex-item>
+    </ds-flex>
+    <hc-load-more
+      v-if="true"
+      :loading="$apollo.loading"
+      @click="showMoreContributions" />
+  </div>
 </template>
 
 <script>
 import gql from 'graphql-tag'
 import HcPostCard from '~/components/PostCard.vue'
+import HcLoadMore from '~/components/LoadMore.vue'
 
 export default {
   components: {
-    HcPostCard
+    HcPostCard,
+    HcLoadMore
   },
   data() {
     return {
       // Initialize your apollo data
-      Post: []
+      Post: [],
+      page: 1,
+      pageSize: 10
     }
   },
   computed: {
     tags() {
       return this.Post ? this.Post[0].tags.map(tag => tag.name) : '-'
+    },
+    offset() {
+      return (this.page - 1) * this.pageSize
     }
   },
   methods: {
@@ -36,13 +49,31 @@ export default {
         name: 'post-slug',
         params: { slug: post.slug }
       }).href
+    },
+    showMoreContributions() {
+      // this.page++
+      // Fetch more data and transform the original result
+      this.page++
+      this.$apollo.queries.Post.fetchMore({
+        variables: {
+          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'
+      })
     }
   },
   apollo: {
     Post: {
       query: gql(`
-        query {
-          Post(first:10) {
+        query Post($first: Int, $offset: Int) {
+          Post(first: $first, offset: $offset) {
             id
             title
             contentExcerpt
@@ -74,7 +105,13 @@ export default {
             shoutedCount
           }
         }
-      `)
+      `),
+      variables() {
+        return {
+          first: this.pageSize,
+          offset: 0
+        }
+      }
     }
   }
 }
diff --git a/pages/profile/_slug.vue b/pages/profile/_slug.vue
index 1b37e47cf..05aac7045 100644
--- a/pages/profile/_slug.vue
+++ b/pages/profile/_slug.vue
@@ -187,18 +187,10 @@
               :show-author-popover="false" />
           </ds-flex-item>
         </ds-flex>
-        <ds-space
+        <hc-load-more
           v-if="hasMore"
-          margin-top="large"
-          style="text-align: center">
-          <ds-button
-            :icon="$apollo.loading ? 'spinner' : 'arrow-down'"
-            :disabled="$apollo.loading"
-            ghost
-            @click="showMoreContributions">
-            mehr laden
-          </ds-button>
-        </ds-space>
+          :loading="$apollo.loading"
+          @click="showMoreContributions" />
       </ds-flex-item>
     </ds-flex>
   </div>
@@ -212,6 +204,7 @@ import HcPostCard from '~/components/PostCard.vue'
 import HcFollowButton from '~/components/FollowButton.vue'
 import HcCountTo from '~/components/CountTo.vue'
 import HcBadges from '~/components/Badges.vue'
+import HcLoadMore from '~/components/LoadMore.vue'
 
 export default {
   components: {
@@ -219,7 +212,8 @@ export default {
     HcPostCard,
     HcFollowButton,
     HcCountTo,
-    HcBadges
+    HcBadges,
+    HcLoadMore
   },
   transition: {
     name: 'slide-up',