From 1ceaa66287d32e66e64b4e654a614c8924685d66 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sat, 16 Mar 2024 19:08:20 +0100
Subject: [PATCH] refactor(custom test duration modal): use new modal system

---
 frontend/src/html/popups.html                 |  13 ++-
 frontend/src/styles/popups.scss               |  20 ++--
 frontend/src/ts/event-handlers/test.ts        |   8 ++
 .../custom-test-duration.ts}                  | 107 ++++++------------
 frontend/src/ts/modals/mobile-test-config.ts  |   7 +-
 5 files changed, 67 insertions(+), 88 deletions(-)
 rename frontend/src/ts/{popups/custom-test-duration-popup.ts => modals/custom-test-duration.ts} (51%)

diff --git a/frontend/src/html/popups.html b/frontend/src/html/popups.html
index f1f345773..437e07a56 100644
--- a/frontend/src/html/popups.html
+++ b/frontend/src/html/popups.html
@@ -604,18 +604,21 @@
     <button>ok</button>
   </form>
 </dialog>
-<div id="customTestDurationPopupWrapper" class="popupWrapper hidden">
-  <div id="customTestDurationPopup">
+<dialog id="customTestDurationModal" class="modalWrapper hidden">
+  <form class="modal">
     <div class="title">Test duration</div>
     <div class="preview"></div>
-    <input value="1" title="test duration" />
+    <input value="1" title="test duration" min="0" />
     <div class="tip">
+      You can use "h" for hours and "m" for minutes, for example "1h30m".
+      <br />
+      <br />
       You can start an infinite test by inputting 0. Then, to stop the test, use
       the Bail Out feature (esc or ctrl/cmd + shift + p > Bail Out)
     </div>
     <button>ok</button>
-  </div>
-</div>
+  </form>
+</dialog>
 <div id="quoteSearchPopupWrapper" class="popupWrapper hidden">
   <div id="quoteSearchPopup" mode="">
     <div id="quoteSearchTop">
diff --git a/frontend/src/styles/popups.scss b/frontend/src/styles/popups.scss
index c3c4b0de8..a4b44b7d4 100644
--- a/frontend/src/styles/popups.scss
+++ b/frontend/src/styles/popups.scss
@@ -494,9 +494,18 @@
   }
 }
 
-#customTestDurationPopupWrapper,
+#customTestDurationModal {
+  .modal {
+    max-width: 500px;
+    .tip,
+    .preview {
+      font-size: 0.75rem;
+      color: var(--text-color);
+    }
+  }
+}
+
 #practiseWordsPopupWrapper {
-  #customTestDurationPopup,
   #practiseWordsPopup {
     background: var(--bg-color);
     border-radius: var(--roundness);
@@ -520,13 +529,6 @@
       color: var(--text-color);
     }
   }
-
-  #customTestDurationPopup {
-    .preview {
-      font-size: 0.75rem;
-      color: var(--sub-color);
-    }
-  }
 }
 
 #googleSignUpPopup {
diff --git a/frontend/src/ts/event-handlers/test.ts b/frontend/src/ts/event-handlers/test.ts
index fe7548501..51d57e75b 100644
--- a/frontend/src/ts/event-handlers/test.ts
+++ b/frontend/src/ts/event-handlers/test.ts
@@ -3,6 +3,7 @@ import * as CustomWordAmount from "../modals/custom-word-amount";
 import * as DB from "../db";
 import * as EditResultTagsModal from "../modals/edit-result-tags";
 import * as MobileTestConfigModal from "../modals/mobile-test-config";
