gnunet-svn
[Top][All Lists]
Advanced

[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.



reply via email to

[Prev in Thread] Current Thread [Next in Thread]