refactor: move event handlers from simple-modals to respective files (@biplavbarua)

frontend/src/ts/modals/simple-modals-base.ts

@@ -0,0 +1,67 @@
+import * as Notifications from "../elements/notifications";
+import { ShowOptions } from "../utils/animated-modal";
+import { SimpleModal } from "../utils/simple-modal";
+
+export type PopupKey =
+  | "updateEmail"
+  | "updateName"
+  | "updatePassword"
+  | "removeGoogleAuth"
+  | "removeGithubAuth"
+  | "removePasswordAuth"
+  | "addPasswordAuth"
+  | "deleteAccount"
+  | "resetAccount"
+  | "optOutOfLeaderboards"
+  | "applyCustomFont"
+  | "resetPersonalBests"
+  | "resetSettings"
+  | "revokeAllTokens"
+  | "unlinkDiscord"
+  | "editApeKey"
+  | "deleteCustomText"
+  | "deleteCustomTextLong"
+  | "resetProgressCustomTextLong"
+  | "updateCustomTheme"
+  | "deleteCustomTheme"
+  | "devGenerateData"
+  | "lbGoToPage";
+
+export const list: Record<PopupKey, SimpleModal | undefined> = {
+  updateEmail: undefined,
+  updateName: undefined,
+  updatePassword: undefined,
+  removeGoogleAuth: undefined,
+  removeGithubAuth: undefined,
+  removePasswordAuth: undefined,
+  addPasswordAuth: undefined,
+  deleteAccount: undefined,
+  resetAccount: undefined,
+  optOutOfLeaderboards: undefined,
+  applyCustomFont: undefined,
+  resetPersonalBests: undefined,
+  resetSettings: undefined,
+  revokeAllTokens: undefined,
+  unlinkDiscord: undefined,
+  editApeKey: undefined,
+  deleteCustomText: undefined,
+  deleteCustomTextLong: undefined,
+  resetProgressCustomTextLong: undefined,
+  updateCustomTheme: undefined,
+  deleteCustomTheme: undefined,
+  devGenerateData: undefined,
+  lbGoToPage: undefined,
+};
+
+export function showPopup(
+  key: PopupKey,
+  showParams = [] as string[],
+  showOptions: ShowOptions = {},
+): void {
+  const popup = list[key];
+  if (popup === undefined) {
+    Notifications.add("Failed to show popup - popup is not defined", -1);
+    return;
+  }
+  popup.show(showParams, showOptions);
+}

frontend/src/ts/modals/simple-modals.ts

@@ -35,7 +35,7 @@ import {
   SimpleModal,
   TextInput,
 } from "../utils/simple-modal";
-import { ShowOptions } from "../utils/animated-modal";
+
 import { GenerateDataRequest } from "@monkeytype/contracts/dev";
 import {
   PasswordSchema,
@@ -47,57 +47,10 @@ import FileStorage from "../utils/file-storage";
 import { z } from "zod";
 import { remoteValidation } from "../utils/remote-validation";
 import { qs, qsr } from "../utils/dom";
+import { list, PopupKey, showPopup } from "./simple-modals-base";
 
-type PopupKey =
-  | "updateEmail"
-  | "updateName"
-  | "updatePassword"
-  | "removeGoogleAuth"
-  | "removeGithubAuth"
-  | "removePasswordAuth"
-  | "addPasswordAuth"
-  | "deleteAccount"
-  | "resetAccount"
-  | "optOutOfLeaderboards"
-  | "applyCustomFont"
-  | "resetPersonalBests"
-  | "resetSettings"
-  | "revokeAllTokens"
-  | "unlinkDiscord"
-  | "editApeKey"
-  | "deleteCustomText"
-  | "deleteCustomTextLong"
-  | "resetProgressCustomTextLong"
-  | "updateCustomTheme"
-  | "deleteCustomTheme"
-  | "devGenerateData"
-  | "lbGoToPage";
-
-const list: Record<PopupKey, SimpleModal | undefined> = {
-  updateEmail: undefined,
-  updateName: undefined,
-  updatePassword: undefined,
-  removeGoogleAuth: undefined,
-  removeGithubAuth: undefined,
-  removePasswordAuth: undefined,
-  addPasswordAuth: undefined,
-  deleteAccount: undefined,
-  resetAccount: undefined,
-  optOutOfLeaderboards: undefined,
-  applyCustomFont: undefined,
-  resetPersonalBests: undefined,
-  resetSettings: undefined,
-  revokeAllTokens: undefined,
-  unlinkDiscord: undefined,
-  editApeKey: undefined,
-  deleteCustomText: undefined,
-  deleteCustomTextLong: undefined,
-  resetProgressCustomTextLong: undefined,
-  updateCustomTheme: undefined,
-  deleteCustomTheme: undefined,
-  devGenerateData: undefined,
-  lbGoToPage: undefined,
-};
+export { list, showPopup };
+export type { PopupKey };
 
 type AuthMethod = "password" | "github.com" | "google.com";
 
@@ -1323,122 +1276,6 @@ list.lbGoToPage = new SimpleModal({
   },
 });
 
