progress

webapp/src/routes/index.svelte

@@ -1,24 +1,51 @@
 <script context="module">
-  export function preload() {
-    return this.fetch(`index.json`)
-      .then((r) => r.json())
-      .then(({ stories }) => {
-        return { stories };
-      });
+  export async function preload(page) {
+    const { skip, limit } = {
+      skip: page.query.skip || 0,
+      limit: page.query.query || 20,
+    };
+    const res = await this.fetch(`index.json?skip=${skip}&limit=${limit}`);
+    const data = await res.json();
+
+    if (res.status === 200) {
+      return { stories: data.stories, skip, limit };
+    } else {
+      this.error(res.status, data.message);
+    }
   }
 </script>
 
 <script>
+  import { stores } from "@sapper/app";
   import { getLogoUrl } from "../utils/logos.js";
   import StoryInfo from "../components/StoryInfo.svelte";
 
   export let stories;
+  export let skip;
+  export let limit;
+
+  const { page } = stores();
+
+  page.subscribe((value) => {
+    skip = value.query.skip || 0;
+    limit = value.query.limit || 20;
+  });
 </script>
 
 <style>
   article {
     margin: 0.5rem 0;
   }
+
+  .pagination {
+    margin: 3rem 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+  .pagination-link.is-right {
+    margin-left: auto;
+  }
 </style>
 
 <svelte:head>
@@ -29,10 +56,6 @@
 
 <section>
   {#each stories as story}
-    <!-- we're using the non-standard `rel=prefetch` attribute to
-				tell Sapper to load the data for the page as soon as
-				the user hovers over the link or taps it, instead of
-				waiting for the 'click' event -->
     <article>
       <header>
         <img
@@ -49,3 +72,18 @@
     </article>
   {/each}
 </section>
+
+<div class="pagination">
+  {#if Number(skip) > 0}
+    <a
+      class="pagination-link is-left"
+      href="?skip={Number(skip) - Math.min(Number(skip), Number(limit))}&limit={limit}"
+      rel="prefetch">Previous</a>
+  {/if}
+  {#if stories.length == Number(limit)}
+    <a
+      class="pagination-link is-right"
+      href="?skip={Number(skip) + Number(limit)}&limit={limit}"
+      rel="prefetch">Next</a>
+  {/if}
+</div>