refactor: extract methods for finding elements

sicamp · Jun 2, 2024 · 00a7bd2 · 00a7bd2
1 parent c69d3e7
commit 00a7bd2
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 85 deletions.
diff --git a/src/settings.ts b/src/settings.ts
@@ -22,59 +22,30 @@ export class SettingsManager {
     private readonly downloadSvg: HTMLButtonElement;
 
     constructor(private readonly form: HTMLFormElement) {
-        const themeSelect =
-            this.form.querySelector<HTMLSelectElement>("#theme");
-
-        if (!themeSelect) {
-            throw new Error("Cannot find theme select");
-        }
-
-        this.themeSelect = themeSelect;
-
-        const inputTextArea =
-            this.form.querySelector<HTMLTextAreaElement>("textarea");
-
-        if (!inputTextArea) {
-            throw new Error("Cannot find text area");
-        }
-
-        this.textarea = inputTextArea;
-
-        const fontSizeInput =
-            this.form.querySelector<HTMLInputElement>("#font");
-
-        if (!fontSizeInput) {
-            throw new Error("Cannot find font-size input");
-        }
-
-        this.fontSizeInput = fontSizeInput;
-
-        const alignSelect =
-            this.form.querySelector<HTMLSelectElement>("#align");
-
-        if (!alignSelect) {
-            throw new Error("Cannot find align select");
-        }
-
-        this.alignSelect = alignSelect;
-
-        const downloadPng =
-            this.form.querySelector<HTMLButtonElement>("[name=png]");
-
-        if (!downloadPng) {
-            throw new Error("Cannot find download PNG button");
-        }
-
-        this.downloadPng = downloadPng;
-
-        const downloadSvg =
-            this.form.querySelector<HTMLButtonElement>("[name=svg]");
-
-        if (!downloadSvg) {
-            throw new Error("Cannot find download SVG button");
-        }
-
-        this.downloadSvg = downloadSvg;
+        this.themeSelect = this.querySelector<HTMLSelectElement>(
+            "#theme",
+            "Cannot find theme select",
+        );
+        this.textarea = this.querySelector<HTMLTextAreaElement>(
+            "textarea",
+            "Cannot find text area",
+        );
+        this.fontSizeInput = this.querySelector<HTMLInputElement>(
+            "#font",
+            "Cannot find font-size input",
+        );
+        this.alignSelect = this.querySelector<HTMLSelectElement>(
+            "#align",
+            "Cannot find align select",
+        );
+        this.downloadPng = this.querySelector<HTMLButtonElement>(
+            "[name=png]",
+            "Cannot find download PNG button",
+        );
+        this.downloadSvg = this.querySelector<HTMLButtonElement>(
+            "[name=svg]",
+            "Cannot find download SVG button",
+        );
 
         this.form.addEventListener("submit", (event) => event.preventDefault());
     }
@@ -119,4 +90,17 @@ export class SettingsManager {
     get textAlign(): TextAlign {
         return this.alignSelect.value as TextAlign;
     }
+
+    protected querySelector<E extends Element = Element>(
+        selector: string,
+        error: string,
+    ): E {
+        const element = this.form.querySelector<E>(selector);
+
+        if (!element) {
+            throw new Error(error);
+        }
+
+        return element;
+    }
 }
diff --git a/src/svg.ts b/src/svg.ts
@@ -39,29 +39,22 @@ export class SvgBuilder {
     private readonly location: SVGTextElement;
 
     constructor(private readonly element: SVGElement) {
-        const theme = this.element.querySelector<SVGGeometryElement>(".theme");
-
-        if (!theme) {
-            throw new Error("Cannot find theme element");
-        }
-
-        this.theme = theme;
-
-        const title = this.element.querySelector<SVGTextElement>(".title");
-
-        if (!title) {
-            throw new Error("Cannot find title element");
-        }
-
-        this.title = title;
-
-        const stripes = this.element.querySelector<SVGElement>(".stripes");
-
-        if (!stripes) {
-            throw new Error("Cannot find stripes element");
-        }
-
-        this.stripes = stripes;
+        this.theme = this.querySelector<SVGGeometryElement>(
+            ".theme",
+            "Cannot find theme element",
+        );
+        this.title = this.querySelector<SVGTextElement>(
+            ".title",
+            "Cannot find title element",
+        );
+        this.stripes = this.querySelector<SVGElement>(
+            ".stripes",
+            "Cannot find stripes element",
+        );
+        this.location = this.querySelector<SVGTextElement>(
+            ".location",
+            "Cannot find title element",
+        );
 
         const [left, right] =
             this.element.querySelectorAll<SVGTextElement>(".year");
@@ -71,15 +64,6 @@ export class SvgBuilder {
         }
 
         this.year = [left, right];
-
-        const location =
-            this.element.querySelector<SVGTextElement>(".location");
-
-        if (!location) {
-            throw new Error("Cannot find title element");
-        }
-
-        this.location = location;
     }
 
     setTheme(newTheme: string) {
@@ -246,4 +230,17 @@ export class SvgBuilder {
 
         return rect;
     }
+
+    protected querySelector<E extends Element = Element>(
+        selector: string,
+        error: string,
+    ): E {
+        const element = this.element.querySelector<E>(selector);
+
+        if (!element) {
+            throw new Error(error);
+        }
+
+        return element;
+    }
 }