Add dev downloads pagination

src/components/HomeDownloadDev.vue

@@ -20,7 +20,11 @@
       :user="version.user"
       :build="version.build"
       :commit="version.commit" />
-    <spinner class="loading" v-if="versions === null || master === null" />
+    <spinner class="loading" v-if="loading || master === null" />
+    <home-download-load-more-button
+      v-if="moreLink !== null && !loading"
+      @click="loadMore"
+    />
   </div>
 </template>
 
@@ -28,6 +32,7 @@
   import moment from 'moment';
   import HomeDownloadDevItem from './HomeDownloadDevItem.vue';
   import HomeDownloadDevMaster from './HomeDownloadDevMaster.vue';
+  import HomeDownloadLoadMoreButton from './HomeDownloadLoadMoreButton.vue';
   import Spinner from './Spinner.vue';
 
   export default {
@@ -35,13 +40,26 @@
     components: {
       HomeDownloadDevItem,
       HomeDownloadDevMaster,
+      HomeDownloadLoadMoreButton,
       Spinner,
     },
-    asyncComputed: {
+    data: () => ({
-      async master() {
+      master: null,
+      versions: [],
+      moreLink: 'https://api.github.com/repos/wulkanowy/wulkanowy/pulls?state=open',
+      loading: false,
+    }),
+    async created() {
+      await Promise.all([
+        this.loadMaster(),
+        this.loadMore(),
+      ]);
+    },
+    methods: {
+      async loadMaster() {
         const redirectorUrl = 'https://bitrise-redirector.herokuapp.com/v0.1/apps/daeff1893f3c8128/builds/develop/artifacts/0/info';
         const build = await this.$http.get(redirectorUrl);
-        return {
+        this.master = {
           released: build.body.finished_at,
           download: build.body.public_install_page_url,
           build: build.body.build_number,
@@ -49,29 +67,41 @@
           commitUrl: build.body.commit_view_url,
         };
       },
-      async versions() {
+      async loadMore() {
-        const response = await this.$http.get('https://api.github.com/repos/wulkanowy/wulkanowy/pulls?state=open');
+        if (this.loading || this.moreLink === null) return;
-        return (await Promise.all(response.body.map(async (release) => {
+        this.loading = true;
-          const redirectorUrl = `https://bitrise-redirector.herokuapp.com/v0.1/apps/daeff1893f3c8128/builds/${release.head.ref}/artifacts/0/info`;
+        try {
-          const build = await this.$http.get(redirectorUrl).catch((error) => error);
+          const response = await this.$http.get(this.moreLink);
-          return {
+          this.versions.push(
-            title: release.title,
+            ...(await Promise.all(response.body.map(async (release) => {
-            number: release.number,
+              const redirectorUrl = `https://bitrise-redirector.herokuapp.com/v0.1/apps/daeff1893f3c8128/builds/${release.head.ref}/artifacts/0/info`;
-            released: build.body.finished_at,
+              const build = await this.$http.get(redirectorUrl).catch((error) => error);
-            github: release.html_url,
+              return {
-            download: build.body.public_install_page_url,
+                title: release.title,
-            url: build.body.build_url,
+                number: release.number,
-            build: build.body.build_number,
+                released: build.body.finished_at,
-            avatar: release.user.avatar_url,
+                github: release.html_url,
-            user: release.user.login,
+                download: build.body.public_install_page_url,
-            commit: release.head.sha,
+                url: build.body.build_url,
-            id: release.id,
+                build: build.body.build_number,
-          };
+                avatar: release.user.avatar_url,
-        }))).sort((a, b) => {
+                user: release.user.login,
-          if (moment(a.released).isBefore(b.released)) return 1;
+                commit: release.head.sha,
-          if (moment(a.released).isAfter(b.released)) return -1;
+                id: release.id,
-          return 0;
+              };
-        });
+            }))).sort((a, b) => {
+              if (moment(a.released).isBefore(b.released)) return 1;
+              if (moment(a.released).isAfter(b.released)) return -1;
+              return 0;
+            }),
+          );
+          const nextLinkRegex = /<([^<>]+)>; ?rel="next"/;
+          const match = nextLinkRegex.exec(response.headers.get('link'));
+          this.moreLink = match === null ? null : match[1];
+        } catch (error) {
+          console.error(error);
+        }
+        this.loading = false;
       },
     },
   };

src/components/HomeDownloadLoadMoreButton.vue

@@ -8,7 +8,9 @@
 </template>
 
 <script>
-  export default {};
+  export default {
+    name: 'home-download-load-more-button',
+  };
 </script>
 
 <style lang="scss">