1
0
Fork 0

Add tsx syntax to TransitView.tsx.

This commit is contained in:
Kitteh 2021-05-23 14:55:17 +01:00
parent 36a5da4ff6
commit 17a45e6c76
3 changed files with 111 additions and 80 deletions

View file

@ -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");
}
}

View file

@ -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");
}
}

View file

@ -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?",