consume matches pagination api

web/pw-server/src/routes/bots/[bot_name].svelte

@@ -5,7 +5,7 @@
     const apiClient = new ApiClient(fetch);
 
     try {
-      const [botData, matches] = await Promise.all([
+      const [botData, matchesPage] = await Promise.all([
         apiClient.get(`/api/bots/${params["bot_name"]}`),
         apiClient.get("/api/matches", { bot: params["bot_name"], count: "20" }),
       ]);
@@ -19,7 +19,7 @@
           bot,
           owner,
           versions,
-          matches,
+          matches: matchesPage["matches"],
         },
       };
     } catch (error) {

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

@@ -15,7 +15,7 @@
         bot: botName,
       };
 
-      let matches = await apiClient.get("/api/matches", removeUndefined(query));
+      let { matches, has_next } = await apiClient.get("/api/matches", removeUndefined(query));
 
       // TODO: should this be done client-side?
       if (query["after"]) {
@@ -26,6 +26,8 @@
         props: {
           matches,
           botName,
+          hasNext: has_next,
+          query,
         },
       };
     } catch (error) {
@@ -47,12 +49,13 @@
 </script>
 
 <script lang="ts">
-  import { goto } from "$app/navigation";
-
   import MatchList from "$lib/components/matches/MatchList.svelte";
 
   export let matches: object[];
   export let botName: string | null;
+  // whether a next page exists in the current iteration direction (before/after)
+  export let hasNext: boolean;
+  export let query: object;
 
   type Cursor = {
     before?: string;
@@ -71,7 +74,7 @@
   }
 
   function olderMatchesLink(matches: object[]): string {
-    if (matches.length == 0) {
+    if (matches.length == 0 || (query["before"] && !hasNext)) {
       return null;
     }
     const lastTimestamp = matches[matches.length - 1]["timestamp"];
@@ -79,7 +82,13 @@
   }
 
   function newerMatchesLink(matches: object[]): string {
-    if (matches.length == 0) {
+    if (
+      matches.length == 0 ||
+      (query["after"] && !hasNext) ||
+      // we are viewing the first page, so there should be no newer matches.
+      // alternatively, we could show a "refresh" here.
+      (!query["before"] && !query["after"])
+    ) {
       return null;
     }
     const firstTimestamp = matches[0]["timestamp"];