diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx')
-rw-r--r-- | packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx | 52 |
1 files changed, 27 insertions, 25 deletions
diff --git a/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx b/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx index a9b9618bb..adc47b216 100644 --- a/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx +++ b/packages/merchant-backoffice-ui/src/components/menu/SideBar.tsx @@ -19,12 +19,14 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { useMerchantApiContext, useTranslationContext } from "@gnu-taler/web-util/browser"; -import { Fragment, h, VNode } from "preact"; -import { useConfigContext } from "../../context/config.js"; +import { + useMerchantApiContext, + useTranslationContext, +} from "@gnu-taler/web-util/browser"; +import { Fragment, VNode, h } from "preact"; +import { useSessionContext } from "../../context/session.js"; import { useInstanceKYCDetails } from "../../hooks/instance.js"; import { LangSelector } from "./LangSelector.js"; -import { useSessionState } from "../../hooks/session.js"; // const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined; const VERSION = typeof __VERSION__ !== "undefined" ? __VERSION__ : undefined; @@ -33,20 +35,21 @@ interface Props { mobile?: boolean; } -export function Sidebar({ - mobile, -}: Props): VNode { - const config = useConfigContext(); - // const { url: backendURL } = useBackendContext() +export function Sidebar({ mobile }: Props): VNode { const { i18n } = useTranslationContext(); const kycStatus = useInstanceKYCDetails(); const needKYC = kycStatus.ok && kycStatus.data.type === "redirect"; - const { state, logOut } = useSessionState(); - const { url } = useMerchantApiContext(); - const isLoggedIn = state.status === "loggedIn" || state.status === "impersonate" - const hasToken = isLoggedIn && state.token !== undefined + const { state, logOut } = useSessionContext(); + const isLoggedIn = state.status === "loggedIn"; + const hasToken = isLoggedIn && state.token !== undefined; + const backendURL = state.backendUrl; + const { config } = useMerchantApiContext(); + return ( - <aside class="aside is-placed-left is-expanded" style={{ overflowY: "scroll" }}> + <aside + class="aside is-placed-left is-expanded" + style={{ overflowY: "scroll" }} + > {mobile && ( <div class="footer" @@ -187,9 +190,10 @@ export function Sidebar({ </p> <ul class="menu-list"> <li> - <a class="has-icon is-state-info is-hoverable" + <a + class="has-icon is-state-info is-hoverable" onClick={(e): void => { - e.preventDefault() + e.preventDefault(); }} > <span class="icon"> @@ -206,7 +210,7 @@ export function Sidebar({ <i class="mdi mdi-web" /> </span> <span class="menu-item-label"> - {url.hostname} + {new URL(backendURL).hostname} </span> </div> </li> @@ -215,12 +219,10 @@ export function Sidebar({ <span style={{ width: "3rem" }} class="icon"> ID </span> - <span class="menu-item-label"> - {state.instance} - </span> + <span class="menu-item-label">{state.instance}</span> </div> </li> - {state.isAdmin && state.status !== "impersonate" && ( + {state.isAdmin && ( <Fragment> <p class="menu-label"> <i18n.Translate>Instances</i18n.Translate> @@ -247,12 +249,12 @@ export function Sidebar({ </li> </Fragment> )} - {hasToken ? + {hasToken ? ( <li> <a class="has-icon is-state-info is-hoverable" onClick={(e): void => { - logOut() + logOut(); e.preventDefault(); }} > @@ -263,8 +265,8 @@ export function Sidebar({ <i18n.Translate>Log out</i18n.Translate> </span> </a> - </li> : undefined - } + </li> + ) : undefined} </ul> </div> </aside> |