From b2d10e0dc56cd9d4d8ca6f91cf526492b925c550 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Tue, 12 Mar 2024 23:46:40 +0100
Subject: [PATCH] refactor(import export modal): use setup function, move file,
 style

---
 frontend/src/html/popups.html                 |  2 +-
 frontend/src/styles/popups.scss               | 13 ++----
 .../import-export-settings.ts}                | 46 +++++++++++--------
 frontend/src/ts/pages/settings.ts             |  6 +--
 4 files changed, 34 insertions(+), 33 deletions(-)
 rename frontend/src/ts/{popups/import-export-settings-popup.ts => modals/import-export-settings.ts} (59%)

diff --git a/frontend/src/html/popups.html b/frontend/src/html/popups.html
index 8e47faf48..4b1b800c2 100644
--- a/frontend/src/html/popups.html
+++ b/frontend/src/html/popups.html
@@ -362,7 +362,7 @@
   </div>
 </div>
 
-<dialog id="settingsImportPopup" class="modalWrapper hidden">
+<dialog id="importExportSettingsModal" class="modalWrapper hidden">
   <form class="modal" data-mode="">
     <input type="text" title="import settings" />
     <button>import settings</button>
diff --git a/frontend/src/styles/popups.scss b/frontend/src/styles/popups.scss
index 7089b14c8..5b59d6123 100644
--- a/frontend/src/styles/popups.scss
+++ b/frontend/src/styles/popups.scss
@@ -922,15 +922,10 @@
     }
   }
 }
-#settingsImportWrapper {
-  #settingsImport {
-    width: 50vw;
-    background: var(--bg-color);
-    border-radius: var(--roundness);
-    padding: 2rem;
-    display: grid;
-    gap: 1rem;
-    overflow-y: scroll;
+
+#importExportSettingsModal {
+  .modal {
+    max-width: 900px;
   }
 }
 
diff --git a/frontend/src/ts/popups/import-export-settings-popup.ts b/frontend/src/ts/modals/import-export-settings.ts
similarity index 59%
rename from frontend/src/ts/popups/import-export-settings-popup.ts
rename to frontend/src/ts/modals/import-export-settings.ts
index 61db16a2c..8b067b8cf 100644
--- a/frontend/src/ts/popups/import-export-settings-popup.ts
+++ b/frontend/src/ts/modals/import-export-settings.ts
@@ -38,24 +38,30 @@ export function show(mode: "import" | "export", config?: string): void {
   });
 }
 
-$("#settingsImportPopup input").on("input", (e) => {
-  state.value = (e.target as HTMLInputElement).value;
-});
-
-$("#settingsImportPopup form").on("submit", async (e) => {
-  e.preventDefault();
-  if (state.mode !== "import") return;
-  if (state.value === "") {
-    void modal.hide();
-    return;
+const modal = new AnimatedModal(
+  "importExportSettingsModal",
+  "popups",
+  undefined,
+  {
+    setup: async (modalEl): Promise<void> => {
+      modalEl.querySelector("input")?.addEventListener("input", (e) => {
+        state.value = (e.target as HTMLInputElement).value;
+      });
+      modalEl.querySelector("form")?.addEventListener("submit", async (e) => {
+        e.preventDefault();
+        if (state.mode !== "import") return;
+        if (state.value === "") {
+          void modal.hide();
+          return;
+        }
+        try {
+          await UpdateConfig.apply(JSON.parse(state.value));
+        } catch (e) {
+          Notifications.add("Failed to import settings: " + e, -1);
+        }
+        UpdateConfig.saveFullConfigToLocalStorage();
+        void modal.hide();
+      });
+    },
   }
-  try {
-    await UpdateConfig.apply(JSON.parse(state.value));
-  } catch (e) {
-    Notifications.add("Failed to import settings: " + e, -1);
-  }
-  UpdateConfig.saveFullConfigToLocalStorage();
-  void modal.hide();
-});
-
-const modal = new AnimatedModal("settingsImportPopup", "popups");
+);
diff --git a/frontend/src/ts/pages/settings.ts b/frontend/src/ts/pages/settings.ts
index a31571c15..2f0fa11c1 100644
--- a/frontend/src/ts/pages/settings.ts
+++ b/frontend/src/ts/pages/settings.ts
@@ -8,7 +8,7 @@ import * as TagController from "../controllers/tag-controller";
 import * as PresetController from "../controllers/preset-controller";
 import * as ThemePicker from "../settings/theme-picker";
 import * as Notifications from "../elements/notifications";
-import * as ImportExportSettingsPopup from "../popups/import-export-settings-popup";
+import * as ImportExportSettingsModal from "../modals/import-export-settings";
 import * as ConfigEvent from "../observables/config-event";
 import * as ActivePage from "../states/active-page";
 import * as ApeKeysPopup from "../popups/ape-keys-popup";
@@ -1128,7 +1128,7 @@ $(".pageSettings .section.presets").on(
 );
 
 $("#importSettingsButton").on("click", () => {
-  ImportExportSettingsPopup.show("import");
+  ImportExportSettingsModal.show("import");
 });
 
 $("#exportSettingsButton").on("click", () => {
@@ -1138,7 +1138,7 @@ $("#exportSettingsButton").on("click", () => {
       Notifications.add("JSON Copied to clipboard", 0);
     },
     function () {
-      ImportExportSettingsPopup.show("export");
+      ImportExportSettingsModal.show("export");
     }
   );
 });