Show bank accounts in home page

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 00000000..cf8110aa
--- /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 442344e5..f38b4422 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;