From 5e638d4d1fa673ac8abf3a2da1fd6b421e2a1a6e Mon Sep 17 00:00:00 2001
From: Guangcong Luo <guangcongluo@gmail.com>
Date: Thu, 2 Nov 2023 00:54:40 +0000
Subject: [PATCH] New Replays: Fix misc bugs

Specifically, the bugs fixed are to searches not updating correctly.
---
 website/replays/src/replays-battle.tsx | 10 +--
 website/replays/src/replays.tsx        | 95 ++++++++++++++------------
 2 files changed, 59 insertions(+), 46 deletions(-)

diff --git a/website/replays/src/replays-battle.tsx b/website/replays/src/replays-battle.tsx
index 023ae7c09c..6363567bbf 100644
--- a/website/replays/src/replays-battle.tsx
+++ b/website/replays/src/replays-battle.tsx
@@ -72,7 +72,8 @@ export class BattlePanel extends preact.Component<{id: string}> {
   } | null | undefined = undefined;
   battle: Battle | null;
   speed = 'normal';
-  keyCode = '0';
+  /** debug purposes */
+  lastUsedKeyCode = '0';
   turnView: boolean | string = false;
   autofocusTurnView: 'select' | 'end' | null = null;
   override componentDidMount() {
@@ -143,7 +144,8 @@ export class BattlePanel extends preact.Component<{id: string}> {
   }
   keyPressed = (e: KeyboardEvent) => {
     // @ts-ignore
-    this.keyCode = `${e.keyCode}`;
+    this.lastUsedKeyCode = `${e.keyCode}`;
+    if (e.ctrlKey || e.metaKey || e.altKey) return;
     if (e.keyCode === 27 && this.turnView) { // Esc
       this.closeTurn();
       return;
@@ -190,8 +192,8 @@ export class BattlePanel extends preact.Component<{id: string}> {
         );
       }
       break;
-    case 48: case 49: case 50: case 51: case 52: case 53: case 54: case 55: case 56: case 57:
-    case 96: case 97: case 98: case 99: case 100: case 101: case 102: case 103: case 104: case 105:
+    case 48: case 49: case 50: case 51: case 52: case 53: case 54: case 55: case 56: case 57: // 0-9
+    case 96: case 97: case 98: case 99: case 100: case 101: case 102: case 103: case 104: case 105: // numpad 0-9
       this.turnView = String.fromCharCode(e.keyCode - (e.keyCode >= 96 ? 48 : 0));
       if (this.turnView === '0') this.turnView = '10';
       this.autofocusTurnView = 'end';
diff --git a/website/replays/src/replays.tsx b/website/replays/src/replays.tsx
index e78865f95f..1648832708 100644
--- a/website/replays/src/replays.tsx
+++ b/website/replays/src/replays.tsx
@@ -35,7 +35,8 @@ class SearchPanel extends preact.Component<{id: string}> {
     });
     this.updateSearch(Net.decodeQuery(this.props.id));
   }
