refactor: remove jquery in modals/word-filter

Author: fcasibu

frontend/src/ts/modals/word-filter.ts

@@ -12,6 +12,7 @@ import { tryCatch } from "@monkeytype/util/trycatch";
 import { LanguageList } from "../constants/languages";
 import { Language } from "@monkeytype/schemas/languages";
 import { LayoutObject } from "@monkeytype/schemas/layouts";
+import { qs, qsr } from "../utils/dom";
 
 type FilterPreset = {
   display: string;
@@ -26,7 +27,9 @@ type FilterPreset = {
     }
 );
 
-const exactMatchCheckbox = $("#wordFilterModal #exactMatchOnly");
+const exactMatchCheckbox = qs<HTMLInputElement>(
+  "#wordFilterModal #exactMatchOnly",
+);
 
 const presets: Record<string, FilterPreset> = {
   homeKeys: {
@@ -82,26 +85,26 @@ const presets: Record<string, FilterPreset> = {
 };
 
 async function initSelectOptions(): Promise<void> {
-  $("#wordFilterModal .languageInput").empty();
-  $("#wordFilterModal .layoutInput").empty();
-  $("wordFilterModal .presetInput").empty();
+  qsr("#wordFilterModal .languageInput").empty();
+  qsr("#wordFilterModal .layoutInput").empty();
+  qsr("wordFilterModal .presetInput").empty();
 
   LanguageList.forEach((language) => {
     const prettyLang = language.replace(/_/gi, " ");
-    $("#wordFilterModal .languageInput").append(`
+    qsr("#wordFilterModal .languageInput").appendHtml(`
         <option value=${language}>${prettyLang}</option>
       `);
   });
 
   for (const layout of LayoutsList) {
     const prettyLayout = layout.replace(/_/gi, " ");
-    $("#wordFilterModal .layoutInput").append(`
+    qsr("#wordFilterModal .layoutInput").appendHtml(`
       <option value=${layout}>${prettyLayout}</option>
     `);
   }
 
   for (const [presetId, preset] of Object.entries(presets)) {
-    $("#wordFilterModal .presetInput").append(
+    qsr("#wordFilterModal .presetInput").appendHtml(
       `<option value=${presetId}>${preset.display}</option>`,
     );
   }
@@ -133,7 +136,7 @@ export async function show(showOptions?: ShowOptions): Promise<void> {
           contentLocation: modal.getModal(),
         },
       });
-      $("#wordFilterModal .loadingIndicator").removeClass("hidden");
+      qsr("#wordFilterModal .loadingIndicator").removeClass("hidden");
       enableButtons();
     },
   });
@@ -146,8 +149,10 @@ function hide(hideOptions?: HideOptions<OutgoingData>): void {
 }
 
 async function filter(language: Language): Promise<string[]> {
-  const exactMatchOnly = exactMatchCheckbox.is(":checked");
-  let filterin = $("#wordFilterModal .wordIncludeInput").val() as string;
+  const exactMatchOnly = exactMatchCheckbox?.isChecked() as boolean;
+  let filterin = qsr<HTMLInputElement>(
+    "#wordFilterModal .wordIncludeInput",
+  ).getValue() as string;
   filterin = Misc.escapeRegExp(filterin?.trim());
   filterin = filterin.replace(/\s+/gi, "|");
   let regincl;
@@ -158,7 +163,9 @@ async function filter(language: Language): Promise<string[]> {
     regincl = new RegExp(filterin, "i");
   }
 
-  let filterout = $("#wordFilterModal .wordExcludeInput").val() as string;
+  let filterout = qsr<HTMLInputElement>(
+    "#wordFilterModal .wordExcludeInput",
+  ).getValue() as string;
   filterout = Misc.escapeRegExp(filterout.trim());
   filterout = filterout.replace(/\s+/gi, "|");
   const regexcl = new RegExp(filterout, "i");
@@ -175,8 +182,12 @@ async function filter(language: Language): Promise<string[]> {
     return [];
   }
 
-  const maxLengthInput = $("#wordFilterModal .wordMaxInput").val() as string;
-  const minLengthInput = $("#wordFilterModal .wordMinInput").val() as string;
+  const maxLengthInput = qsr<HTMLInputElement>(
+    "#wordFilterModal .wordMaxInput",
+  ).getValue() as string;
+  const minLengthInput = qsr<HTMLInputElement>(
+    "#wordFilterModal .wordMinInput",
+  ).getValue() as string;
   let maxLength;
   let minLength;
   if (maxLengthInput === "") {
@@ -204,7 +215,9 @@ async function filter(language: Language): Promise<string[]> {
 }
 
 async function apply(set: boolean): Promise<void> {
-  const language = $("#wordFilterModal .languageInput").val() as Language;
+  const language = qsr<HTMLSelectElement>(
+    "#wordFilterModal .languageInput",
+  ).getValue() as Language;
   const filteredWords = await filter(language);
 
   if (filteredWords.length === 0) {
@@ -226,16 +239,22 @@ async function apply(set: boolean): Promise<void> {
 }
 
 function setExactMatchInput(disable: boolean): void {
-  const wordExcludeInputEl = $("#wordFilterModal #wordExcludeInput");
+  const wordExcludeInputEl = qsr<HTMLInputElement>(
+    "#wordFilterModal #wordExcludeInput",
+  );
 
   if (disable) {
-    $("#wordFilterModal #wordExcludeInput").val("");
-    wordExcludeInputEl.attr("disabled", "disabled");
+    wordExcludeInputEl.setValue("");
+    wordExcludeInputEl.disable();
   } else {
-    wordExcludeInputEl.removeAttr("disabled");
+    wordExcludeInputEl.enable();
   }
 
-  exactMatchCheckbox.prop("checked", disable);
+  if (disable) {
+    exactMatchCheckbox?.removeAttribute("checked");
+  } else {
+    exactMatchCheckbox?.setAttribute("checked", "true");
+  }
 }
 
 function disableButtons(): void {
@@ -253,9 +272,13 @@ function enableButtons(): void {
 async function setup(): Promise<void> {
   await initSelectOptions();
 
-  $("#wordFilterModal button.generateButton").on("click", async () => {
-    const presetName = $("#wordFilterModal .presetInput").val() as string;
-    const layoutName = $("#wordFilterModal .layoutInput").val() as string;
+  qsr("#wordFilterModal button.generateButton").on("click", async () => {
+    const presetName = qsr<HTMLSelectElement>(
+      "#wordFilterModal .presetInput",
+    ).getValue() as string;
+    const layoutName = qsr<HTMLSelectElement>(
+      "#wordFilterModal .layoutInput",
+    ).getValue() as string;
 
     const presetToApply = presets[presetName];
 
@@ -266,7 +289,7 @@ async function setup(): Promise<void> {
 
     const layout = await JSONData.getLayout(layoutName);
 
-    $("#wordIncludeInput").val(
+    qsr<HTMLInputElement>("#wordIncludeInput").setValue(
       presetToApply
         .getIncludeString(layout)
         .map((x) => x[0])
@@ -278,7 +301,7 @@ async function setup(): Promise<void> {
     } else {
       setExactMatchInput(false);
       if (presetToApply.getExcludeString !== undefined) {
-        $("#wordExcludeInput").val(
+        qsr<HTMLInputElement>("#wordExcludeInput").setValue(
           presetToApply
             .getExcludeString(layout)
             .map((x) => x[0])
@@ -288,20 +311,20 @@ async function setup(): Promise<void> {
     }
   });
 
-  exactMatchCheckbox.on("change", () => {
-    setExactMatchInput(exactMatchCheckbox.is(":checked"));
+  exactMatchCheckbox?.on("change", () => {
+    setExactMatchInput(exactMatchCheckbox.isChecked() as boolean);
   });
 
-  $("#wordFilterModal button.addButton").on("click", () => {
-    $("#wordFilterModal .loadingIndicator").removeClass("hidden");
+  qsr("#wordFilterModal button.addButton").on("click", () => {
+    qsr("#wordFilterModal .loadingIndicator").show();
     disableButtons();
     setTimeout(() => {
       void apply(false);
     }, 0);
   });
 
-  $("#wordFilterModal button.setButton").on("click", () => {
-    $("#wordFilterModal .loadingIndicator").removeClass("hidden");
+  qsr("#wordFilterModal button.setButton").on("click", () => {
+    qsr("#wordFilterModal .loadingIndicator").show();
     disableButtons();
     setTimeout(() => {
       void apply(true);