From 6f0c1093ac65064c9c19a4137ff897137f74c694 Mon Sep 17 00:00:00 2001
From: Ilion Beyst <ilion.beyst@gmail.com>
Date: Sat, 6 Aug 2022 16:12:00 +0200
Subject: [PATCH] extend api_client for loading match data

---
 web/pw-server/src/lib/api_client.ts           | 51 +++++++++++--------
 .../src/routes/matches/[match_id].svelte      | 40 ++++++---------
 2 files changed, 46 insertions(+), 45 deletions(-)

diff --git a/web/pw-server/src/lib/api_client.ts b/web/pw-server/src/lib/api_client.ts
index 93135ab..2eaa762 100644
--- a/web/pw-server/src/lib/api_client.ts
+++ b/web/pw-server/src/lib/api_client.ts
@@ -24,23 +24,15 @@ export class ApiClient {
   }
 
   async get(url: string, params?: Record<string, string>): Promise<any> {
-    const headers = { "Content-Type": "application/json" };
+    const response = await this.getRequest(url, params);
+    this.checkResponse(response);
+    return await response.json();
+  }
 
-    if (this.sessionToken) {
-      headers["Authorization"] = `Bearer ${this.sessionToken}`;
-    }
-
-    if (params) {
-      let searchParams = new URLSearchParams(params);
-      url = `${url}?${searchParams}`;
-    }
-
-    const response = await this.fetch_fn(url, {
-      method: "GET",
-      headers,
-    });
-
-    return await this.getJsonResponse(response);
+  async getText(url: string, params?: Record<string, string>): Promise<any> {
+    const response = await this.getRequest(url, params);
+    this.checkResponse(response);
+    return await response.text();
   }
 
   async post(url: string, data: any): Promise<any> {
@@ -57,13 +49,30 @@ export class ApiClient {
       body: JSON.stringify(data),
     });
 
-    return await this.getJsonResponse(response);
+    this.checkResponse(response);
+    return await response.json();
   }
 
-  private async getJsonResponse(response: Response): Promise<any> {
-    if (response.ok) {
-      return await response.json();
-    } else {
+  private async getRequest(url: string, params: Record<string, string>): Promise<Response> {
+    const headers = { "Content-Type": "application/json" };
+
+    if (this.sessionToken) {
+      headers["Authorization"] = `Bearer ${this.sessionToken}`;
+    }
+
+    if (params) {
+      let searchParams = new URLSearchParams(params);
+      url = `${url}?${searchParams}`;
+    }
+
+    return await this.fetch_fn(url, {
+      method: "GET",
+      headers,
+    });
+  }
+
+  private checkResponse(response: Response) {
+    if (!response.ok) {
       throw new ApiError(response.status, response.statusText);
     }
   }
diff --git a/web/pw-server/src/routes/matches/[match_id].svelte b/web/pw-server/src/routes/matches/[match_id].svelte
index 2c0a3fa..7c1507c 100644
--- a/web/pw-server/src/routes/matches/[match_id].svelte
+++ b/web/pw-server/src/routes/matches/[match_id].svelte
@@ -1,33 +1,25 @@
 <script lang="ts" context="module">
-  function fetchJson(url: string): Promise<Response> {
-    return fetch(url, {
-      headers: {
-        "Content-Type": "application/json",
-      },
-    });
-  }
-
-  export async function load({ params }) {
-    // TODO: handle failure cases better
-    const matchId = params["match_id"];
-    const matchDataResponse = await fetchJson(`/api/matches/${matchId}`);
-    if (!matchDataResponse.ok) {
-    }
-    const matchLogResponse = await fetchJson(`/api/matches/${matchId}/log`);
-
-    if (matchDataResponse.ok && matchLogResponse.ok) {
+  import { ApiClient } from "$lib/api_client";
+  export async function load({ params, fetch }) {
+    try {
+      const matchId = params["match_id"];
+      const apiClient = new ApiClient(fetch);
+      const [matchData, matchLog] = await Promise.all([
+        apiClient.get(`/api/matches/${matchId}`),
+        apiClient.getText(`/api/matches/${matchId}/log`),
+      ]);
       return {
         props: {
-          matchData: await matchDataResponse.json(),
-          matchLog: await matchLogResponse.text(),
+          matchData: matchData,
+          matchLog: matchLog,
         },
       };
+    } catch (error) {
+      return {
+        status: error.status,
+        error: error,
+      };
     }
-
-    return {
-      status: matchDataResponse.status,
-      error: new Error("failed to load match"),
-    };
   }
 </script>