+import * as CustomTestDurationModal from "../modals/custom-test-duration";
 
 $(".pageTest").on("click", "#testModesNotice .textButton", async (event) => {
   const attr = $(event.currentTarget).attr("commands");
@@ -17,6 +18,13 @@ $(".pageTest").on("click", "#testConfig .wordCount .textButton", (e) => {
   }
 });
 
+$(".pageTest").on("click", "#testConfig .time .textButton", (e) => {
+  const time = $(e.currentTarget).attr("timeconfig");
+  if (time === "custom") {
+    CustomTestDurationModal.show();
+  }
+});
+
 $(".pageTest").on("click", ".tags .editTagsButton", () => {
   if ((DB.getSnapshot()?.tags?.length ?? 0) > 0) {
     const resultid = $(".pageTest .tags .editTagsButton").attr(
diff --git a/frontend/src/ts/popups/custom-test-duration-popup.ts b/frontend/src/ts/modals/custom-test-duration.ts
similarity index 51%
rename from frontend/src/ts/popups/custom-test-duration-popup.ts
rename to frontend/src/ts/modals/custom-test-duration.ts
index 4d1014c2b..4a5b2e329 100644
--- a/frontend/src/ts/popups/custom-test-duration-popup.ts
+++ b/frontend/src/ts/modals/custom-test-duration.ts
@@ -1,11 +1,8 @@
-import * as UpdateConfig from "../config";
+import Config, * as UpdateConfig from "../config";
 import * as ManualRestart from "../test/manual-restart-tracker";
 import * as TestLogic from "../test/test-logic";
 import * as Notifications from "../elements/notifications";
-import * as Skeleton from "../utils/skeleton";
-import { isPopupVisible } from "../utils/misc";
-
-const wrapperId = "customTestDurationPopupWrapper";
+import AnimatedModal, { ShowOptions } from "../utils/animated-modal";
 
 function parseInput(input: string): number {
   const re = /((-\s*)?\d+(\.\d+)?\s*[hms]?)/g;
@@ -56,56 +53,42 @@ function format(duration: number): string {
 }
 
 function previewDuration(): void {
-  const input = $("#customTestDurationPopup input").val() as string;
+  const input = $("#customTestDurationModal input").val() as string;
   const duration = parseInput(input);
   let formattedDuration = "";
 
   if (duration < 0) {
-    formattedDuration = "NEGATIVE TIME";
+    formattedDuration = "Negative time? Really?";
   } else if (duration === 0) {
     formattedDuration = "Infinite test";
   } else {
-    formattedDuration = "Total time: " + format(duration);
+    formattedDuration = format(duration);
   }
 
-  $("#customTestDurationPopup .preview").text(formattedDuration);
+  $("#customTestDurationModal .preview").text(formattedDuration);
 }
 
-export function show(): void {
-  Skeleton.append(wrapperId, "popups");
-  if (!isPopupVisible(wrapperId)) {
-    $("#customTestDurationPopupWrapper")
-      .stop(true, true)
-      .css("opacity", 0)
-      .removeClass("hidden")
-      .animate({ opacity: 1 }, 125, () => {
-        $("#customTestDurationPopup input").trigger("focus").trigger("select");
-      });
-  }
-
-  previewDuration();
+export function show(showOptions?: ShowOptions): void {
+  void modal.show({
+    ...showOptions,
+    focusFirstInput: "focusAndSelect",
+    beforeAnimation: async (modalEl) => {
+      (
+        modalEl.querySelector("input") as HTMLInputElement
+      ).value = `${Config.time}`;
+      previewDuration();
+    },
+  });
 }
 
-function hide(): void {
-  if (isPopupVisible(wrapperId)) {
-    $("#customTestDurationPopupWrapper")
-      .stop(true, true)
-      .css("opacity", 1)
-      .animate(
-        {
-          opacity: 0,
-        },
-        125,
-        () => {
-          $("#customTestDurationPopupWrapper").addClass("hidden");
-          Skeleton.remove(wrapperId);
-        }
-      );
-  }
+function hide(clearChain = false): void {
+  void modal.hide({
+    clearModalChain: clearChain,
+  });
 }
 
 function apply(): void {
-  const val = parseInput($("#customTestDurationPopup input").val() as string);
+  const val = parseInput($("#customTestDurationModal input").val() as string);
 
   if (val !== null && !isNaN(val) && val >= 0 && isFinite(val)) {
     UpdateConfig.setTimeConfig(val);
@@ -123,42 +106,24 @@ function apply(): void {
       );
     }
   } else {
-    Notifications.add("Custom time must be at least 1", 0);
+    Notifications.add("Custom time must be a positive number or zero", 0);
+    return;
   }
 
-  hide();
+  hide(true);
 }
 
-$("#customTestDurationPopupWrapper").on("click", (e) => {
-  if ($(e.target).attr("id") === "customTestDurationPopupWrapper") {
-    hide();
-  }
-});
-
-$("#customTestDurationPopupWrapper input").on("keyup", (e) => {
-  previewDuration();
-
-  if (e.key === "Enter") {
+function setup(modalEl: HTMLElement): void {
+  modalEl.addEventListener("submit", (e) => {
+    e.preventDefault();
     apply();
-  }
-});
+  });
+  modalEl.querySelector("input")?.addEventListener("input", (e) => {
+    previewDuration();
+  });
+}
 
-$("#customTestDurationPopupWrapper button").on("click", () => {
-  apply();
+const modal = new AnimatedModal({
+  dialogId: "customTestDurationModal",
+  setup,
 });
-
-$("#testConfig").on("click", ".time .textButton", (e) => {
-  const mode = $(e.currentTarget).attr("timeConfig");
-  if (mode === "custom") {
-    show();
-  }
-});
-
-$(document).on("keydown", (event) => {
-  if (event.key === "Escape" && isPopupVisible(wrapperId)) {
-    hide();
-    event.preventDefault();
-  }
-});
-
-Skeleton.save(wrapperId);
diff --git a/frontend/src/ts/modals/mobile-test-config.ts b/frontend/src/ts/modals/mobile-test-config.ts
index 851b93e0d..bc93a9559 100644
--- a/frontend/src/ts/modals/mobile-test-config.ts
+++ b/frontend/src/ts/modals/mobile-test-config.ts
@@ -2,7 +2,7 @@ import * as TestLogic from "../test/test-logic";
 import Config, * as UpdateConfig from "../config";
 import * as ManualRestart from "../test/manual-restart-tracker";
 import * as CustomWordAmountPopup from "./custom-word-amount";
-import * as CustomTestDurationPopup from "../popups/custom-test-duration-popup";
+import * as CustomTestDurationPopup from "./custom-test-duration";
 import * as QuoteSearchPopup from "../popups/quote-search-popup";
 import * as CustomTextPopup from "../popups/custom-text-popup";
 import AnimatedModal from "../utils/animated-modal";
@@ -108,8 +108,9 @@ function setup(modalEl: HTMLElement): void {
       const time = target.getAttribute("data-time") as string;
 
       if (time === "custom") {
-        hide(); // use modal chaining here
-        CustomTestDurationPopup.show();
+        CustomTestDurationPopup.show({
+          modalChain: modal,
+        });
       } else if (time !== undefined) {
         const timeNum = parseInt(time);
         UpdateConfig.setTimeConfig(timeNum);