[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[libeufin] 02/02: Show bank accounts in home page
From: |
gnunet |
Subject: |
[libeufin] 02/02: Show bank accounts in home page |
Date: |
Tue, 07 Jul 2020 20:00:19 +0200 |
This is an automated email from the git hooks/post-receive script.
heng-yeow pushed a commit to branch master
in repository libeufin.
commit d7257fcdc22c4cdca14008a951216ba21e8ed83f
Author: tanhengyeow <E0032242@u.nus.edu>
AuthorDate: Wed Jul 8 02:00:09 2020 +0800
Show bank accounts in home page
---
frontend/src/components/home/Home.less | 4 ++
frontend/src/components/home/Index.tsx | 82 ++++++++++++++++++++++++++++++----
2 files changed, 78 insertions(+), 8 deletions(-)
diff --git a/frontend/src/components/home/Home.less
b/frontend/src/components/home/Home.less
new file mode 100644
index 0000000..cf8110a
--- /dev/null
+++ b/frontend/src/components/home/Home.less
@@ -0,0 +1,4 @@
+.home-bank-accounts {
+ display: flex;
+ margin-top: 50px;
+}
diff --git a/frontend/src/components/home/Index.tsx
b/frontend/src/components/home/Index.tsx
index 442344e..f38b442 100644
--- a/frontend/src/components/home/Index.tsx
+++ b/frontend/src/components/home/Index.tsx
@@ -1,10 +1,76 @@
-import * as React from 'react';
-
-const Home = () => (
- <>
- <h1>Home</h1>
- <p style={{ height: '100vh' }}>text</p>
- </>
-);
+import React, { useState } from 'react';
+import './Home.less';
+import { message, Button, Card, Col, Row } from 'antd';
+import { RightOutlined } from '@ant-design/icons';
+
+import history from '../../history';
+
+const Home = () => {
+ const [accountsList, setAccountsList] = useState([]);
+
+ const showError = (err) => {
+ message.error(String(err));
+ };
+
+ const fetchBankAccounts = async () => {
+ const authHeader = await window.localStorage.getItem('authHeader');
+ await fetch(`/bank-accounts`, {
+ headers: new Headers({
+ Authorization: `Basic ${authHeader}`,
+ }),
+ })
+ .then((response) => {
+ if (response.ok) {
+ return response.json();
+ }
+ throw 'Cannot retrieve bank accounts';
+ })
+ .then((response) => {
+ setAccountsList(response.accounts);
+ })
+ .catch((err) => {
+ showError(err);
+ });
+ };
+
+ React.useEffect(() => {
+ fetchBankAccounts();
+ }, []);
+
+ const clickHomeBankAccounts = () => {
+ history.push('/bank-accounts');
+ };
+
+ const bankAccountsContent =
+ accountsList.length > 0 ? (
+ <Row gutter={[40, 40]}>
+ {accountsList.map((bankAccount) => (
+ <Col key={bankAccount['nexusBankAccountId']} span={8}>
+ <Card title={bankAccount['nexusBankAccountId']} bordered={false}>
+ <p>Holder: {bankAccount['ownerName']}</p>
+ <p>IBAN: {bankAccount['iban']}</p>
+ <p>BIC: {bankAccount['bic']}</p>
+ </Card>
+ </Col>
+ ))}
+ </Row>
+ ) : null;
+
+ return (
+ <>
+ <div className="home-bank-accounts">
+ <h1 style={{ marginRight: 10 }}>Bank Accounts</h1>
+ <Button
+ type="primary"
+ shape="circle"
+ icon={<RightOutlined />}
+ size="large"
+ onClick={() => clickHomeBankAccounts()}
+ />
+ </div>
+ {bankAccountsContent}
+ </>
+ );
+};
export default Home;
--
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.