refactor: Remove jQuery from event-handlers (@Leonabcd123)

frontend/src/ts/event-handlers/about.ts

@@ -1,14 +1,11 @@
 import * as SupportPopup from "../modals/support";
 import * as ContactModal from "../modals/contact";
+import { qs } from "../utils/dom";
 
-document
-  .querySelector("#pageAbout #supportMeAboutButton")
-  ?.addEventListener("click", () => {
-    SupportPopup.show();
-  });
+qs("#pageAbout #supportMeAboutButton")?.on("click", () => {
+  SupportPopup.show();
+});
 
-document
-  .querySelector("#pageAbout #contactPopupButton2")
-  ?.addEventListener("click", () => {
-    ContactModal.show();
-  });
+qs("#pageAbout #contactPopupButton2")?.on("click", () => {
+  ContactModal.show();
+});

frontend/src/ts/event-handlers/account.ts

@@ -7,18 +7,19 @@ import * as EditResultTagsModal from "../modals/edit-result-tags";
 import * as AddFilterPresetModal from "../modals/new-filter-preset";
 import { parseWithSchema as parseJsonWithSchema } from "@monkeytype/util/json";
 import { z } from "zod";
+import { qs } from "../utils/dom";
 
-const accountPage = document.querySelector("#pageAccount") as HTMLElement;
+const accountPage = qs("#pageAccount");
 
