From 55c76db7b60ae142a1d224e4d485771d7be2b51f Mon Sep 17 00:00:00 2001
From: Ilion Beyst <ilion.beyst@gmail.com>
Date: Tue, 25 Oct 2022 18:57:58 +0200
Subject: [PATCH] fix matches page filter params propagation

---
 .../src/routes/matches/[match_id].svelte      | 52 ++++++++++---------
 web/pw-server/src/routes/matches/index.svelte | 12 ++++-
 2 files changed, 38 insertions(+), 26 deletions(-)

diff --git a/web/pw-server/src/routes/matches/[match_id].svelte b/web/pw-server/src/routes/matches/[match_id].svelte
index 1d18375..bbb25e1 100644
--- a/web/pw-server/src/routes/matches/[match_id].svelte
+++ b/web/pw-server/src/routes/matches/[match_id].svelte
@@ -66,32 +66,34 @@
 
 <div class="container">
   <Visualizer {matchLog} {matchData} />
-  <div class="output-pane">
-    <div class="player-select">
-      {#if playersWithVisibleLog.length == 1}
-        <h3 class="player-log-header">
-          player log for
-          <span style:color={selectedPlayer["color"]}>{selectedPlayer.displayName}</span>
-        </h3>
-      {:else}
-        <Select
-          items={playersWithVisibleLog}
-          label="displayName"
-          clearable={false}
-          searchable={false}
-          bind:value={dropdownSelectedPlayer}
-          placeholder="Select player to see logs"
-        >
-          <div slot="item" let:item>
-            <span style:color={item.color}>{item.displayName}</span>
-          </div>
-        </Select>
-      {/if}
+  {#if playersWithVisibleLog.length > 0}
+    <div class="output-pane">
+      <div class="player-select">
+        {#if playersWithVisibleLog.length == 1}
+          <h3 class="player-log-header">
+            player log for
+            <span style:color={selectedPlayer["color"]}>{selectedPlayer.displayName}</span>
+          </h3>
+        {:else}
+          <Select
+            items={playersWithVisibleLog}
+            label="displayName"
+            clearable={false}
+            searchable={false}
+            bind:value={dropdownSelectedPlayer}
+            placeholder="Select player to see logs"
+          >
+            <div slot="item" let:item>
+              <span style:color={item.color}>{item.displayName}</span>
+            </div>
+          </Select>
+        {/if}
+      </div>
+      <div class="player-log">
+        <PlayerLog {matchLog} playerId={selectedPlayer?.["playerId"]} />
+      </div>
     </div>
-    <div class="player-log">
-      <PlayerLog {matchLog} playerId={selectedPlayer?.["playerId"]} />
-    </div>
-  </div>
+  {/if}
 </div>
 
 <style lang="scss">
diff --git a/web/pw-server/src/routes/matches/index.svelte b/web/pw-server/src/routes/matches/index.svelte
index 8c106fa..9679132 100644
--- a/web/pw-server/src/routes/matches/index.svelte
+++ b/web/pw-server/src/routes/matches/index.svelte
@@ -8,11 +8,18 @@
       const apiClient = new ApiClient(fetch);
       const botName = url.searchParams.get("bot");
 
+      let searchParams = removeUndefined({
+        bot: url.searchParams.get("bot"),
+        opponent: url.searchParams.get("opponent"),
+        outcome: url.searchParams.get("outcome"),
+        had_errors: url.searchParams.get("had_errors"),
+      });
+
       let query = {
         count: PAGE_SIZE,
         before: url.searchParams.get("before"),
         after: url.searchParams.get("after"),
-        bot: botName,
+        ...searchParams,
       };
 
       let { matches, has_next } = await apiClient.get("/api/matches", removeUndefined(query));
@@ -28,6 +35,7 @@
           botName,
           hasNext: has_next,
           query,
+          searchParams,
         },
       };
     } catch (error) {
@@ -57,6 +65,7 @@
   // whether a next page exists in the current iteration direction (before/after)
   export let hasNext: boolean;
   export let query: object;
+  export let searchParams: object;
 
   type Cursor = {
     before?: string;
@@ -65,6 +74,7 @@
 
   function pageLink(cursor: Cursor) {
     let paramsObj = {
+      ...searchParams,
       ...cursor,
     };
     if (botName) {