2 files changed, 37 insertions, 20 deletions
diff --git a/web/pw-server/src/routes/bots/[bot_name].svelte b/web/pw-server/src/routes/bots/[bot_name].svelte
index 33a522f..5fe4cc7 100644
--- a/web/pw-server/src/routes/bots/[bot_name].svelte
+++ b/web/pw-server/src/routes/bots/[bot_name].svelte
@@ -1,18 +1,16 @@
 <script lang="ts" context="module">
-  import { get_session_token } from "$lib/auth";
+  import { ApiClient } from "$lib/api_client";
 
   export async function load({ params, fetch }) {
-    const token = get_session_token();
-    const res = await fetch(`/api/bots/${params["bot_name"]}`, {
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${token}`,
-      },
-    });
-
-    if (res.ok) {
-      const { bot, owner, versions } = await res.json();
-      // sort most recent first
+    const apiClient = new ApiClient(fetch);
+
+    try {
+      const [botData, matchesPage] = await Promise.all([
+        apiClient.get(`/api/bots/${params["bot_name"]}`),
+        apiClient.get("/api/matches", { bot: params["bot_name"], count: "20" }),
+      ]);
+
+      const { bot, owner, versions } = botData;
       versions.sort((a: string, b: string) =>
         dayjs(a["created_at"]).isAfter(b["created_at"]) ? -1 : 1
       );
@@ -21,25 +19,28 @@
           bot,
           owner,
           versions,
+          matches: matchesPage["matches"],
         },
       };
+    } catch (error) {
+      return {
+        status: error.status,
+        error: error,
+      };
     }
-
-    return {
-      status: res.status,
-      error: new Error("Could not find bot"),
-    };
   }
 </script>
 
 <script lang="ts">
   import dayjs from "dayjs";
-
   import { currentUser } from "$lib/stores/current_user";
+  import MatchList from "$lib/components/matches/MatchList.svelte";
+  import LinkButton from "$lib/components/LinkButton.svelte";
 
   export let bot: object;
   export let owner: object;
   export let versions: object[];
+  export let matches: object[];
 
   // function last_updated() {
   //   versions.sort()
@@ -92,7 +93,17 @@
     </div>
   {/if}
 
-  <div class="versions">
+  <div class="matches">
+    <h3>Recent matches</h3>
+    <MatchList {matches} />
+    {#if matches.length > 0}
+      <div class="btn-container">
+        <LinkButton href={`/matches?bot=${bot["name"]}`}>All matches</LinkButton>
+      </div>
+    {/if}
+  </div>
+
+  <!-- <div class="versions">
     <h4>Versions</h4>
     <ul class="version-list">
       {#each versions as version}
@@ -104,7 +115,7 @@
     {#if versions.length == 0}
       This bot does not have any versions yet.
     {/if}
-  </div>
+  </div> -->
 </div>
 
 <style lang="scss">
@@ -136,6 +147,11 @@
     margin-bottom: $header-space-above-line;
   }
 
+  .btn-container {
+    padding: 24px;
+    text-align: center;
+  }
+
   .versions {
     margin: 30px 0;
   }
diff --git a/web/pw-server/src/routes/bots/new.svelte b/web/pw-server/src/routes/bots/new.svelte
index 7cb7229..c243fe1 100644
--- a/web/pw-server/src/routes/bots/new.svelte
+++ b/web/pw-server/src/routes/bots/new.svelte
@@ -16,6 +16,7 @@
   async function createBot() {
     saveErrors = [];
 
+    // TODO: how can we handle this with the new ApiClient?
     let response = await fetch("/api/bots", {
       method: "POST",
       headers: {