commit 16d908a43507ffea493daa015b240500c1d4b76a
parent a275341ee45123f067c5e14165046dabd51f6e3a
Author: Sebastian <sebasjm@gmail.com>
Date: Wed, 19 May 2021 14:51:09 -0300
new router configuration
Diffstat:
8 files changed, 45 insertions(+), 31 deletions(-)
diff --git a/packages/frontend/src/ApplicationReadyRoutes.tsx b/packages/frontend/src/ApplicationReadyRoutes.tsx
@@ -19,7 +19,7 @@
* @author Sebastian Javier Marchano (sebasjm)
*/
import { Fragment, h, VNode } from 'preact';
-import { route } from 'preact-router';
+import Router, { Route, route } from 'preact-router';
import { useBackendContext } from './context/backend';
import { useBackendInstancesTestForAdmin } from "./hooks/backend";
import { InstanceRoutes } from "./InstanceRoutes";
@@ -27,6 +27,8 @@ import LoginPage from './paths/login';
import { INSTANCE_ID_LOOKUP } from './utils/constants';
import { NotYetReadyAppMenu, Menu, NotificationCard } from './components/menu';
import { useTranslator } from './i18n';
+import { createHashHistory } from 'history';
+import { useState } from 'preact/hooks';
export function ApplicationReadyRoutes(): VNode {
const i18n = useTranslator();
@@ -84,17 +86,17 @@ export function ApplicationReadyRoutes(): VNode {
</Fragment>
}
- let instance
- try {
- const url = new URL(window.location.href)
- instance = url.searchParams.get('instance')
- } finally {
- if (!instance) instance = 'default'
- }
+ const history = createHashHistory()
+ return <Router history={history}>
+ <Route default component={DefaultMainRoute} clearTokenAndGoToRoot={clearTokenAndGoToRoot} />
+ </Router>
+}
+function DefaultMainRoute({ clearTokenAndGoToRoot, instance }: any) {
+ const instanceName = instance || 'default'
return <Fragment>
- <Menu instance={instance} admin onLogout={clearTokenAndGoToRoot} />
- <InstanceRoutes admin id={instance} />
+ <Menu instance={instanceName} admin onLogout={clearTokenAndGoToRoot} />
+ <InstanceRoutes admin id={instanceName} />
</Fragment>
}
diff --git a/packages/frontend/src/InstanceRoutes.tsx b/packages/frontend/src/InstanceRoutes.tsx
@@ -148,7 +148,7 @@ export function InstanceRoutes({ id, admin }: Props): VNode {
<NotificationCard notification={globalNotification} />
- <Router history={createHashHistory()} onChange={(e) => {
+ <Router onChange={(e) => {
const movingOutFromNotification = globalNotification && e.url !== globalNotification.to
if (movingOutFromNotification) {
setGlobalNotification(undefined)
diff --git a/packages/frontend/src/components/menu/SideBar.tsx b/packages/frontend/src/components/menu/SideBar.tsx
@@ -21,8 +21,10 @@
import { Fragment, h, VNode } from 'preact';
+import { useCallback } from 'preact/hooks';
import { useBackendContext } from '../../context/backend';
import { useConfigContext } from '../../context/config';
+import { useInstanceContext } from '../../context/instance';
import { Translate } from '../../i18n';
import { LangSelector } from './LangSelector';
@@ -31,12 +33,20 @@ interface Props {
mobile?: boolean;
instance: string;
admin?: boolean;
+ mimic?: boolean;
}
-export function Sidebar({ mobile, instance, onLogout, admin }: Props): VNode {
+export function Sidebar({ mobile, instance, onLogout, admin, mimic }: Props): VNode {
const config = useConfigContext();
const backend = useBackendContext();
+ const withInstanceIdIfNeeded = useCallback(function (path: string) {
+ if (mimic) {
+ return path + '?instance=' + instance
+ }
+ return path
+ },[instance])
+
return (
<aside class="aside is-placed-left is-expanded">
{ mobile && <div class="footer" onClick={(e) => { return e.stopImmediatePropagation() }}>
@@ -45,7 +55,7 @@ export function Sidebar({ mobile, instance, onLogout, admin }: Props): VNode {
<div class="aside-tools">
<div class="aside-tools-label">
<div><b>Taler</b> Backoffice</div>
- <div class="is-size-7 has-text-right " style={{ lineHeight: 0, marginTop: -10 }}>{process.env.__VERSION__} ({config.version})</div>
+ <div class="is-size-7 has-text-right" style={{ lineHeight: 0, marginTop: -10 }}>{process.env.__VERSION__} ({config.version})</div>
</div>
</div>
<div class="menu is-menu-main">
@@ -54,31 +64,31 @@ export function Sidebar({ mobile, instance, onLogout, admin }: Props): VNode {
</p>
<ul class="menu-list">
<li>
- <a href="/update" class="has-icon">
+ <a href={withInstanceIdIfNeeded("/update")} class="has-icon">
<span class="icon"><i class="mdi mdi-square-edit-outline" /></span>
<span class="menu-item-label"><Translate>Settings</Translate></span>
</a>
</li>
<li>
- <a href="/orders" class="has-icon">
+ <a href={withInstanceIdIfNeeded("/orders")} class="has-icon">
<span class="icon"><i class="mdi mdi-cash-register" /></span>
<span class="menu-item-label"><Translate>Orders</Translate></span>
</a>
</li>
<li>
- <a href="/products" class="has-icon">
+ <a href={withInstanceIdIfNeeded("/products")} class="has-icon">
<span class="icon"><i class="mdi mdi-shopping" /></span>
<span class="menu-item-label"><Translate>Products</Translate></span>
</a>
</li>
<li>
- <a href="/transfers" class="has-icon">
+ <a href={withInstanceIdIfNeeded("/transfers")} class="has-icon">
<span class="icon"><i class="mdi mdi-bank" /></span>
<span class="menu-item-label"><Translate>Transfers</Translate></span>
</a>
</li>
<li>
- <a href="/reserves" class="has-icon">
+ <a href={withInstanceIdIfNeeded("/reserves")} class="has-icon">
<span class="icon"><i class="mdi mdi-cash" /></span>
<span class="menu-item-label">Reserves</span>
</a>
@@ -108,16 +118,16 @@ export function Sidebar({ mobile, instance, onLogout, admin }: Props): VNode {
</span>
</div>
</li>
- {admin && <Fragment>
+ {admin && !mimic && <Fragment>
<p class="menu-label"><Translate>Instances</Translate></p>
<li>
- <a href="/instance/new" class="has-icon">
+ <a href={withInstanceIdIfNeeded("/instance/new")} class="has-icon">
<span class="icon"><i class="mdi mdi-plus" /></span>
<span class="menu-item-label"><Translate>New</Translate></span>
</a>
</li>
<li>
- <a href="/instances" class="has-icon">
+ <a href={withInstanceIdIfNeeded("/instances")} class="has-icon">
<span class="icon"><i class="mdi mdi-format-list-bulleted" /></span>
<span class="menu-item-label"><Translate>List</Translate></span>
</a>
diff --git a/packages/frontend/src/components/menu/index.tsx b/packages/frontend/src/components/menu/index.tsx
@@ -18,7 +18,6 @@ import { ComponentChildren, Fragment, h, VNode } from "preact";
import Match from 'preact-router/match';
import { useEffect, useState } from "preact/hooks";
import { AdminPaths } from "../../AdminRoutes";
-import { calculateRootPath } from "../../hooks";
import { InstancePaths } from "../../InstanceRoutes";
import { Notification } from "../../utils/types";
import { NavigationBar } from "./NavigationBar";
@@ -71,15 +70,16 @@ export function Menu({ onLogout, title, instance, admin }: MenuProps): VNode {
return <Match>{({ path }: any) => {
const titleWithSubtitle = title ? title : (!admin ? getInstanceTitle(path, instance) : getAdminTitle(path, instance))
const adminInstance = instance === "default"
+ const mimic = admin && !adminInstance
return (<WithTitle title={titleWithSubtitle}>
<div class={mobileOpen ? "has-aside-mobile-expanded" : ""} onClick={() => setMobileOpen(false)}>
<NavigationBar onMobileMenu={() => setMobileOpen(!mobileOpen)} title={titleWithSubtitle} />
- {onLogout && <Sidebar onLogout={onLogout} admin={admin && adminInstance} instance={instance} mobile={mobileOpen} />}
+ {onLogout && <Sidebar onLogout={onLogout} admin={admin} mimic={mimic} instance={instance} mobile={mobileOpen} />}
- {admin && !adminInstance && <nav class="level">
+ {mimic && <nav class="level">
<div class="level-item has-text-centered has-background-warning">
- <p class="is-size-5">You are viewing the instance <b>"{instance}"</b>. <a href={calculateRootPath()} >go back</a></p>
+ <p class="is-size-5">You are viewing the instance <b>"{instance}"</b>. <a href="/instances" >go back</a></p>
</div>
</nav>}
</div>
diff --git a/packages/frontend/src/hooks/backend.ts b/packages/frontend/src/hooks/backend.ts
@@ -192,13 +192,13 @@ export function cancelPendingRequest() {
source = CancelToken.source()
}
-let allowAxiosCancellation = false
+let removeAxiosCancelToken = false
/**
* Jest mocking seems to break when using the cancelToken property.
* Using this workaround when testing while finding the correct solution
*/
export function setAxiosRequestAsTestingEnvironment() {
- allowAxiosCancellation = true
+ removeAxiosCancelToken = true
}
export async function request<T>(url: string, options: RequestOptions = {}): Promise<HttpResponseOk<T>> {
@@ -209,7 +209,7 @@ export async function request<T>(url: string, options: RequestOptions = {}): Pro
url,
responseType: 'json',
headers,
- cancelToken: !allowAxiosCancellation? source.token : undefined,
+ cancelToken: !removeAxiosCancelToken? source.token : undefined,
method: options.method || 'get',
data: options.data,
params: options.params,
diff --git a/packages/frontend/src/hooks/index.ts b/packages/frontend/src/hooks/index.ts
@@ -23,7 +23,7 @@ import { StateUpdater, useCallback, useState } from "preact/hooks";
import { ValueOrFunction } from '../utils/types';
-export const calculateRootPath = () => {
+const calculateRootPath = () => {
const rootPath = typeof window !== undefined ? window.location.origin + window.location.pathname : '/'
return rootPath
}
diff --git a/packages/frontend/src/hooks/instance.ts b/packages/frontend/src/hooks/instance.ts
@@ -100,6 +100,9 @@ export function useInstanceDetails(): HttpResponse<MerchantBackend.Instances.Que
revalidateOnFocus: false,
revalidateOnReconnect: false,
refreshWhenOffline: false,
+ errorRetryCount: 0,
+ errorRetryInterval: 1,
+ shouldRetryOnError: false,
})
if (isValidating) return {loading:true, data: data?.data}
diff --git a/packages/frontend/src/paths/admin/list/Table.tsx b/packages/frontend/src/paths/admin/list/Table.tsx
@@ -22,7 +22,6 @@
import { h, VNode } from "preact";
import { StateUpdater, useEffect, useState } from "preact/hooks";
import { MerchantBackend } from "../../../declaration";
-import { calculateRootPath } from "../../../hooks";
import { Translate } from "../../../i18n";
interface Props {
@@ -120,7 +119,7 @@ function Table({ rowSelection, rowSelectionHandler, instances, onUpdate, onDelet
<span class="check" />
</label>
</td>
- <td><a href={`${calculateRootPath()}?instance=${i.id}`} {...{ native: true }} >{i.id}</a></td>
+ <td><a href={`/orders?instance=${i.id}`} >{i.id}</a></td>
<td >{i.name}</td>
<td class="is-actions-cell right-sticky">
<div class="buttons is-right">
