refactoring transaction component to standard component with test and examples

3 files changed, 2 insertions, 108 deletions

diff --git a/packages/demobank-ui/src/pages/AccountPage.tsx b/packages/demobank-ui/src/pages/AccountPage.tsx
index 7ec4d36fb..5dd820b53 100644
--- a/packages/demobank-ui/src/pages/AccountPage.tsx
+++ b/packages/demobank-ui/src/pages/AccountPage.tsx
@@ -27,7 +27,7 @@ import { getIbanFromPayto, prepareHeaders } from "../utils.js";
 import { BankFrame } from "./BankFrame.js";
 import { LoginForm } from "./LoginForm.js";
 import { PaymentOptions } from "./PaymentOptions.js";
-import { Transactions } from "./Transactions.js";
+import { Transactions } from "../components/Transactions/index.js";
 import { WithdrawalQRCode } from "./WithdrawalQRCode.js";
 
 export function AccountPage(): VNode {
diff --git a/packages/demobank-ui/src/pages/PublicHistoriesPage.tsx b/packages/demobank-ui/src/pages/PublicHistoriesPage.tsx
index be9f4aee1..7bf5c41c7 100644
--- a/packages/demobank-ui/src/pages/PublicHistoriesPage.tsx
+++ b/packages/demobank-ui/src/pages/PublicHistoriesPage.tsx
@@ -24,7 +24,7 @@ import { PageStateType, usePageContext } from "../context/pageState.js";
 import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { getBankBackendBaseUrl } from "../utils.js";
 import { BankFrame } from "./BankFrame.js";
-import { Transactions } from "./Transactions.js";
+import { Transactions } from "../components/Transactions/index.js";
 
 const logger = new Logger("PublicHistoriesPage");
 
diff --git a/packages/demobank-ui/src/pages/Transactions.tsx b/packages/demobank-ui/src/pages/Transactions.tsx
deleted file mode 100644
index ca88abd4d..000000000
--- a/packages/demobank-ui/src/pages/Transactions.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-/*
- This file is part of GNU Taler
- (C) 2022 Taler Systems S.A.
-
- GNU Taler is free software; you can redistribute it and/or modify it under the
- terms of the GNU General Public License as published by the Free Software
- Foundation; either version 3, or (at your option) any later version.
-
- GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
- WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
-
- You should have received a copy of the GNU General Public License along with
- GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
- */
-
-import { Logger } from "@gnu-taler/taler-util";
-import { h, VNode } from "preact";
-import { useEffect } from "preact/hooks";
-import useSWR from "swr";
-import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
-
-const logger = new Logger("Transactions");
-/**
- * Show one page of transactions.
- */
-export function Transactions({
-  pageNumber,
-  accountLabel,
-  balanceValue,
-}: {
-  pageNumber: number;
-  accountLabel: string;
-  balanceValue?: string;
-}): VNode {
-  const { i18n } = useTranslationContext();
-  const { data, error, mutate } = useSWR(
-    `access-api/accounts/${accountLabel}/transactions?page=${pageNumber}`,
-  );
-  useEffect(() => {
-    if (balanceValue) {
-      mutate();
-    }
-  }, [balanceValue ?? ""]);
-  if (typeof error !== "undefined") {
-    logger.error("transactions not found error", error);
-    switch (error.status) {
-      case 404: {
-        return <p>Transactions page {pageNumber} was not found.</p>;
-      }
-      case 401: {
-        return <p>Wrong credentials given.</p>;
-      }
-      default: {
-        return <p>Transaction page {pageNumber} could not be retrieved.</p>;
-      }
-    }
-  }
-  if (!data) {
-    logger.trace(`History data of ${accountLabel} not arrived`);
-    return <p>Transactions page loading...</p>;
-  }
-  logger.trace(`History data of ${accountLabel}`, data);
-  return (
-    <div class="results">
-      <table class="pure-table pure-table-striped">
-        <thead>
-          <tr>
-            <th>{i18n.str`Date`}</th>
-            <th>{i18n.str`Amount`}</th>
-            <th>{i18n.str`Counterpart`}</th>
-            <th>{i18n.str`Subject`}</th>
-          </tr>
-        </thead>
-        <tbody>
-          {data.transactions.map((item: any, idx: number) => {
-            const sign = item.direction == "DBIT" ? "-" : "";
-            const counterpart =
-              item.direction == "DBIT" ? item.creditorIban : item.debtorIban;
-            // Pattern:
-            //
-            // DD/MM YYYY subject -5 EUR
-            // DD/MM YYYY subject 5 EUR
-            const dateRegex = /^([0-9]{4})-([0-9]{2})-([0-9]{1,2})/;
-            const dateParse = dateRegex.exec(item.date);
-            const date =
-              dateParse !== null
-                ? `${dateParse[3]}/${dateParse[2]} ${dateParse[1]}`
-                : "date not found";
-            return (
-              <tr key={idx}>
-                <td>{date}</td>
-                <td>
-                  {sign}
-                  {item.amount} {item.currency}
-                </td>
-                <td>{counterpart}</td>
-                <td>{item.subject}</td>
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
-    </div>
-  );
-}