[taler-merchant-backoffice] branch master updated: new router configuration

[gnunet]

This is an automated email from the git hooks/post-receive script.

sebasjm pushed a commit to branch master
in repository merchant-backoffice.

The following commit(s) were added to refs/heads/master by this push:
     new 16d908a  new router configuration
16d908a is described below

commit 16d908a43507ffea493daa015b240500c1d4b76a
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Wed May 19 14:51:09 2021 -0300

    new router configuration
---
 packages/frontend/src/ApplicationReadyRoutes.tsx  | 22 +++++++++--------
 packages/frontend/src/InstanceRoutes.tsx          |  2 +-
 packages/frontend/src/components/menu/SideBar.tsx | 30 +++++++++++++++--------
 packages/frontend/src/components/menu/index.tsx   |  8 +++---
 packages/frontend/src/hooks/backend.ts            |  6 ++---
 packages/frontend/src/hooks/index.ts              |  2 +-
 packages/frontend/src/hooks/instance.ts           |  3 +++
 packages/frontend/src/paths/admin/list/Table.tsx  |  3 +--
 8 files changed, 45 insertions(+), 31 deletions(-)

diff --git a/packages/frontend/src/ApplicationReadyRoutes.tsx 
b/packages/frontend/src/ApplicationReadyRoutes.tsx
index eb30604..ef89152 100644
--- 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
index 993d5b9..402c760 100644
--- 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
index 2562802..7925a1a 100644
--- 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
index 1e2f0ab..5140eb0 100644
--- 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
index 8fad397..d28fdda 100644
--- 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
index b443898..aa8f3a4 100644
--- 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
index 00fd73d..4bb6410 100644
--- 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
index 2886014..1f512c0 100644
--- 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">

-- 
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.