refactor: remove duplicate simple-modal implementation (@fehmer)

frontend/src/ts/elements/account-settings/ape-key-table.ts

@@ -10,9 +10,10 @@ import {
   ApeKeyNameSchema,
 } from "@monkeytype/schemas/ape-keys";
 import { format } from "date-fns/format";
-import { SimpleModal, TextArea } from "../simple-modal";
+import { SimpleModal } from "../simple-modal";
 import { isAuthenticated } from "../../states/core";
 import { qs, qsr } from "../../utils/dom";
+import { TextArea } from "../../states/simple-modal";
 
 const editApeKey = new SimpleModal({
   id: "editApeKey",

frontend/src/ts/elements/simple-modal.ts

@@ -9,113 +9,31 @@ import { showLoaderBar, hideLoaderBar } from "../states/loader-bar";
 import {
   showNoticeNotification,
   addNotificationWithLevel,
-  AddNotificationOptions,
 } from "../states/notifications";
 import {
   ValidatedHtmlInputElement,
   ValidationOptions,
 } from "./input-validation";
 import { ElementWithUtils, qsr } from "../utils/dom";
+import { ValidationResult } from "../types/validation";
 import {
-  IsValidResponse,
-  Validation,
-  ValidationResult,
-} from "../types/validation";
+  SimpleModalConfig,
+  SimpleModalInput,
+  ExecReturn as BaseExecReturn,
+} from "../states/simple-modal";
 
 const simpleModalEl = qsr<HTMLDialogElement>("#simpleModal");
 
-type CommonInput<TType, TValue> = {
-  type: TType;
-  initVal?: TValue;
-  placeholder?: string;
-  hidden?: boolean;
-  disabled?: boolean;
-  optional?: boolean;
-  label?: string;
-  oninput?: (event: Event) => void;
-  /**
-   * Validate the input value and indicate the validation result next to the input.
-   * If the schema is defined it is always checked first.
-   * Only if the schema validaton is passed or missing the `isValid` method is called.
-   */
-  validation?: Omit<Validation<string>, "isValid"> & {
-    /**
-     * Custom async validation method.
-     * This is intended to be used for validations that cannot be handled with a Zod schema like server-side validations.
-     * @param value current input value
-     * @param thisPopup the current modal
-     * @returns true if the `value` is valid, an errorMessage as string if it is invalid.
-     */
-    isValid?: (
-      value: string,
-      thisPopup: SimpleModal,
-    ) => Promise<IsValidResponse>;
-  };
-};
-
-export type TextInput = CommonInput<"text", string>;
-export type TextArea = CommonInput<"textarea", string>;
-export type PasswordInput = CommonInput<"password", string>;
-type EmailInput = CommonInput<"email", string>;
-
-type RangeInput = {
-  min: number;
-  max: number;
-  step?: number;
-} & CommonInput<"range", number>;
-
-type DateTimeInput = {
-  min?: Date;
-  max?: Date;
-} & CommonInput<"datetime-local", Date>;
-type DateInput = {
-  min?: Date;
-  max?: Date;
-} & CommonInput<"date", Date>;
-
-type CheckboxInput = {
-  label: string;
-  placeholder?: never;
-  description?: string;
-} & CommonInput<"checkbox", boolean>;
-
-type NumberInput = {
-  min?: number;
-  max?: number;
-} & CommonInput<"number", number>;
-
-type CommonInputType =
-  | TextInput
-  | TextArea
-  | PasswordInput
-  | EmailInput
-  | RangeInput
-  | DateTimeInput
-  | DateInput
-  | CheckboxInput
-  | NumberInput;
-
-export type ExecReturn = {
-  status: "success" | "notice" | "error";
-  message: string;
-  showNotification?: false;
-  notificationOptions?: AddNotificationOptions;
+export type ExecReturn = BaseExecReturn & {
   hideOptions?: HideOptions;
-  afterHide?: () => void;
-  alwaysHide?: boolean;
 };
 
-type FormInput = CommonInputType & {
+type FormInput = SimpleModalInput & {
   hasError?: boolean;
   currentValue: () => string;
 };
-type SimpleModalOptions = {
+type SimpleModalOptions = Omit<SimpleModalConfig, "execFn"> & {
   id: string;
-  title: string;
-  inputs?: CommonInputType[];
-  text?: string;
-  textAllowHtml?: boolean;
-  buttonText: string;
   execFn: (thisPopup: SimpleModal, ...params: string[]) => Promise<ExecReturn>;
   beforeInitFn?: (thisPopup: SimpleModal) => void;
   beforeShowFn?: (thisPopup: SimpleModal) => void;

frontend/src/ts/modals/edit-tag.ts

@@ -1,6 +1,6 @@
 import * as Settings from "../pages/settings";
 import AnimatedModal, { ShowOptions } from "../utils/animated-modal";
-import { SimpleModal, TextInput } from "../elements/simple-modal";
+import { SimpleModal } from "../elements/simple-modal";
 import { TagNameSchema } from "@monkeytype/schemas/users";
 import { IsValidResponse } from "../types/validation";
 import {
@@ -12,6 +12,7 @@ import {
 } from "../collections/tags";
 import { normalizeName } from "../utils/strings";
 import { deleteLocalTag } from "../collections/results";
+import { TextInput } from "../states/simple-modal";
 
 function errorMessage(e: unknown): string {
   return e instanceof Error ? e.message : String(e);

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

@@ -22,12 +22,6 @@ import { isDevEnvironment } from "../utils/env";
 import { createErrorMessage } from "../utils/error";
 import * as ThemeController from "../controllers/theme-controller";
 import * as AccountSettings from "../pages/account-settings";
-import {
-  ExecReturn,
-  PasswordInput,
-  SimpleModal,
-  TextInput,
-} from "../elements/simple-modal";
 
 import { GenerateDataRequest } from "@monkeytype/contracts/dev";
 import {
@@ -43,6 +37,8 @@ import { list, PopupKey, showPopup } from "./simple-modals-base";
 import { getTheme } from "../states/theme";
 import { normalizeName } from "../utils/strings";
 import { IsValidResponse } from "../types/validation";
+import { ExecReturn, SimpleModal } from "../elements/simple-modal";
+import { PasswordInput, TextInput } from "../states/simple-modal";
 
 export { list, showPopup };
 export type { PopupKey };
@@ -197,10 +193,6 @@ list.updateEmail = new SimpleModal({
       initVal: "",
       validation: {
         schema: UserEmailSchema,
-        isValid: async (currentValue, thisPopup) =>
-          currentValue === thisPopup.inputs?.[1]?.currentValue() ||
-          "Emails don't match",
-        debounceDelay: 0,
       },
     },
   ],

frontend/src/ts/states/simple-modal.ts

@@ -9,7 +9,7 @@ import {
 import { showLoaderBar, hideLoaderBar } from "./loader-bar";
 import { Validation } from "../types/validation";
 
-type CommonInput<TType, TValue> = {
+export type CommonInput<TType, TValue> = {
   type: TType;
   name?: string;
   initVal?: TValue;
@@ -19,6 +19,11 @@ type CommonInput<TType, TValue> = {
   optional?: boolean;
   label?: string;
   oninput?: (event: Event) => void;
+  /**
+   * Validate the input value and indicate the validation result next to the input.
+   * If the schema is defined it is always checked first.
+   * Only if the schema validaton is passed or missing the `isValid` method is called.
+   */
   validation?: Validation<string>;
 };