diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/components/menu/index.tsx')
-rw-r--r-- | packages/merchant-backoffice-ui/src/components/menu/index.tsx | 93 |
1 files changed, 40 insertions, 53 deletions
diff --git a/packages/merchant-backoffice-ui/src/components/menu/index.tsx b/packages/merchant-backoffice-ui/src/components/menu/index.tsx index 57d401ffa..fa2de563e 100644 --- a/packages/merchant-backoffice-ui/src/components/menu/index.tsx +++ b/packages/merchant-backoffice-ui/src/components/menu/index.tsx @@ -17,10 +17,12 @@ import { ComponentChildren, Fragment, h, VNode } from "preact"; import { useEffect, useState } from "preact/hooks"; import { AdminPaths } from "../../AdminRoutes.js"; -import { InstancePaths } from "../../Rounting.js"; +import { InstancePaths } from "../../Routing.js"; import { Notification } from "../../utils/types.js"; import { NavigationBar } from "./NavigationBar.js"; import { Sidebar } from "./SideBar.js"; +import { useSessionState } from "../../hooks/session.js"; +import { useNavigationContext } from "@gnu-taler/web-util/browser"; function getInstanceTitle(path: string, id: string): string { switch (path) { @@ -77,13 +79,7 @@ function getAdminTitle(path: string, instance: string) { return getInstanceTitle(path, instance); } -interface MenuProps { - title?: string; - instance: string; - admin?: boolean; - onLogout?: () => void; - onShowSettings: () => void; -} +interface MenuProps {} function WithTitle({ title, @@ -98,25 +94,19 @@ function WithTitle({ return <Fragment>{children}</Fragment>; } -export function Menu({ - onLogout, - onShowSettings, - title, - instance, - path, - admin, - setInstanceName, - isPasswordOk -}: MenuProps): VNode { +export function Menu(_p: MenuProps): VNode { const [mobileOpen, setMobileOpen] = useState(false); - const titleWithSubtitle = title - ? title - : !admin - ? getInstanceTitle(path, instance) - : getAdminTitle(path, instance); - const adminInstance = instance === "default"; - const mimic = admin && !adminInstance; + const { state, logIn } = useSessionState(); + const { path } = useNavigationContext(); + + const titleWithSubtitle = !state.isAdmin + ? getInstanceTitle(path, state.instance) + : getAdminTitle(path, state.instance); + + const isLoggedIn = + state.status === "loggedIn" || state.status === "impersonate"; + return ( <WithTitle title={titleWithSubtitle}> <div @@ -128,32 +118,32 @@ export function Menu({ title={titleWithSubtitle} /> - {onLogout && ( - <Sidebar - onShowSettings={onShowSettings} - onLogout={onLogout} - admin={admin} - mimic={mimic} - instance={instance} - mobile={mobileOpen} - isPasswordOk={isPasswordOk} - /> + {isLoggedIn && ( + <Sidebar mobile={mobileOpen} mimic={state.status === "impersonate"} /> )} - {mimic && ( - <nav class="level" style={{ - zIndex: 100, - position: "fixed", - width: "50%", - marginLeft: "20%" - }}> + {state.status === "impersonate" && ( + <nav + class="level" + style={{ + zIndex: 100, + position: "fixed", + width: "50%", + marginLeft: "20%", + }} + > <div class="level-item has-text-centered has-background-warning"> <p class="is-size-5"> - You are viewing the instance <b>"{instance}"</b>.{" "} + You are viewing the instance <b>"{state.instance}"</b> + .{" "} <a href="#/instances" onClick={(e) => { - setInstanceName("default"); + logIn({ + instance: state.originalInstance, + token: state.originalToken, + }); + e.preventDefault(); }} > go back @@ -235,17 +225,16 @@ export function NotConnectedAppMenu({ ); } -export function NotYetReadyAppMenu({ - onLogout, - onShowSettings, - title, - isPasswordOk -}: NotYetReadyAppMenuProps): VNode { +export function NotYetReadyAppMenu({ title }: NotYetReadyAppMenuProps): VNode { const [mobileOpen, setMobileOpen] = useState(false); + const { state } = useSessionState(); useEffect(() => { document.title = `Taler Backoffice: ${title}`; }, [title]); + + const isLoggedIn = + state.status === "loggedIn" || state.status === "impersonate"; return ( <div @@ -256,9 +245,7 @@ export function NotYetReadyAppMenu({ onMobileMenu={() => setMobileOpen(!mobileOpen)} title={title} /> - {onLogout && ( - <Sidebar onShowSettings={onShowSettings} onLogout={onLogout} instance="" mobile={mobileOpen} isPasswordOk={isPasswordOk} /> - )} + {isLoggedIn && <Sidebar mobile={mobileOpen} />} </div> ); } |