List existing bank connections + cleanup

10 files changed, 65 insertions, 69 deletions

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index ca9b5b8e..0cd063ad 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -4,7 +4,7 @@ import { Route, Router } from 'react-router-dom';
 import history from './history';
 import Pages from './routes/Pages';
 import { checkAuthentication } from './actions/auth';
-import { Auth } from './types';
+import { Store } from './types';
 import './App.less';
 
 interface Props {
@@ -27,7 +27,8 @@ const App = ({ checkAuthenticationConnect, isAuthenticated }: Props) => {
   return <div className="App">{app}</div>;
 };
 
-const mapStateToProps = (state: Auth) => ({
+const mapStateToProps = (state: Store) => ({
+  ...state,
   isAuthenticated: state.isAuthenticated,
 });
 
diff --git a/frontend/src/components/activity/Index.tsx b/frontend/src/components/activity/Index.tsx
index 81ef5836..9f6590c3 100644
--- a/frontend/src/components/activity/Index.tsx
+++ b/frontend/src/components/activity/Index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
 
-const Activity = () => <p>Activity</p>;
+const Activity = () => <h1>Activity</h1>;
 
 export default Activity;
diff --git a/frontend/src/components/bank-accounts/Index.tsx b/frontend/src/components/bank-accounts/Index.tsx
index 7d806480..ccb37b9b 100644
--- a/frontend/src/components/bank-accounts/Index.tsx
+++ b/frontend/src/components/bank-accounts/Index.tsx
@@ -1,5 +1,46 @@
-import * as React from 'react';
+import React, { useState } from 'react';
 
-const BankAccounts = () => <p>Bank Accounts</p>;
+const BankAccounts = () => {
+  const [connectionsList, setConnectionsList] = useState([]);
+
+  React.useEffect(() => {
+    const fetchBankConnections = async () => {
+      const authHeader = await window.localStorage.getItem('authHeader');
+      await fetch(`/bank-connections`, {
+        headers: new Headers({
+          Authorization: `Basic ${authHeader}`,
+        }),
+      })
+        .then((response) => {
+          if (response.ok) {
+            return response.json();
+          }
+          throw 'Cannot fetch bank connections';
+        })
+        .then((response) => {
+          setConnectionsList(response.bankConnections);
+        })
+        .catch((err) => {
+          throw new Error(err);
+        });
+    };
+    fetchBankConnections();
+  }, []);
+
+  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}
+    </>
+  );
+};
 
 export default BankAccounts;
diff --git a/frontend/src/components/home/Index.tsx b/frontend/src/components/home/Index.tsx
index 29af137f..27fa3b03 100644
--- a/frontend/src/components/home/Index.tsx
+++ b/frontend/src/components/home/Index.tsx
@@ -1,34 +1,5 @@
 import * as React from 'react';
-import { connect } from 'react-redux';
-import { Link } from 'react-router-dom';
-import { logout } from '../../actions/auth';
 
-interface Props {
-  logoutConnect: () => void;
-}
+const Home = () => <h1>Home</h1>;
 
-const Home = ({ logoutConnect }: Props) => (
-  <>
-    <p>Home page</p>
-    <ul>
-      <li>
-        <Link to="/activity">Activity</Link>
-      </li>
-      <li>
-        <Link to="/bank-accounts">Bank Accounts</Link>
-      </li>
-      <li>
-        <Link to="/non-existent-link">Non existent link</Link>
-      </li>
-    </ul>
-    <button type="button" onClick={logoutConnect}>
-      Logout
-    </button>
-  </>
-);
-
-const mapDispatchToProps = {
-  logoutConnect: logout,
-};
-
-export default connect(null, mapDispatchToProps)(Home);
+export default Home;
diff --git a/frontend/src/components/navbar/Index.tsx b/frontend/src/components/navbar/Index.tsx
index 9a241370..0d8f4ba0 100644
--- a/frontend/src/components/navbar/Index.tsx
+++ b/frontend/src/components/navbar/Index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { Menu, Button } from 'antd';
 import { connect } from 'react-redux';
 import { LogoutOutlined } from '@ant-design/icons';
@@ -36,6 +36,7 @@ const NavBar = ({ logoutConnect }: Props) => {
       <Menu
         className="menu"
         mode="horizontal"
+        selectedKeys={[]}
         onClick={({ key }) => handleClick(key)}
       >
         <Menu.Item key="1">Home</Menu.Item>
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index d2c60e7c..21280168 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -6,8 +6,8 @@ import { applyMiddleware, compose, createStore } from 'redux';
 import thunkMiddleware from 'redux-thunk-recursion-detect';
 
 import App from './App';
-import authReducer from './reducers/auth';
-import { Auth } from './types';
+import rootReducer from './reducers/index';
+import { Store } from './types';
 
 let composeEnhancers;
 if (
@@ -19,8 +19,8 @@ if (
   composeEnhancers = compose;
 }
 
-const store = createStore<Auth, any, any, any>(
-  authReducer,
+const store = createStore<Store, any, any, any>(
+  rootReducer,
   undefined,
   composeEnhancers(applyMiddleware(thunkMiddleware))
 );
diff --git a/frontend/src/reducers/auth.tsx b/frontend/src/reducers/auth.tsx
deleted file mode 100644
index cf97e409..00000000
--- a/frontend/src/reducers/auth.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Authenticate, Unauthenticate } from '../actions/auth';
-import { AUTHENTICATE, UNAUTHENTICATE } from '../constants';
-import { Auth } from '../types';
-
-export default function authReducer(
-  state: Auth = {
-    isAuthenticated: null,
-  },
-  action: Authenticate | Unauthenticate
-): Auth {
-  switch (action.type) {
-    case AUTHENTICATE:
-      return {
-        ...state,
-        isAuthenticated: true,
-      };
-    case UNAUTHENTICATE:
-      return { ...state, isAuthenticated: false };
-    default:
-      return state;
-  }
-}
diff --git a/frontend/src/routes/AuthenticatedRoute.tsx b/frontend/src/routes/AuthenticatedRoute.tsx
index 2a14cc0a..366dc601 100644
--- a/frontend/src/routes/AuthenticatedRoute.tsx
+++ b/frontend/src/routes/AuthenticatedRoute.tsx
@@ -3,8 +3,10 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 import { Route } from 'react-router-dom';
 import history from '../history';
-import { Auth } from '../types';
+import { Store } from '../types';
 
+import './Layout.less';
+import NavBar from '../components/navbar/Index';
 import Footer from '../components/footer/Index';
 
 interface Props {
@@ -26,7 +28,7 @@ const AuthenticatedRoute = ({
   return (
     <>
       <div className="container">
-        <header>Nav Bar</header>
+        <NavBar />
         <Route
           render={() => (
             <>
@@ -40,7 +42,8 @@ const AuthenticatedRoute = ({
   );
 };
 
-const mapStateToProps = (state: Auth) => ({
+const mapStateToProps = (state: Store) => ({
+  ...state,
   isAuthenticated: state.isAuthenticated,
 });
 
diff --git a/frontend/src/routes/UnauthenticatedRoute.tsx b/frontend/src/routes/UnauthenticatedRoute.tsx
index 12fc32a4..d468441d 100644
--- a/frontend/src/routes/UnauthenticatedRoute.tsx
+++ b/frontend/src/routes/UnauthenticatedRoute.tsx
@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import { Route } from 'react-router-dom';
 
 import history from '../history';
-import { Auth } from '../types';
+import { Store } from '../types';
 
 interface Props {
   exact?: boolean;
@@ -35,7 +35,8 @@ const UnauthenticatedRoute = ({
   );
 };
 
-const mapStateToProps = (state: Auth) => ({
+const mapStateToProps = (state: Store) => ({
+  ...state,
   isAuthenticated: state.isAuthenticated,
 });
 
diff --git a/frontend/src/types.tsx b/frontend/src/types.tsx
index 33e6ff20..da79f4d5 100644
--- a/frontend/src/types.tsx
+++ b/frontend/src/types.tsx
@@ -1,3 +1,3 @@
-export interface Auth {
+export interface Store {
   isAuthenticated: boolean | null;
 }