[libeufin] 01/03: Display existing bank connections and bank accounts

[gnunet]

This is an automated email from the git hooks/post-receive script.

heng-yeow pushed a commit to branch master
in repository libeufin.

commit a29532e27ab525381c751b2ffa7458451b2b87d2
Author: tanhengyeow <E0032242@u.nus.edu>
AuthorDate: Fri Jun 19 00:17:00 2020 +0800

    Display existing bank connections and bank accounts
---
 frontend/src/components/bank-accounts/Index.tsx | 152 +++++++++++++++++++-----
 1 file changed, 120 insertions(+), 32 deletions(-)

diff --git a/frontend/src/components/bank-accounts/Index.tsx 
b/frontend/src/components/bank-accounts/Index.tsx
index ccb37b9..69f2f2c 100644
--- a/frontend/src/components/bank-accounts/Index.tsx
+++ b/frontend/src/components/bank-accounts/Index.tsx
@@ -1,45 +1,133 @@
 import React, { useState } from 'react';
+import { Button, Card, Col, Row, Tabs } from 'antd';
+import './BankAccounts.less';
+// import AddBankConnectionDrawer from './AddBankConnectionDrawer';
+
+const { TabPane } = Tabs;
 
 const BankAccounts = () => {
   const [connectionsList, setConnectionsList] = useState([]);
+  const [accountsList, setAccountsList] = useState([]);
 
-  React.useEffect(() => {
-    const fetchBankConnections = async () => {
-      const authHeader = await window.localStorage.getItem('authHeader');
-      await fetch(`/bank-connections`, {
-        headers: new Headers({
-          Authorization: `Basic ${authHeader}`,
-        }),
+  const fetchBankConnections = async () => {
+    const authHeader = await window.localStorage.getItem('authHeader');
+    await fetch(`/bank-connections`, {
+      headers: new Headers({
+        Authorization: `Basic ${authHeader}`,
+      }),
+    })
+      .then((response) => {
+        console.log(response);
+        if (response.ok) {
+          return response.json();
+        }
+        throw 'Cannot fetch bank connections';
+      })
+      .then((response) => {
+        setConnectionsList(response.bankConnections);
+      })
+      .catch((err) => {
+        console.log(err);
+        throw new Error(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 fetch bank accounts';
       })
-        .then((response) => {
-          if (response.ok) {
-            return response.json();
-          }
-          throw 'Cannot fetch bank connections';
-        })
-        .then((response) => {
-          setConnectionsList(response.bankConnections);
-        })
-        .catch((err) => {
-          throw new Error(err);
-        });
-    };
+      .then((response) => {
+        setAccountsList(response.accounts);
+      })
+      .catch((err) => {
+        console.log(err);
+        throw new Error(err);
+      });
+  };
+
+  React.useEffect(() => {
     fetchBankConnections();
+    fetchBankAccounts();
   }, []);
 
+  const [visible, setVisible] = useState(false);
+  const showDrawer = () => {
+    setVisible(true);
+  };
+  const onClose = () => {
+    setVisible(false);
+    fetchBankConnections();
+    fetchBankAccounts();
+  };
+
   return (
-    <>
-      <h1>Bank Accounts</h1>
-      <h2>Bank connections</h2>
-      {connectionsList
-        ? connectionsList.map((bankConnection) => (
-            <div>
-              <p>Name: {bankConnection['name']}</p>
-              <p>Type: {bankConnection['type']}</p>
-            </div>
-          ))
-        : null}
-    </>
+    <div className="bank-accounts">
+      <Tabs defaultActiveKey="1" type="card" size="large">
+        <TabPane tab="Bank connections" key="1">
+          <div className="buttons-row">
+            <Button type="primary" size="middle" onClick={showDrawer}>
+              Add bank connection
+            </Button>
+            {/* <AddBankConnectionDrawer visible={visible} onClose={onClose} 
/> */}
+            <Button type="primary" size="middle">
+              Import from backup
+            </Button>
+            <Button type="primary" size="middle">
+              Reload connections
+            </Button>
+          </div>
+          <Row gutter={[40, 40]}>
+            {connectionsList
+              ? connectionsList.map((bankConnection) => (
+                  <Col span={8}>
+                    <Card
+                      title={String(bankConnection['type']).toUpperCase()}
+                      bordered={false}
+                    >
+                      <p>Name: {bankConnection['name']}</p>
+                    </Card>
+                  </Col>
+                ))
+              : null}
+          </Row>
+        </TabPane>
+        <TabPane tab="Your accounts" key="2">
+          <div className="buttons-row">
+            <Button type="primary" size="middle">
+              Add bank account
+            </Button>
+          </div>
+          <Row gutter={[40, 40]}>
+            {accountsList
+              ? accountsList.map((bankAccount) => (
+                  <Col span={8}>
+                    <Card
+                      title={String(bankAccount['account']).toUpperCase()}
+                      bordered={false}
+                    >
+                      <p>Holder: {bankAccount['holder']}</p>
+                      <p>IBAN: {bankAccount['iban']}</p>
+                      <p>BIC: {bankAccount['bic']}</p>
+                    </Card>
+                  </Col>
+                ))
+              : null}
+          </Row>
+        </TabPane>
+        <TabPane tab="Recipient accounts" key="3">
+          Placeholder
+        </TabPane>
+      </Tabs>
+    </div>
   );
 };
 

-- 
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.