badly paginated matches

web/pw-server/src/routes/matches/index.svelte

@@ -1,10 +1,14 @@
 <script lang="ts" context="module">
   import { ApiClient } from "$lib/api_client";
 
+  const PAGE_SIZE = "50";
+
   export async function load({ fetch }) {
     try {
       const apiClient = new ApiClient(fetch);
-      const matches = await apiClient.get("/api/matches");
+      const matches = await apiClient.get("/api/matches", {
+        count: PAGE_SIZE,
+      });
 
       return {
         props: {
@@ -24,10 +28,46 @@
   import MatchList from "$lib/components/matches/MatchList.svelte";
 
   export let matches: object[];
+  let loading = false;
+
+  async function loadNewer() {
+    if (matches.length == 0) {
+      return;
+    }
+    const firstTimestamp = matches[0]["timestamp"];
+    const apiClient = new ApiClient();
+    const reversedNewPage = await apiClient.get("/api/matches", {
+      count: PAGE_SIZE,
+      after: firstTimestamp,
+    });
+
+    if (reversedNewPage.length > 0) {
+      matches = reversedNewPage.reverse();
+    }
+  }
+
+  async function loadOlder() {
+    if (matches.length == 0) {
+      return;
+    }
+    const lastTimestamp = matches[matches.length - 1]["timestamp"];
+    const apiClient = new ApiClient();
+    const newPage = await apiClient.get("/api/matches", {
+      count: PAGE_SIZE,
+      before: lastTimestamp,
+    });
+    if (newPage.length > 0) {
+      matches = newPage;
+    }
+  }
 </script>
 
 <div class="container">
   <MatchList {matches} />
+  <div class="page-controls">
+    <button on:click={loadNewer}>newer</button>
+    <button on:click={loadOlder}>older</button>
+  </div>
 </div>
 
 <style lang="scss">
@@ -35,4 +75,10 @@
     width: 800px;
     margin: 0 auto;
   }
+
+  .page-controls {
+    display: flex;
+    justify-content: space-between;
+    margin: 12px;
+  }
 </style>