Add beta downloads pagination

src/components/HomeDownloadBeta.vue

@@ -7,30 +7,54 @@
       :released="version.released"
       :github="version.github"
       :download="version.download" />
-    <spinner class="loading" v-if="versions === null" />
+    <spinner class="loading" v-if="loading" />
+    <home-download-load-more-button
+      v-if="moreLink !== null && !loading"
+      @click="loadMore"
+    />
   </div>
 </template>
 
 <script>
   import HomeDownloadBetaItem from './HomeDownloadBetaItem.vue';
+  import HomeDownloadLoadMoreButton from './HomeDownloadLoadMoreButton.vue';
   import Spinner from './Spinner.vue';
 
   export default {
     name: 'home-download-beta',
     components: {
       HomeDownloadBetaItem,
+      HomeDownloadLoadMoreButton,
       Spinner,
     },
-    asyncComputed: {
-      async versions() {
-        const response = await this.$http.get('https://api.github.com/repos/wulkanowy/wulkanowy/releases');
-        return response.body.map((release) => ({
-          code: release.tag_name,
-          released: release.published_at,
-          github: release.html_url,
-          download: release.assets.length === 0 ? release.html_url : release.assets[0].browser_download_url,
-          id: release.id,
-        }));
+    data: () => ({
+      versions: [],
+      moreLink: 'https://api.github.com/repos/wulkanowy/wulkanowy/releases',
+      loading: false,
+    }),
+    async created() {
+      await this.loadMore();
+    },
+    methods: {
+      async loadMore() {
+        if (this.loading || this.moreLink === null) return;
+        this.loading = true;
+        try {
+          const response = await this.$http.get(this.moreLink);
+          this.versions.push(...response.body.map((release) => ({
+            code: release.tag_name,
+            released: release.published_at,
+            github: release.html_url,
+            download: release.assets.length === 0 ? release.html_url : release.assets[0].browser_download_url,
+            id: release.id,
+          })));
+          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

@@ -0,0 +1,33 @@
+<template>
+  <button
+    class="home-download-load-more-button"
+    @click="$emit('click', $event)"
+  >
+    Wczytaj więcej
+  </button>
+</template>
+
+<script>
+  export default {};
+</script>
+
+<style lang="scss">
+  .home-download-load-more-button {
+    width: 100%;
+    border: 1px solid;
+    color: #D32F2F;
+    box-sizing: border-box;
+    line-height: 48px;
+    font-size: 20px;
+    font-family: 'Roboto', sans-serif;
+    border-radius: 4px;
+    margin-top: 24px;
+    transition: background-color 300ms;
+    cursor: pointer;
+    background-color: transparent;
+
+    &:hover {
+      background-color: #D32F2F33;
+    }
+  }
+</style>