diff options
Diffstat (limited to 'packages/demobank-ui/src/pages/home/Transactions.tsx')
-rw-r--r-- | packages/demobank-ui/src/pages/home/Transactions.tsx | 82 |
1 files changed, 82 insertions, 0 deletions
diff --git a/packages/demobank-ui/src/pages/home/Transactions.tsx b/packages/demobank-ui/src/pages/home/Transactions.tsx new file mode 100644 index 000000000..eb344403f --- /dev/null +++ b/packages/demobank-ui/src/pages/home/Transactions.tsx @@ -0,0 +1,82 @@ +import { h, VNode } from "preact"; +import { useEffect } from "preact/hooks"; +import useSWR from "swr"; +import { useTranslationContext } from "../../context/translation.js"; + +/** + * Show one page of transactions. + */ +export function Transactions({ + pageNumber, + accountLabel, + balanceValue, +}: any): VNode { + const { i18n } = useTranslationContext(); + const { data, error, mutate } = useSWR( + `access-api/accounts/${accountLabel}/transactions?page=${pageNumber}`, + ); + useEffect(() => { + mutate(); + }, [balanceValue]); + if (typeof error !== "undefined") { + console.log("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) { + console.log(`History data of ${accountLabel} not arrived`); + return <p>Transactions page loading...</p>; + } + console.log(`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> + ); +} |