-  override componentDidUpdate() {
+  override componentDidUpdate(previousProps: this['props']) {
+    if (this.props.id === previousProps.id) return;
     const query = Net.decodeQuery(this.props.id);
     const page = parseInt(query.page || '1');
     const byRating = (query.sort === 'rating');
@@ -111,7 +112,7 @@ class SearchPanel extends preact.Component<{id: string}> {
     });
   }
   modLink(overrides: {page?: number, sort?: string}) {
-    const newPage = this.page + (overrides.page || 0);
+    const newPage = (overrides.page !== undefined ? this.page + overrides.page : 1);
     return './?' + Net.encodeQuery({
       user: this.user || undefined,
       format: this.format || undefined,
@@ -185,46 +186,56 @@ class SearchPanel extends preact.Component<{id: string}> {
         </a>
       </li>))}
     </ul>;
-    return <div class={PSRouter.showingRight() ? 'sidebar' : ''}><section class="section first-section">
-      <h1>Search replays</h1>
-      <form onSubmit={this.submitForm}>
-        <p>
-          <label>Username:<br />
-          <input type="search" class="textbox" name="user" placeholder="(blank = any user)" size={20} /> {}
-          {this.loggedInUser && <button type="button" class="button" onClick={this.searchLoggedIn}>{this.loggedInUser}'s replays</button>}</label>
-        </p>
-        <p>
-          <label>Format:<br />
-          <input type="search" class="textbox" name="format" placeholder="(blank = any format)" size={30} /></label>
-        </p>
-        <p>
-          <label class="checkbox inline"><input type="radio" name="private" value="" /> Public</label> {}
-          <label class="checkbox inline"><input type="radio" name="private" value="1" /> Private (your own replays only)</label>
-        </p>
-        <p>
-          <button type="submit" class="button"><i class="fa fa-search" aria-hidden></i> <strong>Search</strong></button> {}
-          {activelySearching && <button class="button" onClick={this.cancelForm}>Cancel</button>}
-        </p>
-        {activelySearching && <h1 aria-label="Results"></h1>}
-        {activelySearching && this.format && !this.user && <p>
-          Sort by: {}
-          <a href={this.modLink({sort: 'date', page: 1})} class={`button button-first${this.byRating ? '' : ' disabled'}`}>Date</a>
-          <a href={this.modLink({sort: 'rating', page: 1})} class={`button button-last${this.byRating ? ' disabled' : ''}`}>Rating</a>
-        </p>}
-        {activelySearching && this.page > 1 && <p class="pagelink">
-          <a href={this.modLink({page: -1})} class="button"><i class="fa fa-caret-up"></i><br />Page {this.page - 1}</a>
-        </p>}
-        {activelySearching && searchResults}
-        {activelySearching && (this.results?.length || 0) > 50 && <p class="pagelink">
-          <a href={this.modLink({page: 1})} class="button">Page {this.page + 1}<br /><i class="fa fa-caret-down"></i></a>
-        </p>}
-      </form>
-    </section>{!activelySearching && <FeaturedReplays />}{!activelySearching && <section class="section">
-      <h1>Recent replays</h1>
-      <ul class="linklist">
-        {searchResults}
-      </ul>
-    </section>}</div>;
+    return <div class={PSRouter.showingRight() ? 'sidebar' : ''}>
+      <section class="section first-section">
+        <h1>Search replays</h1>
+        <form onSubmit={this.submitForm}>
+          <p>
+            <label>
+              Username:<br />
+              <input type="search" class="textbox" name="user" placeholder="(blank = any user)" size={20} /> {}
+              {this.loggedInUser && <button type="button" class="button" onClick={this.searchLoggedIn}>{this.loggedInUser}'s replays</button>}
+            </label>
+          </p>
+          <p>
+            <label>Format:<br />
+            <input type="search" class="textbox" name="format" placeholder="(blank = any format)" size={30} /></label>
+          </p>
+          <p>
+            <label class="checkbox inline"><input type="radio" name="private" value="" /> Public</label> {}
+            <label class="checkbox inline"><input type="radio" name="private" value="1" /> Private (your own replays only)</label>
+          </p>
+          <p>
+            <button type="submit" class="button"><i class="fa fa-search" aria-hidden></i> <strong>Search</strong></button> {}
+            {activelySearching && <button class="button" onClick={this.cancelForm}>Cancel</button>}
+          </p>
+          {activelySearching && <h1 aria-label="Results"></h1>}
+          {activelySearching && this.format && !this.user && <p>
+            Sort by: {}
+            <a href={this.modLink({sort: 'date'})} class={`button button-first${this.byRating ? '' : ' disabled'}`}>
+              Date
+            </a>
+            <a href={this.modLink({sort: 'rating'})} class={`button button-last${this.byRating ? ' disabled' : ''}`}>
+              Rating
+            </a>
+          </p>}
+          {activelySearching && this.page > 1 && <p class="pagelink">
+            <a href={this.modLink({page: -1})} class="button"><i class="fa fa-caret-up"></i><br />Page {this.page - 1}</a>
+          </p>}
+          {activelySearching && searchResults}
+          {activelySearching && (this.results?.length || 0) > 50 && <p class="pagelink">
+            <a href={this.modLink({page: 1})} class="button">Page {this.page + 1}<br /><i class="fa fa-caret-down"></i></a>
+          </p>}
+        </form>
+      </section>
+      {!activelySearching && <FeaturedReplays />}
+      {!activelySearching && <section class="section">
+        <h1>Recent replays</h1>
+        <ul class="linklist">
+          {searchResults}
+        </ul>
+      </section>}
+    </div>;
   }
 }