diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/NavigationBar.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/NavigationBar.tsx | 31 |
1 files changed, 13 insertions, 18 deletions
diff --git a/packages/taler-wallet-webextension/src/NavigationBar.tsx b/packages/taler-wallet-webextension/src/NavigationBar.tsx index ab36af376..1c26450f7 100644 --- a/packages/taler-wallet-webextension/src/NavigationBar.tsx +++ b/packages/taler-wallet-webextension/src/NavigationBar.tsx @@ -45,6 +45,7 @@ import warningIcon from "./svg/warning_24px.svg"; * @author sebasjm */ +// eslint-disable-next-line @typescript-eslint/ban-types type PageLocation<DynamicPart extends object> = { pattern: string; (params: DynamicPart): string; @@ -62,6 +63,7 @@ function replaceAll( return result; } +// eslint-disable-next-line @typescript-eslint/ban-types function pageDefinition<T extends object>(pattern: string): PageLocation<T> { const patternParams = pattern.match(/(:[\w?]*)/g); if (!patternParams) @@ -133,7 +135,8 @@ export const Pages = { ), }; -export function PopupNavBar({ path = "" }: { path?: string }): VNode { +export type PopupNavBarOptions = "balance" | "backup" | "dev"; +export function PopupNavBar({ path }: { path?: PopupNavBarOptions }): VNode { const api = useBackendContext(); const hook = useAsyncAsHook(async () => { return await api.wallet.call( @@ -146,13 +149,10 @@ export function PopupNavBar({ path = "" }: { path?: string }): VNode { const { i18n } = useTranslationContext(); return ( <NavigationHeader> - <a - href={Pages.balance} - class={path.startsWith("/balance") ? "active" : ""} - > + <a href={Pages.balance} class={path === "balance" ? "active" : ""}> <i18n.Translate>Balance</i18n.Translate> </a> - <a href={Pages.backup} class={path.startsWith("/backup") ? "active" : ""}> + <a href={Pages.backup} class={path === "backup" ? "active" : ""}> <i18n.Translate>Backup</i18n.Translate> </a> <div style={{ display: "flex", paddingTop: 4, justifyContent: "right" }}> @@ -185,8 +185,8 @@ export function PopupNavBar({ path = "" }: { path?: string }): VNode { </NavigationHeader> ); } - -export function WalletNavBar({ path = "" }: { path?: string }): VNode { +export type WalletNavBarOptions = "balance" | "backup" | "dev"; +export function WalletNavBar({ path }: { path?: WalletNavBarOptions }): VNode { const { i18n } = useTranslationContext(); const api = useBackendContext(); @@ -196,21 +196,16 @@ export function WalletNavBar({ path = "" }: { path?: string }): VNode { {}, ); }); - const attentionCount = !hook || hook.hasError ? 0 : hook.response.total; + const attentionCount = + (!hook || hook.hasError ? 0 : hook.response?.total) ?? 0; return ( <NavigationHeaderHolder> <NavigationHeader> - <a - href={Pages.balance} - class={path.startsWith("/balance") ? "active" : ""} - > + <a href={Pages.balance} class={path === "balance" ? "active" : ""}> <i18n.Translate>Balance</i18n.Translate> </a> - <a - href={Pages.backup} - class={path.startsWith("/backup") ? "active" : ""} - > + <a href={Pages.backup} class={path === "backup" ? "active" : ""}> <i18n.Translate>Backup</i18n.Translate> </a> @@ -223,7 +218,7 @@ export function WalletNavBar({ path = "" }: { path?: string }): VNode { )} <JustInDevMode> - <a href={Pages.dev} class={path.startsWith("/dev") ? "active" : ""}> + <a href={Pages.dev} class={path === "dev" ? "active" : ""}> <i18n.Translate>Dev</i18n.Translate> </a> </JustInDevMode> |