feat: update createFilterPreset to return status code and simplify error handling

Author: AmanDevelops

frontend/src/ts/elements/account/result-filters.ts

@@ -179,7 +179,9 @@ function addFilterPresetToSnapshot(filter: ResultFilters): void {
 }
 
 // callback function called by popup once user inputs name
-export async function createFilterPreset(name: string): Promise<void> {
+export async function createFilterPreset(
+  name: string
+): Promise<number | undefined> {
   name = name.replace(/ /g, "_");
   Loader.show();
   const result = await Ape.users.addResultFilterPreset({
@@ -189,13 +191,10 @@ export async function createFilterPreset(name: string): Promise<void> {
   if (result.status === 200) {
     addFilterPresetToSnapshot({ ...filters, name, _id: result.body.data });
     void updateFilterPresets();
-    Notifications.add("Filter preset created", 1);
+    return 1;
   } else {
-    Notifications.add(
-      "Error creating filter preset: " + result.body.message,
-      -1
-    );
     console.log("error creating filter preset: " + result.body.message);
+    return 0;
   }
 }
 

frontend/src/ts/modals/new-filter-preset.ts

@@ -1,80 +1,35 @@
-import { createFilterPreset } from "../elements/account/result-filters";
-import AnimatedModal, { ShowOptions } from "../utils/animated-modal";
-import * as Notifications from "../elements/notifications";
-import { InputIndicator } from "../elements/input-indicator";
 import { ResultFiltersSchema } from "@monkeytype/schemas/users";
+import { createFilterPreset } from "../elements/account/result-filters";
+import { SimpleModal } from "../utils/simple-modal";
 
-export function show(showOptions?: ShowOptions): void {
-  void modal.show({
-    ...showOptions,
-    focusFirstInput: true,
-    beforeAnimation: async (modalEl) => {
-      (modalEl.querySelector("input") as HTMLInputElement).value = "";
-
-      const indicator = $(modalEl).data("indicator") as
-        | InputIndicator
-        | undefined;
-      if (indicator) {
-        indicator.hide();
-      }
-    },
-  });
-}
-
-function hide(clearChain = false): void {
-  void modal.hide({
-    clearModalChain: clearChain,
-  });
-}
-
-function apply(): void {
-  const name = $("#newFilterPresetModal input").val() as string;
-  if (name === "") {
-    Notifications.add("Name cannot be empty", 0);
-    return;
-  }
-  void createFilterPreset(name);
-  hide(true);
+export function show(): void {
+  newFilterPresetModal.show(undefined, {});
 }
 
-function addValidation(element: JQuery, schema: Zod.Schema): InputIndicator {
-  const indicator = new InputIndicator(element, {
-    valid: { icon: "fa-check", level: 1 },
-    invalid: { icon: "fa-times", level: -1 },
-  });
-
-  element.on("input", (event) => {
-    const value = (event.target as HTMLInputElement).value;
-    if (value === undefined || value === "") {
-      indicator.hide();
-      return;
-    }
-    const validationResult = schema.safeParse(value);
-    if (!validationResult.success) {
-      indicator.show(
-        "invalid",
-        validationResult.error.errors.map((err) => err.message).join(", ")
-      );
-      return;
+const newFilterPresetModal = new SimpleModal({
+  id: "newFilterPresetModal",
+  title: "New Filter Preset",
+  inputs: [
+    {
+      placeholder: "Preset Name",
+      type: "text",
+      initVal: "",
+      validation: {
+        schema: ResultFiltersSchema.shape.name,
+      },
+    },
+  ],
+  buttonText: "add",
+  onlineOnly: true,
+  execFn: async (_thisPopup, name) => {
+    const status = await createFilterPreset(name);
+
+    if (status === 1) {
+      return { status: 1, message: "Filter preset created" };
+    } else {
+      let status: -1 | 0 | 1 = -1;
+      let message: string = "Error creating filter preset";
+      return { status, message, alwaysHide: true };
     }
-    indicator.show("valid");
-  });
-  return indicator;
-}
-
-async function setup(modalEl: HTMLElement): Promise<void> {
-  modalEl.addEventListener("submit", (e) => {
-    e.preventDefault();
-    apply();
-  });
-
-  const inputElement = $(modalEl).find("input");
-
-  const indicator = addValidation(inputElement, ResultFiltersSchema.shape.name);
-  $(modalEl).data("indicator", indicator);
-}
-
-const modal = new AnimatedModal({
-  dialogId: "newFilterPresetModal",
-  setup,
+  },
 });