From 17a45e6c7601b0551fda1afc1ecf0adcd1dcde2c Mon Sep 17 00:00:00 2001 From: Kitteh Date: Sun, 23 May 2021 14:55:17 +0100 Subject: [PATCH] Add tsx syntax to TransitView.tsx. --- src/pages/Secrets/Transit/TransitView.ts | 80 ---------------- src/pages/Secrets/Transit/TransitView.tsx | 107 ++++++++++++++++++++++ src/translations/en.js | 4 + 3 files changed, 111 insertions(+), 80 deletions(-) delete mode 100644 src/pages/Secrets/Transit/TransitView.ts create mode 100644 src/pages/Secrets/Transit/TransitView.tsx diff --git a/src/pages/Secrets/Transit/TransitView.ts b/src/pages/Secrets/Transit/TransitView.ts deleted file mode 100644 index 7b4af87..0000000 --- a/src/pages/Secrets/Transit/TransitView.ts +++ /dev/null @@ -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 { - await this.router.changePage("SECRETS_HOME"); - } - - async render(): Promise { - 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 { - return await SecretTitleElement(this.router); - } - - get name(): string { - return i18next.t("transit_view_title"); - } -} diff --git a/src/pages/Secrets/Transit/TransitView.tsx b/src/pages/Secrets/Transit/TransitView.tsx new file mode 100644 index 0000000..46280eb --- /dev/null +++ b/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

{i18next.t("content_loading")}

; + } + + if (this.state.transitKeysList.length == 0) { + return

{i18next.t("transit_view_none_here_text")}

; + } + + return ( + + ); + } +} + +export class TransitViewPage extends Page { + constructor() { + super(); + } + + async goBack(): Promise { + await this.router.changePage("SECRETS_HOME"); + } + + async render(): Promise { + this.state.secretItem = ""; + render( + <> +

+ +

+ + , + this.router.pageContentElement, + ); + } + + async getPageTitle(): Promise { + return await SecretTitleElement(this.router); + } + + get name(): string { + return i18next.t("transit_view_title"); + } +} diff --git a/src/translations/en.js b/src/translations/en.js index ad3aeba..f42c34b 100644 --- a/src/translations/en.js +++ b/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?",