-export function showPopup(
-  key: PopupKey,
-  showParams = [] as string[],
-  showOptions: ShowOptions = {},
-): void {
-  const popup = list[key];
-  if (popup === undefined) {
-    Notifications.add("Failed to show popup - popup is not defined", -1);
-    return;
-  }
-  popup.show(showParams, showOptions);
-}
-
-//todo: move these event handlers to their respective files (either global event files or popup files)
-qs(".pageAccountSettings")?.onChild("click", "#unlinkDiscordButton", () => {
-  showPopup("unlinkDiscord");
-});
-
-qs(".pageAccountSettings")?.onChild("click", "#removeGoogleAuth", () => {
-  showPopup("removeGoogleAuth");
-});
-
-qs(".pageAccountSettings")?.onChild("click", "#removeGithubAuth", () => {
-  showPopup("removeGithubAuth");
-});
-
-qs(".pageAccountSettings")?.onChild("click", "#removePasswordAuth", () => {
-  showPopup("removePasswordAuth");
-});
-
-qs("#resetSettingsButton")?.on("click", () => {
-  showPopup("resetSettings");
-});
-
-qs(".pageAccountSettings")?.onChild("click", "#revokeAllTokens", () => {
-  showPopup("revokeAllTokens");
-});
-
-qs(".pageAccountSettings")?.onChild(
-  "click",
-  "#resetPersonalBestsButton",
-  () => {
-    showPopup("resetPersonalBests");
-  },
-);
-
-qs(".pageAccountSettings")?.onChild("click", "#updateAccountName", () => {
-  showPopup("updateName");
-});
-
 qs("#bannerCenter")?.onChild("click", ".banner .text .openNameChange", () => {
   showPopup("updateName");
 });
-
-qs(".pageAccountSettings")?.onChild("click", "#addPasswordAuth", () => {
-  showPopup("addPasswordAuth");
-});
-
-qs(".pageAccountSettings")?.onChild("click", "#emailPasswordAuth", () => {
-  showPopup("updateEmail");
-});
-
-qs(".pageAccountSettings")?.onChild("click", "#passPasswordAuth", () => {
-  showPopup("updatePassword");
-});
-
-qs(".pageAccountSettings")?.onChild("click", "#deleteAccount", () => {
-  showPopup("deleteAccount");
-});
-
-qs(".pageAccountSettings")?.onChild("click", "#resetAccount", () => {
-  showPopup("resetAccount");
-});
-
-qs(".pageAccountSettings")?.onChild(
-  "click",
-  "#optOutOfLeaderboardsButton",
-  () => {
-    showPopup("optOutOfLeaderboards");
-  },
-);
-
-qs(".pageSettings")?.onChild(
-  "click",
-  ".section.themes .customTheme .delButton",
-  (e) => {
-    const $parentElement = (e.childTarget as HTMLElement | null)?.closest(
-      ".customTheme.button",
-    );
-    const customThemeId = $parentElement?.getAttribute(
-      "customThemeId",
-    ) as string;
-    showPopup("deleteCustomTheme", [customThemeId]);
-  },
-);
-
-qs(".pageSettings")?.onChild(
-  "click",
-  ".section.themes .customTheme .editButton",
-  (e) => {
-    const $parentElement = (e.childTarget as HTMLElement | null)?.closest(
-      ".customTheme.button",
-    );
-    const customThemeId = $parentElement?.getAttribute(
-      "customThemeId",
-    ) as string;
-    showPopup("updateCustomTheme", [customThemeId], {
-      focusFirstInput: "focusAndSelect",
-    });
-  },
-);
-
-qs(".pageSettings")?.onChild(
-  "click",
-  ".section[data-config-name='fontFamily'] button[data-config-value='custom']",
-  () => {
-    showPopup("applyCustomFont");
-  },
-);

frontend/src/ts/pages/account-settings.ts

@@ -13,6 +13,7 @@ import * as Notifications from "../elements/notifications";
 import { z } from "zod";
 import * as AuthEvent from "../observables/auth-event";
 import { qs, qsa, qsr, onDOMReady } from "../utils/dom";
