fix issue when jumping into mimic mode

7 files changed, 41 insertions, 29 deletions

diff --git a/packages/frontend/src/ApplicationReadyRoutes.tsx b/packages/frontend/src/ApplicationReadyRoutes.tsx
index a0f047d..7c17895 100644
--- a/packages/frontend/src/ApplicationReadyRoutes.tsx
+++ b/packages/frontend/src/ApplicationReadyRoutes.tsx
@@ -81,8 +81,8 @@ export function ApplicationReadyRoutes(): VNode {
     }
 
     return <Fragment>
-      <Menu instance={match[1]} onLogout={clearTokenAndGoToRoot} />
-      <InstanceRoutes id={match[1]} />
+      <Menu instance={match[1]} onLogout={clearTokenAndGoToRoot} setInstanceName={() => null} />
+      <InstanceRoutes id={match[1]} setInstanceName={() => null} />
     </Fragment>
   }
 
@@ -93,10 +93,11 @@ export function ApplicationReadyRoutes(): VNode {
 }
 
 function DefaultMainRoute({ clearTokenAndGoToRoot, instance }: any) {
-  const instanceName = instance || 'default'
+  const [instanceName, setInstanceName] = useState(instance || 'default')
+
   return <Fragment>
-    <Menu instance={instanceName} admin onLogout={clearTokenAndGoToRoot} />
-    <InstanceRoutes admin id={instanceName} />
+    <Menu instance={instanceName} admin onLogout={clearTokenAndGoToRoot} setInstanceName={setInstanceName} />
+    <InstanceRoutes admin id={instanceName} setInstanceName={setInstanceName} />
   </Fragment>
 
 }
diff --git a/packages/frontend/src/InstanceRoutes.tsx b/packages/frontend/src/InstanceRoutes.tsx
index 5c04275..2914f5f 100644
--- a/packages/frontend/src/InstanceRoutes.tsx
+++ b/packages/frontend/src/InstanceRoutes.tsx
@@ -19,7 +19,6 @@
 * @author Sebastian Javier Marchano (sebasjm)
 */
 
-import { createHashHistory } from 'history';
 import { Fragment, FunctionComponent, h, VNode } from 'preact';
 import { Route, route, Router } from 'preact-router';
 import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
