From ba3df3af7891e174ebf3b3994467f19194e2ac2f Mon Sep 17 00:00:00 2001
From: Kitteh <kitteh@kitteh.pw>
Date: Sun, 9 May 2021 14:21:40 +0100
Subject: [PATCH] Move makeTile to Tile.ts

---
 src/elements/Tile.ts                   | 44 +++++++++++++
 src/pages/Transit/TransitViewSecret.ts | 88 ++++++++------------------
 2 files changed, 69 insertions(+), 63 deletions(-)
 create mode 100644 src/elements/Tile.ts

diff --git a/src/elements/Tile.ts b/src/elements/Tile.ts
new file mode 100644
index 0000000..b4425c0
--- /dev/null
+++ b/src/elements/Tile.ts
@@ -0,0 +1,44 @@
+import { makeElement } from "../htmlUtils";
+
+type TileParams = {
+  condition: Boolean;
+  title: string;
+  description: string;
+  icon: string;
+  iconText: string;
+  onclick: () => void;
+}
+
+export function Tile(params: TileParams): HTMLElement {
+  if (!params.condition) return;
+  return makeElement({
+    tag: "a",
+    class: "uk-link-heading",
+    onclick: params.onclick,
+    children: makeElement({
+      tag: "div",
+      class: ["uk-padding-small", "uk-background-primary"],
+      children: [
+        makeElement({
+          tag: "p",
+          class: "uk-h4",
+          text: params.title,
+          children: makeElement({
+            tag: "span",
+            class: ["uk-icon", "uk-margin-small-left"],
+            attributes: {
+              "uk-icon": `icon: ${params.icon}`,
+              "role": "img",
+              "aria-label": params.iconText
+            }
+          })
+        }),
+        makeElement({
+          tag: "span",
+          class: "uk-text-muted",
+          text: params.description
+        })
+      ]
+    })
+  });
+}
\ No newline at end of file
diff --git a/src/pages/Transit/TransitViewSecret.ts b/src/pages/Transit/TransitViewSecret.ts
index 83a0757..eaf583b 100644
--- a/src/pages/Transit/TransitViewSecret.ts
+++ b/src/pages/Transit/TransitViewSecret.ts
@@ -4,6 +4,7 @@ import { makeElement } from "../../htmlUtils";
 import { pageState } from "../../globalPageState";
 import i18next from 'i18next';
 import { getTransitKey } from "../../api/transit/getTransitKey";
+import { Tile } from "../../elements/Tile";
 
 type TileParams = {
   condition: Boolean;
@@ -23,40 +24,6 @@ export class TransitViewSecretPage extends Page {
     changePage("TRANSIT_VIEW");
   }
 
-  makeTile(params: TileParams): HTMLElement {
-    if (!params.condition) return;
-    return makeElement({
-      tag: "a",
-      class: "uk-link-heading",
-      onclick: params.onclick,
-      children: makeElement({
-        tag: "div",
-        class: ["uk-padding-small", "uk-background-primary"],
-        children: [
-          makeElement({
-            tag: "p",
-            class: "uk-h4",
-            text: params.title,
-            children: makeElement({
-              tag: "span",
-              class: ["uk-icon", "uk-margin-small-left"],
-              attributes: {
-                "uk-icon": `icon: ${params.icon}`,
-                "role": "img",
-                "aria-label": params.iconText
-              }
-            })
-          }),
-          makeElement({
-            tag: "span",
-            class: "uk-text-muted",
-            text: params.description
-          })
-        ]
-      })
-    });
-  }
-
   async render(): Promise<void> {
     setTitleElement(pageState);
 
@@ -64,36 +31,31 @@ export class TransitViewSecretPage extends Page {
 
     setPageContent(makeElement({
       tag: "div",
-      class: ["uk-grid", "uk-child-width-expand@s"],
+      class: ["uk-list", "uk-width-1-1@s"],
       attributes: { "uk-grid": "" },
-      children: makeElement({
-        tag: "div",
-        class: ["uk-list", "uk-width-2-3@s"],
-        attributes: { "uk-grid": "" },
-        children: [
-          makeElement({
-            tag: "div",
-            children: [
-              this.makeTile({
-                condition: transitKey.supports_encryption,
-                title: i18next.t("transit_view_encrypt_text"),
-                description: i18next.t("transit_view_encrypt_description"),
-                icon: "lock",
-                iconText: i18next.t("transit_view_encrypt_icon_text"),
-                onclick: () => { changePage("TRANSIT_ENCRYPT"); }
-              }),
-              this.makeTile({
-                condition: transitKey.supports_decryption,
-                title: i18next.t("transit_view_decrypt_text"),
-                description: i18next.t("transit_view_decrypt_description"),
-                icon: "mail",
-                iconText: i18next.t("transit_view_decrypt_icon_text"),
-                onclick: () => { changePage("TRANSIT_DECRYPT"); }
-              }),
-            ]
-          }),
-        ]
-      })
+      children: [
+        makeElement({
+          tag: "div",
+          children: [
+            Tile({
+              condition: transitKey.supports_encryption,
+              title: i18next.t("transit_view_encrypt_text"),
+              description: i18next.t("transit_view_encrypt_description"),
+              icon: "lock",
+              iconText: i18next.t("transit_view_encrypt_icon_text"),
+              onclick: () => { changePage("TRANSIT_ENCRYPT"); }
+            }),
+            Tile({
+              condition: transitKey.supports_decryption,
+              title: i18next.t("transit_view_decrypt_text"),
+              description: i18next.t("transit_view_decrypt_description"),
+              icon: "mail",
+              iconText: i18next.t("transit_view_decrypt_icon_text"),
+              onclick: () => { changePage("TRANSIT_DECRYPT"); }
+            }),
+          ]
+        }),
+      ]
     }));
   }