+import { showPopup } from "../modals/simple-modals-base";
 
 const pageElement = qsr(".page.pageAccountSettings");
 
@@ -185,6 +186,66 @@ qs(".page.pageAccountSettings #setStreakHourOffset")?.on("click", () => {
   StreakHourOffsetModal.show();
 });
 
+qs(".pageAccountSettings")?.onChild("click", "#unlinkDiscordButton", () => {
+  showPopup("unlinkDiscord");
+});
+
+qs(".pageAccountSettings")?.onChild("click", "#removeGoogleAuth", () => {
+  showPopup("removeGoogleAuth");
+});
+
+qs(".pageAccountSettings")?.onChild("click", "#removeGithubAuth", () => {
+  showPopup("removeGithubAuth");
+});
+
+qs(".pageAccountSettings")?.onChild("click", "#removePasswordAuth", () => {
+  showPopup("removePasswordAuth");
+});
+
+qs(".pageAccountSettings")?.onChild("click", "#addPasswordAuth", () => {
+  showPopup("addPasswordAuth");
+});
+
+qs(".pageAccountSettings")?.onChild("click", "#emailPasswordAuth", () => {
+  showPopup("updateEmail");
+});
+
+qs(".pageAccountSettings")?.onChild("click", "#passPasswordAuth", () => {
+  showPopup("updatePassword");
+});
+
+qs(".pageAccountSettings")?.onChild("click", "#deleteAccount", () => {
+  showPopup("deleteAccount");
+});
+
+qs(".pageAccountSettings")?.onChild("click", "#resetAccount", () => {
+  showPopup("resetAccount");
+});
+
+qs(".pageAccountSettings")?.onChild(
+  "click",
+  "#optOutOfLeaderboardsButton",
+  () => {
+    showPopup("optOutOfLeaderboards");
+  },
+);
+
+qs(".pageAccountSettings")?.onChild("click", "#revokeAllTokens", () => {
+  showPopup("revokeAllTokens");
+});
+
+qs(".pageAccountSettings")?.onChild(
+  "click",
+  "#resetPersonalBestsButton",
+  () => {
+    showPopup("resetPersonalBests");
+  },
+);
+
+qs(".pageAccountSettings")?.onChild("click", "#updateAccountName", () => {
+  showPopup("updateName");
+});
+
 AuthEvent.subscribe((event) => {
   if (event.type === "authConfigUpdated") {
     updateUI();

frontend/src/ts/pages/settings.ts

@@ -44,6 +44,7 @@ import * as CustomFontPicker from "../elements/settings/custom-font-picker";
 import * as AuthEvent from "../observables/auth-event";
 import * as FpsLimitSection from "../elements/settings/fps-limit-section";
 import { qs, qsa, qsr, onDOMReady } from "../utils/dom";
+import { showPopup } from "../modals/simple-modals-base";
 
 let settingsInitialized = false;
 
@@ -979,6 +980,48 @@ qsa(".pageSettings .section .groupTitle button")?.on("click", (e) => {
     });
 });
 
+qs(".pageSettings")?.onChild(
+  "click",
+  ".section.themes .customTheme .delButton",
+  (e) => {
+    const parentElement = (e.childTarget as HTMLElement | null)?.closest(
+      ".customTheme.button",
+    );
+    const customThemeId = parentElement?.getAttribute(
+      "customThemeId",
+    ) as string;
+    showPopup("deleteCustomTheme", [customThemeId]);
+  },
+);
+
+qs(".pageSettings")?.onChild(
+  "click",
+  ".section.themes .customTheme .editButton",
+  (e) => {
+    const parentElement = (e.childTarget as HTMLElement | null)?.closest(
+      ".customTheme.button",
+    );
+    const customThemeId = parentElement?.getAttribute(
+      "customThemeId",
+    ) as string;
+    showPopup("updateCustomTheme", [customThemeId], {
+      focusFirstInput: "focusAndSelect",
+    });
+  },
+);
+
+qs(".pageSettings")?.onChild(
+  "click",
+  ".section[data-config-name='fontFamily'] button[data-config-value='custom']",
+  () => {
+    showPopup("applyCustomFont");
+  },
+);
+
+qs(".pageSettings #resetSettingsButton")?.on("click", () => {
+  showPopup("resetSettings");
+});
+
 ConfigEvent.subscribe(({ key, newValue }) => {
   if (key === "fullConfigChange") setEventDisabled(true);
   if (key === "fullConfigChangeFinished") setEventDisabled(false);