@@ -81,9 +80,10 @@ export enum AdminPaths {
 export interface Props {
   id: string;
   admin?: boolean;
+  setInstanceName: (s:string) => void
 }
 
-export function InstanceRoutes({ id, admin }: Props): VNode {
+export function InstanceRoutes({ id, admin, setInstanceName }: Props): VNode {
   const [_, updateDefaultToken] = useBackendDefaultToken()
   const [token, updateToken] = useBackendInstanceToken(id);
   const { changeBackend, addTokenCleaner } = useBackendContext();
@@ -167,6 +167,7 @@ export function InstanceRoutes({ id, admin }: Props): VNode {
         <Route path={AdminPaths.list_instances} component={InstanceListPage}
           onCreate={() => { route(AdminPaths.new_instance) }}
           onUpdate={(id: string): void => { route(`/instance/${id}/update`); }}
+          setInstanceName={setInstanceName}
           onUnauthorized={LoginPageAccessDenied}
           onLoadError={ServerErrorRedirectTo(InstancePaths.error)}
         />
diff --git a/packages/frontend/src/components/menu/SideBar.tsx b/packages/frontend/src/components/menu/SideBar.tsx
index 7925a1a..d579736 100644
--- a/packages/frontend/src/components/menu/SideBar.tsx
+++ b/packages/frontend/src/components/menu/SideBar.tsx
@@ -40,12 +40,12 @@ export function Sidebar({ mobile, instance, onLogout, admin, mimic }: Props): VN
   const config = useConfigContext();
   const backend = useBackendContext();
 
-  const withInstanceIdIfNeeded = useCallback(function (path: string) {
-    if (mimic) {
-      return path + '?instance=' + instance
-    }
-    return path
-  },[instance])
+  // const withInstanceIdIfNeeded = useCallback(function (path: string) {
+  //   if (mimic) {
+  //     return path + '?instance=' + instance
+  //   }
+  //   return path
+  // },[instance])
   
   return (
     <aside class="aside is-placed-left is-expanded">
@@ -64,31 +64,31 @@ export function Sidebar({ mobile, instance, onLogout, admin, mimic }: Props): VN
         </p>
         <ul class="menu-list">
           <li>
-            <a href={withInstanceIdIfNeeded("/update")} class="has-icon">
+            <a href={("/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={withInstanceIdIfNeeded("/orders")} class="has-icon">
+            <a href={("/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={withInstanceIdIfNeeded("/products")} class="has-icon">
+            <a href={("/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={withInstanceIdIfNeeded("/transfers")} class="has-icon">
+            <a href={("/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={withInstanceIdIfNeeded("/reserves")} class="has-icon">
+            <a href={("/reserves")} class="has-icon">
               <span class="icon"><i class="mdi mdi-cash" /></span>
               <span class="menu-item-label">Reserves</span>
             </a>
@@ -121,13 +121,13 @@ export function Sidebar({ mobile, instance, onLogout, admin, mimic }: Props): VN
           {admin && !mimic && <Fragment>
             <p class="menu-label"><Translate>Instances</Translate></p>
             <li>
-              <a href={withInstanceIdIfNeeded("/instance/new")} class="has-icon">
+              <a href={("/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={withInstanceIdIfNeeded("/instances")} class="has-icon">
+              <a href={("/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 3a7ccab..fcba281 100644
--- a/packages/frontend/src/components/menu/index.tsx
+++ b/packages/frontend/src/components/menu/index.tsx
@@ -52,6 +52,7 @@ interface MenuProps {
   instance: string;
   admin?: boolean;
   onLogout?: () => void;
+  setInstanceName: (s:string) => void;
 }
 
 function WithTitle({ title, children }: { title: string, children: ComponentChildren }): VNode {
@@ -61,7 +62,7 @@ function WithTitle({ title, children }: { title: string, children: ComponentChil
   return <Fragment>{children}</Fragment>
 }
 
-export function Menu({ onLogout, title, instance, admin }: MenuProps): VNode {
+export function Menu({ onLogout, title, instance, admin, setInstanceName }: MenuProps): VNode {
   const [mobileOpen, setMobileOpen] = useState(false)
 
   return <Match>{({ path }: any) => {
@@ -76,7 +77,9 @@ export function Menu({ onLogout, title, instance, admin }: MenuProps): VNode {
 
         {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="/instances" >go back</a></p>
+            <p class="is-size-5">You are viewing the instance <b>"{instance}"</b>. <a href="#/instances" onClick={(e) => {
+              setInstanceName('default')
+            }}>go back</a></p>
           </div>
         </nav>}
       </div>
diff --git a/packages/frontend/src/paths/admin/list/Table.tsx b/packages/frontend/src/paths/admin/list/Table.tsx
index 4210a92..b306c43 100644
--- a/packages/frontend/src/paths/admin/list/Table.tsx
+++ b/packages/frontend/src/paths/admin/list/Table.tsx
@@ -30,9 +30,10 @@ interface Props {
   onDelete: (id: MerchantBackend.Instances.Instance) => void;
   onCreate: () => void;
   selected?: boolean;
+  setInstanceName: (s: string) => void;
 }
 
-export function CardTable({ instances, onCreate, onUpdate, onDelete, selected }: Props): VNode {
+export function CardTable({ instances, onCreate, onUpdate, setInstanceName, onDelete, selected }: Props): VNode {
   const [actionQueue, actionQueueHandler] = useState<Actions[]>([]);
   const [rowSelection, rowSelectionHandler] = useState<string[]>([])
 
@@ -76,7 +77,7 @@ export function CardTable({ instances, onCreate, onUpdate, onDelete, selected }:
       <div class="b-table has-pagination">
         <div class="table-wrapper has-mobile-cards">
           {instances.length > 0 ?
-            <Table instances={instances} onUpdate={onUpdate} onDelete={onDelete} rowSelection={rowSelection} rowSelectionHandler={rowSelectionHandler} /> :
+            <Table instances={instances} onUpdate={onUpdate} setInstanceName={setInstanceName} onDelete={onDelete} rowSelection={rowSelection} rowSelectionHandler={rowSelectionHandler} /> :
             <EmptyTable />
           }
         </div>
@@ -90,13 +91,14 @@ interface TableProps {
   onUpdate: (id: string) => void;
   onDelete: (id: MerchantBackend.Instances.Instance) => void;
   rowSelectionHandler: StateUpdater<string[]>;
+  setInstanceName: (s:string) => void;
 }
 
 function toggleSelected<T>(id: T): (prev: T[]) => T[] {
   return (prev: T[]): T[] => prev.indexOf(id) == -1 ? [...prev, id] : prev.filter(e => e != id)
 }
 
-function Table({ rowSelection, rowSelectionHandler, instances, onUpdate, onDelete }: TableProps): VNode {
+function Table({ rowSelection, rowSelectionHandler, setInstanceName, instances, onUpdate, onDelete }: TableProps): VNode {
   return (
     <div class="table-container">
       <table class="table is-fullwidth is-striped is-hoverable is-fullwidth">
@@ -122,7 +124,9 @@ function Table({ rowSelection, rowSelectionHandler, instances, onUpdate, onDelet
                   <span class="check" />
                 </label>
               </td>
-              <td><a href={`/orders?instance=${i.id}`} >{i.id}</a></td>
+              <td><a href={`#/orders?instance=${i.id}`} onClick={(e) => {
+                setInstanceName(i.id);
+              }}>{i.id}</a></td>
               <td >{i.name}</td>
               <td class="is-actions-cell right-sticky">
                 <div class="buttons is-right">
diff --git a/packages/frontend/src/paths/admin/list/View.tsx b/packages/frontend/src/paths/admin/list/View.tsx
index 61ed109..43ab4e7 100644
--- a/packages/frontend/src/paths/admin/list/View.tsx
+++ b/packages/frontend/src/paths/admin/list/View.tsx
@@ -29,14 +29,15 @@ interface Props {
   onUpdate: (id: string) => void;
   onDelete: (id: MerchantBackend.Instances.Instance) => void;
   selected?: boolean;
+  setInstanceName: (s:string) => void;
 }
 
-export function View({ instances, onCreate, onDelete, onUpdate, selected }: Props): VNode {
+export function View({ instances, onCreate, onDelete, onUpdate, setInstanceName, selected }: Props): VNode {
 
   return <div id="app">
 
     <section class="section is-main-section">
-      <CardTable instances={instances} onDelete={onDelete} onUpdate={onUpdate} selected={selected} onCreate={onCreate} />
+      <CardTable instances={instances} onDelete={onDelete} setInstanceName={setInstanceName} onUpdate={onUpdate} selected={selected} onCreate={onCreate} />
     </section>
 
   </div >
diff --git a/packages/frontend/src/paths/admin/list/index.tsx b/packages/frontend/src/paths/admin/list/index.tsx
index d23288c..0d42e63 100644
--- a/packages/frontend/src/paths/admin/list/index.tsx
+++ b/packages/frontend/src/paths/admin/list/index.tsx
@@ -36,9 +36,10 @@ interface Props {
   onUnauthorized: () => VNode;
   onNotFound: () => VNode;
   onLoadError: (error: HttpError) => VNode;
+  setInstanceName: (s:string) => void;
 }
 
-export default function Instances({ onUnauthorized, onLoadError, onNotFound, onCreate, onUpdate }: Props): VNode {
+export default function Instances({ onUnauthorized, onLoadError, onNotFound, onCreate, onUpdate, setInstanceName }: Props): VNode {
   const result = useBackendInstances()
   const [deleting, setDeleting] = useState<MerchantBackend.Instances.Instance | null>(null)
   const { deleteInstance } = useAdminAPI()
@@ -53,6 +54,7 @@ export default function Instances({ onUnauthorized, onLoadError, onNotFound, onC
       onDelete={setDeleting}
       onCreate={onCreate}
       onUpdate={onUpdate}
+      setInstanceName={setInstanceName}
       selected={!!deleting}
     />
     {deleting && <DeleteModal