libeufin

commit e597978e18c0f902d1a94d3286ea5f7cfac5c225
parent a9db558fd0ef11aafa754e1f6d8bc57ea8f75092
Author: tanhengyeow <E0032242@u.nus.edu>
Date:   Thu,  2 Jul 2020 02:33:22 +0800

Improve error handling in bank accounts page

Diffstat:
M
frontend/src/components/bank-accounts/BankConnectionDrawer.tsx
 | 
15
+++++++++++----
M
frontend/src/components/bank-accounts/Index.tsx
 | 
14
+++++++++-----

2 files changed, 20 insertions(+), 9 deletions(-)
diff --git a/frontend/src/components/bank-accounts/BankConnectionDrawer.tsx b/frontend/src/components/bank-accounts/BankConnectionDrawer.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Button, Drawer, Table } from 'antd';
+import { message, Button, Drawer, Table } from 'antd';
 
 const columns = [
   {
@@ -26,6 +26,10 @@ const BankConnectionDrawer = (props) => {
   const [accountsList, setAccountsList] = useState([]);
   const [selectedRowKeys, setSelectedRowKeys] = useState([]);
 
+  const showError = (err) => {
+    message.error(String(err));
+  };
+
   const onSelectChange = (selectedRowKeys) => {
     setSelectedRowKeys(selectedRowKeys);
   };
@@ -46,6 +50,9 @@ const BankConnectionDrawer = (props) => {
       .then(async (blob) => {
         const pdfLink = URL.createObjectURL(blob);
         setPrintLink(pdfLink);
+      })
+      .catch((err) => {
+        showError(err);
       });
   };
 
@@ -65,14 +72,14 @@ const BankConnectionDrawer = (props) => {
       })
       .then((response) => {
         setAccountsList(
-          response.map((account, index) => ({
+          response.accounts.map((account, index) => ({
             ...account,
             key: index,
           }))
         );
       })
       .catch((err) => {
-        throw new Error(err);
+        showError(err);
       });
   };
 
@@ -104,7 +111,7 @@ const BankConnectionDrawer = (props) => {
         }
       })
       .catch((err) => {
-        throw new Error(err);
+        showError(err);
       });
   };
 
diff --git a/frontend/src/components/bank-accounts/Index.tsx b/frontend/src/components/bank-accounts/Index.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Button, Card, Col, Collapse, Row, Tabs } from 'antd';
+import { message, Button, Card, Col, Collapse, Row, Tabs } from 'antd';
 import './BankAccounts.less';
 import AddBankConnectionDrawer from './AddBankConnectionDrawer';
 import BankConnectionCard from './BankConnectionCard';
@@ -11,6 +11,10 @@ const BankAccounts = () => {
   const [connectionsList, setConnectionsList] = useState([]);
   const [accountsList, setAccountsList] = useState([]);
 
+  const showError = (err) => {
+    message.error(String(err));
+  };
+
   const fetchBankConnections = async () => {
     const authHeader = await window.localStorage.getItem('authHeader');
     await fetch(`/bank-connections`, {
@@ -25,10 +29,10 @@ const BankAccounts = () => {
         throw 'Cannot fetch bank connections';
       })
       .then((response) => {
-        setConnectionsList(response.bankConnections);
+        setConnectionsList(response);
       })
       .catch((err) => {
-        throw new Error(err);
+        showError(err);
       });
   };
 
@@ -49,7 +53,7 @@ const BankAccounts = () => {
         setAccountsList(response.accounts);
       })
       .catch((err) => {
-        throw new Error(err);
+        showError(err);
       });
   };
 
@@ -73,7 +77,7 @@ const BankAccounts = () => {
       <Row gutter={[40, 40]}>
         {accountsList.map((bankAccount) => (
           <Col span={8}>
-            <Card title={bankAccount['account']} bordered={false}>
+            <Card title={bankAccount['nexusBankAccountId']} bordered={false}>
               <p>Holder: {bankAccount['holder']}</p>
               <p>IBAN: {bankAccount['iban']}</p>
               <p>BIC: {bankAccount['bic']}</p>