Add tsx syntax to TransitView.tsx.

src/pages/Secrets/Transit/TransitView.ts

@@ -1,80 +0,0 @@
-import { DoesNotExistError } from "../../../types/internalErrors";
-import { Page } from "../../../types/Page";
-import { SecretTitleElement } from "../SecretTitleElement";
-import { getTransitKeys } from "../../../api/transit/getTransitKeys";
-import { makeElement } from "z-makeelement";
-import { setErrorText } from "../../../pageUtils";
-import i18next from "i18next";
-
-export class TransitViewPage extends Page {
-  constructor() {
-    super();
-  }
-
-  async goBack(): Promise<void> {
-    await this.router.changePage("SECRETS_HOME");
-  }
-
-  async render(): Promise<void> {
-    this.state.secretItem = "";
-
-    const transitViewContent = makeElement({ tag: "div" });
-    await this.router.setPageContent(transitViewContent);
-
-    const newButton = makeElement({
-      tag: "button",
-      text: "New",
-      class: ["uk-button", "uk-button-primary", "uk-margin-bottom"],
-      onclick: async () => {
-        await this.router.changePage("TRANSIT_NEW_KEY");
-      },
-    });
-    transitViewContent.appendChild(newButton);
-
-    try {
-      const res = await getTransitKeys(this.state.baseMount);
-
-      transitViewContent.appendChild(
-        makeElement({
-          tag: "ul",
-          class: ["uk-nav", "uk-nav-default"],
-          children: [
-            ...res.map((secret) => {
-              return makeElement({
-                tag: "li",
-                children: makeElement({
-                  tag: "a",
-                  text: secret,
-                  onclick: async () => {
-                    this.state.secretItem = secret;
-                    await this.router.changePage("TRANSIT_VIEW_SECRET");
-                  },
-                }),
-              });
-            }),
-          ],
-        }),
-      );
-    } catch (e: unknown) {
-      const error = e as Error;
-      if (error == DoesNotExistError) {
-        transitViewContent.appendChild(
-          makeElement({
-            tag: "p",
-            text: i18next.t("transit_view_none_here_text"),
-          }),
-        );
-      } else {
-        setErrorText(error.message);
-      }
-    }
-  }
-
-  async getPageTitle(): Promise<Element | string> {
-    return await SecretTitleElement(this.router);
-  }
-
-  get name(): string {
-    return i18next.t("transit_view_title");
-  }
-}

src/pages/Secrets/Transit/TransitView.tsx

@@ -0,0 +1,107 @@
+import { Component, JSX, render } from "preact";
+import { Page } from "../../../types/Page";
+import { SecretTitleElement } from "../SecretTitleElement";
+import { getTransitKeys } from "../../../api/transit/getTransitKeys";
+import i18next from "i18next";
+
+type TransitViewListState = {
+  contentLoaded: boolean;
+  transitKeysList: string[];
+};
+
+export class TransitViewListItem extends Component<{ page: Page }, TransitViewListState> {
+  constructor() {
+    super();
+    this.state = {
+      contentLoaded: false,
+      transitKeysList: [],
+    };
+  }
+
+  timer: unknown;
+
+  getTransitKeys(): void {
+    void getTransitKeys(this.props.page.state.baseMount)
+      .then((keys) => {
+        this.setState({
+          contentLoaded: true,
+          transitKeysList: keys,
+        });
+      })
+      .catch((_) => {
+        this.setState({
+          contentLoaded: true,
+          transitKeysList: [],
+        });
+      });
+  }
+
+  componentDidMount(): void {
+    this.getTransitKeys();
+  }
+
+  render(): JSX.Element {
+    if (!this.state.contentLoaded) {
+      return <p>{i18next.t("content_loading")}</p>;
+    }
+
+    if (this.state.transitKeysList.length == 0) {
+      return <p>{i18next.t("transit_view_none_here_text")}</p>;
+    }
+
+    return (
+      <ul class="uk-nav uk-nav-default">
+        {...this.state.transitKeysList.map((key) => (
+          <li>
+            <a
+              onClick={async () => {
+                this.props.page.state.secretItem = key;
+                await this.props.page.router.changePage("TRANSIT_VIEW_SECRET");
+              }}
+            >
+              {key}
+            </a>
+          </li>
+        ))}
+      </ul>
+    );
+  }
+}
+
+export class TransitViewPage extends Page {
+  constructor() {
+    super();
+  }
+
+  async goBack(): Promise<void> {
+    await this.router.changePage("SECRETS_HOME");
+  }
+
+  async render(): Promise<void> {
+    this.state.secretItem = "";
+    render(
+      <>
+        <p>
+          <button
+            class="uk-button uk-button-primary"
+            onClick={async () => {
+              await this.router.changePage("TRANSIT_NEW_KEY");
+            }}
+          >
+            {i18next.t("transit_view_new_btn")}
+          </button>
+        </p>
+        <TransitViewListItem page={this} />
+      </>,
+      this.router.pageContentElement,
+    );
+  }
+
+  async getPageTitle(): Promise<Element | string> {
+    return await SecretTitleElement(this.router);
+  }
+
+  get name(): string {
+    return i18next.t("transit_view_title");
+  }
+}

src/translations/en.js

@@ -19,6 +19,9 @@ module.exports = {
   copy_modal_copy_btn: "Copy",
   copy_modal_close_btn: "Close",
 
+  // Generic Loading Text
+  content_loading: "Loading..",
+
   // Copyable Input Box
   copy_input_box_copy_icon_text: "Copy Button",
 
@@ -169,6 +172,7 @@ module.exports = {
 
   // Transit View Page
   transit_view_title: "Transit View",
+  transit_view_new_btn: "New",
   transit_view_none_here_text:
     "You seem to have no transit keys here, would you like to create one?",