diff options
author | tanhengyeow <E0032242@u.nus.edu> | 2020-06-19 00:17:00 +0800 |
---|---|---|
committer | tanhengyeow <E0032242@u.nus.edu> | 2020-06-19 00:17:00 +0800 |
commit | a29532e27ab525381c751b2ffa7458451b2b87d2 (patch) | |
tree | 55ea17c26fa743cf0394b847922c5df1023790a2 /frontend | |
parent | 4c5b5fe24fbb5224f2946d8f21559bf24bdb5c68 (diff) | |
download | libeufin-a29532e27ab525381c751b2ffa7458451b2b87d2.tar.gz libeufin-a29532e27ab525381c751b2ffa7458451b2b87d2.tar.bz2 libeufin-a29532e27ab525381c751b2ffa7458451b2b87d2.zip |
Display existing bank connections and bank accounts
Diffstat (limited to 'frontend')
-rw-r--r-- | frontend/src/components/bank-accounts/Index.tsx | 152 |
1 files changed, 120 insertions, 32 deletions
diff --git a/frontend/src/components/bank-accounts/Index.tsx b/frontend/src/components/bank-accounts/Index.tsx index ccb37b9b..69f2f2c2 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> ); }; |