refactor: improve simple modals (@fehmer)

frontend/src/ts/components/modals/AddTagModal.tsx

@@ -1,37 +1,29 @@
 import { TagNameSchema } from "@monkeytype/schemas/users";
+import { z } from "zod";
 
 import { insertTag } from "../../collections/tags";
-import { hideLoaderBar, showLoaderBar } from "../../states/loader-bar";
 import { showSimpleModal } from "../../states/simple-modal";
 import { normalizeName } from "../../utils/strings";
 
 export function showAddTagModal(): void {
   showSimpleModal({
     title: "Add new tag",
     buttonText: "add",
-    inputs: [
-      {
+    schema: z.object({
+      tagName: TagNameSchema,
+    }),
+    inputs: {
+      tagName: {
         type: "text",
         placeholder: "tag name",
-        validation: {
-          isValid: async (tagName) => {
-            const validationResult = TagNameSchema.safeParse(
-              normalizeName(tagName),
-            );
-            if (validationResult.success) return true;
-            return validationResult.error.errors
-              .map((err) => err.message)
-              .join(", ");
-          },
-        },
+        preprocess: normalizeName,
       },
-    ],
-    execFn: async (name) => {
-      showLoaderBar();
+    },
+    execFn: async ({ tagName }) => {
       await insertTag({
-        name: normalizeName(name),
+        name: tagName,
       });
-      hideLoaderBar();
+
       return {
         status: "success",
         message: "Tag added",

frontend/src/ts/components/modals/QuoteSearchModal.tsx

@@ -7,6 +7,7 @@ import {
   Show,
   on,
 } from "solid-js";
+import { z } from "zod";
 
 import Ape from "../../ape";
 import { setConfig } from "../../config/setters";
@@ -350,19 +351,19 @@ export function QuoteSearchModal(): JSXElement {
       if (lengths.includes("4") && !hasCustomFilter()) {
         showSimpleModal({
           title: "Enter minimum and maximum number of words",
-          inputs: [
-            { type: "number", placeholder: "1" },
-            { type: "number", placeholder: "100" },
-          ],
           buttonText: "save",
-          execFn: async (min: string, max: string) => {
-            const minNum = parseInt(min, 10);
-            const maxNum = parseInt(max, 10);
-            if (isNaN(minNum) || isNaN(maxNum)) {
-              return { status: "notice", message: "Invalid min/max values" };
-            }
-            setCustomFilterMin(minNum);
-            setCustomFilterMax(maxNum);
+          schema: z.object({
+            min: z.number().int().safe().positive(),
+            max: z.number().int().safe().positive(),
+          }),
+          inputs: {
+            min: { type: "number", placeholder: "1" },
+            max: { type: "number", placeholder: "100" },
+          },
+
+          execFn: async ({ min, max }) => {
+            setCustomFilterMin(min);
+            setCustomFilterMax(max);
             setHasCustomFilter(true);
             return { status: "success", message: "Saved custom filter" };
           },