Add routes for frontend

4 files changed, 122 insertions, 0 deletions

diff --git a/frontend/src/routes/AuthenticatedRoute.tsx b/frontend/src/routes/AuthenticatedRoute.tsx
new file mode 100644
index 00000000..c6907b3c
--- /dev/null
+++ b/frontend/src/routes/AuthenticatedRoute.tsx
@@ -0,0 +1,45 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Route } from 'react-router-dom';
+import history from '../history';
+import { Auth } from '../types';
+
+interface Props {
+  exact?: boolean;
+  isAuthenticated: boolean | null;
+  path: string;
+  component: React.ComponentType<any>;
+}
+
+const AuthenticatedRoute = ({
+  component: Component,
+  isAuthenticated,
+  ...otherProps
+}: Props) => {
+  if (isAuthenticated === false) {
+    history.push('/login');
+  }
+
+  return (
+    <>
+      <div className="container">
+        <header>Nav Bar</header>
+        <Route
+          render={() => (
+            <>
+              <Component {...otherProps} />
+            </>
+          )}
+        />
+        <footer>Footer</footer>
+      </div>
+    </>
+  );
+};
+
+const mapStateToProps = (state: Auth) => ({
+  isAuthenticated: state.isAuthenticated,
+});
+
+export default connect(mapStateToProps)(AuthenticatedRoute);
diff --git a/frontend/src/routes/Layout.less b/frontend/src/routes/Layout.less
new file mode 100644
index 00000000..449afb76
--- /dev/null
+++ b/frontend/src/routes/Layout.less
@@ -0,0 +1,4 @@
+.container {
+  height: 100vh;
+  padding: 30px 60px 0px 60px;
+}
diff --git a/frontend/src/routes/Pages.tsx b/frontend/src/routes/Pages.tsx
new file mode 100644
index 00000000..7a77989e
--- /dev/null
+++ b/frontend/src/routes/Pages.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { Route, Switch } from 'react-router-dom';
+
+import Login from '../components/login/Index';
+import NotFound from '../components/NotFound';
+import Home from '../components/home/Index';
+import Activity from '../components/activity/Index';
+import BankAccounts from '../components/bank-accounts/Index';
+
+import AuthenticatedRoute from './AuthenticatedRoute';
+import UnauthenticatedRoute from './UnauthenticatedRoute';
+
+const Pages = () => {
+  return (
+    <Switch>
+      <UnauthenticatedRoute path="/" exact component={Login} />
+      <UnauthenticatedRoute path="/login" exact component={Login} />
+      <AuthenticatedRoute path="/" exact component={Home} />
+      <AuthenticatedRoute path="/home" exact component={Home} />
+      <AuthenticatedRoute path="/activity" exact component={Activity} />
+      <AuthenticatedRoute
+        path="/bank-accounts"
+        exact
+        component={BankAccounts}
+      />
+      <Route component={NotFound} />
+    </Switch>
+  );
+};
+
+export default Pages;
diff --git a/frontend/src/routes/UnauthenticatedRoute.tsx b/frontend/src/routes/UnauthenticatedRoute.tsx
new file mode 100644
index 00000000..12fc32a4
--- /dev/null
+++ b/frontend/src/routes/UnauthenticatedRoute.tsx
@@ -0,0 +1,42 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Route } from 'react-router-dom';
+
+import history from '../history';
+import { Auth } from '../types';
+
+interface Props {
+  exact?: boolean;
+  isAuthenticated: boolean | null;
+  path: string;
+  component: React.ComponentType<any>;
+}
+
+const UnauthenticatedRoute = ({
+  component: Component,
+  isAuthenticated,
+  ...otherProps
+}: Props) => {
+  if (isAuthenticated === true) {
+    history.push('/home');
+  }
+
+  return (
+    <>
+      <Route
+        render={() => (
+          <>
+            <Component {...otherProps} />
+          </>
+        )}
+      />
+    </>
+  );
+};
+
+const mapStateToProps = (state: Auth) => ({
+  isAuthenticated: state.isAuthenticated,
+});
+
+export default connect(mapStateToProps)(UnauthenticatedRoute);