-$(accountPage).on("click", ".pbsTime .showAllButton", () => {
+accountPage?.onChild("click", ".pbsTime .showAllButton", () => {
   PbTablesModal.show("time");
 });
 
-$(accountPage).on("click", ".pbsWords .showAllButton", () => {
+accountPage?.onChild("click", ".pbsWords .showAllButton", () => {
   PbTablesModal.show("words");
 });
 
-$(accountPage).on("click", ".editProfileButton", () => {
+accountPage?.onChild("click", ".editProfileButton", () => {
   if (!isAuthenticated()) {
     Notifications.add("You must be logged in to edit your profile", 0);
     return;
@@ -40,9 +41,10 @@ $(accountPage).on("click", ".editProfileButton", () => {
 
 const TagsArraySchema = z.array(z.string());
 
-$(accountPage).on("click", ".group.history .resultEditTagsButton", (e) => {
-  const resultid = $(e.target).attr("data-result-id");
-  const tags = $(e.target).attr("data-tags");
+accountPage?.onChild("click", ".group.history .resultEditTagsButton", (e) => {
+  const targetButton = e.childTarget as HTMLElement;
+  const resultid = targetButton?.getAttribute("data-result-id");
+  const tags = targetButton?.getAttribute("data-tags");
 
   EditResultTagsModal.show(
     resultid ?? "",
@@ -51,8 +53,6 @@ $(accountPage).on("click", ".group.history .resultEditTagsButton", (e) => {
   );
 });
 
-$(accountPage)
-  .find("button.createFilterPresetBtn")
-  .on("click", () => {
-    AddFilterPresetModal.show();
-  });
+accountPage?.qs("button.createFilterPresetBtn")?.on("click", () => {
+  AddFilterPresetModal.show();
+});

frontend/src/ts/event-handlers/footer.ts

@@ -9,77 +9,66 @@ import * as VersionHistoryModal from "../modals/version-history";
 import { envConfig } from "virtual:env-config";
 import { COMPATIBILITY_CHECK } from "@monkeytype/contracts";
 import { lastSeenServerCompatibility } from "../ape/adapters/ts-rest-adapter";
+import { qs } from "../utils/dom";
 
-document
-  .querySelector("footer #commandLineMobileButton")
-  ?.addEventListener("click", async () => {
-    Commandline.show({
-      singleListOverride: false,
-    });
+qs("footer #commandLineMobileButton")?.on("click", async () => {
+  Commandline.show({
+    singleListOverride: false,
   });
+});
 
-document
-  .querySelector("footer #newVersionIndicator")
-  ?.addEventListener("click", (e) => {
-    e.stopPropagation();
-    document.querySelector("#newVersionIndicator")?.classList.add("hidden");
-  });
+qs("footer #newVersionIndicator")?.on("click", (e) => {
+  e.stopPropagation();
+  qs("#newVersionIndicator")?.hide();
+});
 
-document
-  .querySelector("footer .currentVersion")
-  ?.addEventListener("click", (e) => {
-    const event = e as MouseEvent;
-    if (event.shiftKey) {
-      alert(
-        JSON.stringify(
-          {
-            clientVersion: envConfig.clientVersion,
-            clientCompatibility: COMPATIBILITY_CHECK,
-            lastSeenServerCompatibility,
-          },
-          null,
-          2,
-        ),
-      );
-    } else {
-      VersionHistoryModal.show();
-    }
-  });
+qs("footer .currentVersion")?.on("click", (e) => {
+  const event = e as MouseEvent;
+  if (event.shiftKey) {
+    alert(
+      JSON.stringify(
+        {
+          clientVersion: envConfig.clientVersion,
+          clientCompatibility: COMPATIBILITY_CHECK,
+          lastSeenServerCompatibility,
+        },
+        null,
+        2,
+      ),
+    );
+  } else {
+    VersionHistoryModal.show();
+  }
+});
 
-document
-  .querySelector("footer .right .current-theme")
-  ?.addEventListener("click", async (event) => {
-    const e = event as MouseEvent;
-    if (e.shiftKey) {
-      if (Config.customTheme) {
-        setConfig("customTheme", false);
-        return;
-      }
-      if (
-        isAuthenticated() &&
-        (DB.getSnapshot()?.customThemes?.length ?? 0) < 1
-      ) {
-        Notifications.add("No custom themes!", 0);
-        setConfig("customTheme", false);
-        return;
-      }
-      setConfig("customTheme", true);
-    } else {
-      const subgroup = Config.customTheme ? "customTheme" : "themes";
-      Commandline.show({
-        subgroupOverride: subgroup,
-      });
+qs("footer .right .current-theme")?.on("click", async (event) => {
+  const e = event as MouseEvent;
+  if (e.shiftKey) {
+    if (Config.customTheme) {
+      setConfig("customTheme", false);
+      return;
     }
-  });
+    if (
+      isAuthenticated() &&
+      (DB.getSnapshot()?.customThemes?.length ?? 0) < 1
+    ) {
+      Notifications.add("No custom themes!", 0);
+      setConfig("customTheme", false);
+      return;
+    }
+    setConfig("customTheme", true);
+  } else {
+    const subgroup = Config.customTheme ? "customTheme" : "themes";
+    Commandline.show({
+      subgroupOverride: subgroup,
+    });
+  }
+});
 
-document
-  .querySelector("footer #supportMeButton")
-  ?.addEventListener("click", () => {
-    SupportPopup.show();
-  });
+qs("footer #supportMeButton")?.on("click", () => {
+  SupportPopup.show();
+});
 
-document
-  .querySelector("footer #contactPopupButton")
-  ?.addEventListener("click", () => {
-    ContactModal.show();
-  });
+qs("footer #contactPopupButton")?.on("click", () => {
+  ContactModal.show();
+});

frontend/src/ts/event-handlers/keymap.ts

@@ -1,6 +1,7 @@
 import * as Commandline from "../commandline/commandline";
+import { qs } from "../utils/dom";
 
-$("#keymap").on("click", ".r5 .layoutIndicator", async () => {
+qs("#keymap")?.onChild("click", ".r5 .layoutIndicator", async () => {
   Commandline.show({
     subgroupOverride: "keymapLayout",
   });

frontend/src/ts/event-handlers/leaderboards.ts

@@ -1,11 +1,8 @@
 import { showPopup } from "../modals/simple-modals";
+import { qs } from "../utils/dom";
 
-const lb = document.getElementById("pageLeaderboards");
+const lb = qs("#pageLeaderboards");
 
-for (const button of lb?.querySelectorAll(
-  ".jumpButtons button[data-action='goToPage']",
-) ?? []) {
-  button?.addEventListener("click", () => {
-    showPopup("lbGoToPage");
-  });
-}
+lb?.qsa(".jumpButtons button[data-action='goToPage']").on("click", () => {
+  showPopup("lbGoToPage");
+});

frontend/src/ts/event-handlers/login.ts

@@ -1,7 +1,8 @@
 import * as ForgotPasswordModal from "../modals/forgot-password";
+import { qs } from "../utils/dom";
 
-const loginPage = document.querySelector("#pageLogin") as HTMLElement;
+const loginPage = qs("#pageLogin");
 
-$(loginPage).on("click", "#forgotPasswordButton", () => {
+loginPage?.onChild("click", "#forgotPasswordButton", () => {
   ForgotPasswordModal.show();
 });

frontend/src/ts/event-handlers/settings.ts

@@ -4,67 +4,64 @@ import * as EditPresetPopup from "../modals/edit-preset";
 import * as EditTagPopup from "../modals/edit-tag";
 
 import * as Notifications from "../elements/notifications";
+import { qs } from "../utils/dom";
 
-const settingsPage = document.querySelector("#pageSettings");
+const settingsPage = qs("#pageSettings");
 
-settingsPage
-  ?.querySelector("#shareCustomThemeButton")
-  ?.addEventListener("click", () => {
-    ShareCustomThemeModal.show();
-  });
+settingsPage?.qs("#shareCustomThemeButton")?.on("click", () => {
+  ShareCustomThemeModal.show();
+});
 
 settingsPage
-  ?.querySelector(".section.updateCookiePreferences .buttons button")
-  ?.addEventListener("click", () => {
+  ?.qs(".section.updateCookiePreferences .buttons button")
+  ?.on("click", () => {
     CookiesModal.show(true);
   });
 
-settingsPage
-  ?.querySelector(".section.presets")
-  ?.addEventListener("click", (e) => {
-    const target = e.target as HTMLElement;
-    if (target.classList.contains("addPresetButton")) {
-      EditPresetPopup.show("add");
-    } else if (target.classList.contains("editButton")) {
-      const presetid = target.parentElement?.getAttribute("data-id");
-      const name = target.parentElement?.getAttribute("data-display");
-      if (
-        presetid === undefined ||
-        name === undefined ||
-        presetid === "" ||
-        name === "" ||
-        presetid === null ||
-        name === null
-      ) {
-        Notifications.add(
-          "Failed to edit preset: Could not find preset id or name",
-          -1,
-        );
-        return;
-      }
-      EditPresetPopup.show("edit", presetid, name);
-    } else if (target.classList.contains("removeButton")) {
-      const presetid = target.parentElement?.getAttribute("data-id");
-      const name = target.parentElement?.getAttribute("data-display");
-      if (
-        presetid === undefined ||
-        name === undefined ||
-        presetid === "" ||
-        name === "" ||
-        presetid === null ||
-        name === null
-      ) {
-        Notifications.add(
-          "Failed to remove preset: Could not find preset id or name",
-          -1,
-        );
-        return;
-      }
-      EditPresetPopup.show("remove", presetid, name);
+settingsPage?.qs(".section.presets")?.on("click", (e) => {
+  const target = e.target as HTMLElement;
+  if (target.classList.contains("addPresetButton")) {
+    EditPresetPopup.show("add");
+  } else if (target.classList.contains("editButton")) {
+    const presetid = target.parentElement?.getAttribute("data-id");
+    const name = target.parentElement?.getAttribute("data-display");
+    if (
+      presetid === undefined ||
+      name === undefined ||
+      presetid === "" ||
+      name === "" ||
+      presetid === null ||
+      name === null
+    ) {
+      Notifications.add(
+        "Failed to edit preset: Could not find preset id or name",
+        -1,
+      );
+      return;
     }
-  });
+    EditPresetPopup.show("edit", presetid, name);
+  } else if (target.classList.contains("removeButton")) {
+    const presetid = target.parentElement?.getAttribute("data-id");
+    const name = target.parentElement?.getAttribute("data-display");
+    if (
+      presetid === undefined ||
+      name === undefined ||
+      presetid === "" ||
+      name === "" ||
+      presetid === null ||
+      name === null
+    ) {
+      Notifications.add(
+        "Failed to remove preset: Could not find preset id or name",
+        -1,
+      );
+      return;
+    }
+    EditPresetPopup.show("remove", presetid, name);
+  }
+});
 
-settingsPage?.querySelector(".section.tags")?.addEventListener("click", (e) => {
+settingsPage?.qs(".section.tags")?.on("click", (e) => {
   const target = e.target as HTMLElement;
   if (target.classList.contains("addTagButton")) {
     EditTagPopup.show("add");