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

1 files changed, 18 insertions, 14 deletions

diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/list/Table.tsx
index bc8477039..fd6ea5f6f 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/templates/list/Table.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/templates/list/Table.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, useState } from "preact/hooks";
 import { MerchantBackend } from "../../../../declaration.js";
-import { Translate, useTranslator } from "../../../../i18n/index.js";
 
 type Entity = MerchantBackend.Template.TemplateEntry;
 
@@ -49,7 +49,7 @@ export function CardTable({
 }: Props): VNode {
   const [rowSelection, rowSelectionHandler] = useState<string[]>([]);
 
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
 
   return (
     <div class="card has-table">
@@ -58,10 +58,13 @@ export function CardTable({
           <span class="icon">
             <i class="mdi mdi-newspaper" />
           </span>
-          <Translate>Templates</Translate>
+          <i18n.Translate>Templates</i18n.Translate>
         </p>
         <div class="card-header-icon" aria-label="more options">
-          <span class="has-tooltip-left" data-tooltip={i18n`add new templates`}>
+          <span
+            class="has-tooltip-left"
+            data-tooltip={i18n.str`add new templates`}
+          >
             <button class="button is-info" type="button" onClick={onCreate}>
               <span class="icon is-small">
                 <i class="mdi mdi-plus mdi-36px" />
@@ -120,27 +123,27 @@ function Table({
   hasMoreAfter,
   hasMoreBefore,
 }: TableProps): VNode {
-  const i18n = useTranslator();
+  const { i18n } = useTranslationContext();
   return (
     <div class="table-container">
       {onLoadMoreBefore && (
         <button
           class="button is-fullwidth"
-          data-tooltip={i18n`load more templates before the first one`}
+          data-tooltip={i18n.str`load more templates before the first one`}
           disabled={!hasMoreBefore}
           onClick={onLoadMoreBefore}
         >
-          <Translate>load newer templates</Translate>
+          <i18n.Translate>load newer templates</i18n.Translate>
         </button>
       )}
       <table class="table is-fullwidth is-striped is-hoverable is-fullwidth">
         <thead>
           <tr>
             <th>
-              <Translate>ID</Translate>
+              <i18n.Translate>ID</i18n.Translate>
             </th>
             <th>
-              <Translate>Description</Translate>
+              <i18n.Translate>Description</i18n.Translate>
             </th>
             <th />
           </tr>
@@ -164,7 +167,7 @@ function Table({
                 <td>
                   <button
                     class="button is-danger is-small has-tooltip-left"
-                    data-tooltip={i18n`delete selected templates from the database`}
+                    data-tooltip={i18n.str`delete selected templates from the database`}
                     onClick={() => onDelete(i)}
                   >
                     Delete
@@ -178,11 +181,11 @@ function Table({
       {onLoadMoreAfter && (
         <button
           class="button is-fullwidth"
-          data-tooltip={i18n`load more templates after the last one`}
+          data-tooltip={i18n.str`load more templates after the last one`}
           disabled={!hasMoreAfter}
           onClick={onLoadMoreAfter}
         >
-          <Translate>load older templates</Translate>
+          <i18n.Translate>load older templates</i18n.Translate>
         </button>
       )}
     </div>
@@ -190,6 +193,7 @@ function Table({
 }
 
 function EmptyTable(): VNode {
+  const { i18n } = useTranslationContext();
   return (
     <div class="content has-text-grey has-text-centered">
       <p>
@@ -198,9 +202,9 @@ function EmptyTable(): VNode {
         </span>
       </p>
       <p>
-        <Translate>
+        <i18n.Translate>
           There is no templates yet, add more pressing the + sign
-        </Translate>
+        </i18n.Translate>
       </p>
     </div>
   );