use translation context from web-utils, don't use match react-router since is broken

1 files changed, 17 insertions, 12 deletions

diff --git a/packages/merchant-backoffice-ui/src/paths/admin/list/TableActive.tsx b/packages/merchant-backoffice-ui/src/paths/admin/list/TableActive.tsx
index 546f34f3a..223db2fed 100644
--- a/packages/merchant-backoffice-ui/src/paths/admin/list/TableActive.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/admin/list/TableActive.tsx
@@ -19,10 +19,10 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { h, VNode } from "preact";
 import { StateUpdater, useEffect, useState } from "preact/hooks";
 import { MerchantBackend } from "../../../declaration.js";
-import { Translate, useTranslator } from "../../../i18n/index.js";
 
 interface Props {
   instances: MerchantBackend.Instances.Instance[];
@@ -68,7 +68,7 @@ export function CardTable({
     }
   }, [actionQueue, selected, onUpdate]);
 
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
 
   return (
     <div class="card has-table">
@@ -77,7 +77,7 @@ export function CardTable({
           <span class="icon">
             <i class="mdi mdi-desktop-mac" />
           </span>
-          <Translate>Instances</Translate>
+          <i18n.Translate>Instances</i18n.Translate>
         </p>
 
         <div class="card-header-icon" aria-label="more options">
@@ -90,11 +90,14 @@ export function CardTable({
               )
             }
           >
-            <Translate>Delete</Translate>
+            <i18n.Translate>Delete</i18n.Translate>
           </button>
         </div>
         <div class="card-header-icon" aria-label="more options">
-          <span class="has-tooltip-left" data-tooltip={i18n`add new instance`}>
+          <span
+            class="has-tooltip-left"
+            data-tooltip={i18n.str`add new instance`}
+          >
             <button class="button is-info" type="button" onClick={onCreate}>
               <span class="icon is-small">
                 <i class="mdi mdi-plus mdi-36px" />
@@ -149,6 +152,7 @@ function Table({
   onDelete,
   onPurge,
 }: TableProps): VNode {
+  const { i18n } = useTranslationContext();
   return (
     <div class="table-container">
       <table class="table is-fullwidth is-striped is-hoverable is-fullwidth">
@@ -171,10 +175,10 @@ function Table({
               </label>
             </th>
             <th>
-              <Translate>ID</Translate>
+              <i18n.Translate>ID</i18n.Translate>
             </th>
             <th>
-              <Translate>Name</Translate>
+              <i18n.Translate>Name</i18n.Translate>
             </th>
             <th />
           </tr>
@@ -213,7 +217,7 @@ function Table({
                       type="button"
                       onClick={(): void => onUpdate(i.id)}
                     >
-                      <Translate>Edit</Translate>
+                      <i18n.Translate>Edit</i18n.Translate>
                     </button>
                     {!i.deleted && (
                       <button
@@ -221,7 +225,7 @@ function Table({
                         type="button"
                         onClick={(): void => onDelete(i)}
                       >
-                        <Translate>Delete</Translate>
+                        <i18n.Translate>Delete</i18n.Translate>
                       </button>
                     )}
                     {i.deleted && (
@@ -230,7 +234,7 @@ function Table({
                         type="button"
                         onClick={(): void => onPurge(i)}
                       >
-                        <Translate>Purge</Translate>
+                        <i18n.Translate>Purge</i18n.Translate>
                       </button>
                     )}
                   </div>
@@ -245,6 +249,7 @@ function Table({
 }
 
 function EmptyTable(): VNode {
+  const { i18n } = useTranslationContext();
   return (
     <div class="content has-text-grey has-text-centered">
       <p>
@@ -253,9 +258,9 @@ function EmptyTable(): VNode {
         </span>
       </p>
       <p>
-        <Translate>
+        <i18n.Translate>
           There is no instances yet, add more pressing the + sign
-        </Translate>
+        </i18n.Translate>
       </p>
     </div>
   );