diff --git a/webclient/src/App.js b/webclient/src/App.js
index 50ff10a..e3cd374 100644
--- a/webclient/src/App.js
+++ b/webclient/src/App.js
@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
-import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
+import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
import './light.css';
import Logo from './logo.svg';
import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
@@ -240,8 +240,8 @@ function MemberInfo(props) {
const user = props.user;
const member = user.member;
- const lastTrans = user.transactions && user.transactions.slice(-3).reverse();
- const lastCard = user.cards && user.cards.sort((a, b) => a.last_seen_at > b.last_seen_at)[0];
+ const lastTrans = user.transactions && user.transactions.slice(-3).slice().reverse();
+ const lastCard = user.cards && user.cards.sort((a, b) => a.last_seen_at < b.last_seen_at)[0];
return (
@@ -315,10 +315,7 @@ function MemberInfo(props) {
};
function Home(props) {
- const token = props.token;
- const setTokenCache = props.setTokenCache;
- const user = props.user;
- const setUserCache = props.setUserCache;
+ const { token, setTokenCache, user, setUserCache } = props;
return (
@@ -366,16 +363,117 @@ function Home(props) {
);
};
+function Transactions(props) {
+ const { user } = props;
+
+ return (
+
+
+
+
+
+
+ Date
+ ID
+ Amount
+ Account
+ Memo
+
+
+
+
+ {user.transactions.length ?
+ user.transactions.slice().reverse().map((x, i) =>
+
+ {x.date}
+ {x.id}
+ ${x.amount}
+ {x.account_type}
+ {x.memo}
+
+ )
+ :
+ None
+ }
+
+
+
+
+ );
+}
+
+function TransactionDetail(props) {
+ const { user } = props;
+ const { id } = useParams();
+
+ const t = user.transactions.find(x => x.id == id);
+
+ return (
+
+
+
+
+
+
+ Date:
+ {t.date}
+
+
+ ID:
+ {t.id}
+
+
+ Amount:
+ ${t.amount}
+
+
+ Category:
+ {t.category}
+
+
+ Account:
+ {t.account}
+
+
+ Info Source:
+ {t.info_source}
+
+
+ Reference:
+ {t.reference_number}
+
+
+ Memo:
+ {t.memo}
+
+
+
+
+
+ );
+}
+
+function PleaseLogin() {
+ return (
+
+
+ You must login before you can do that!
+ Visit our login page, then try again.
+
+
+ );
+};
+
function App() {
const [token, setToken] = useState(localStorage.getItem('token', ''));
const [user, setUser] = useState(JSON.parse(localStorage.getItem('user', 'false')));
- const setTokenCache = (x) => {
+ function setTokenCache(x) {
setToken(x);
localStorage.setItem('token', x);
}
- const setUserCache = (x) => {
+ function setUserCache(x) {
setUser(x);
localStorage.setItem('user', JSON.stringify(x));
}
@@ -392,7 +490,8 @@ function App() {
});
}, [token]);
- const logout = () => {
+ function logout() {
+ window.location = '/';
setTokenCache('');
setUserCache(false);
}
@@ -420,6 +519,8 @@ function App() {
+ {user ?
+
+
+
+
+
+
+
+
+
+ :
+
+
+
+ }
+
)
};
diff --git a/webclient/src/light.css b/webclient/src/light.css
index cf56d1b..e69b0d6 100644
--- a/webclient/src/light.css
+++ b/webclient/src/light.css
@@ -2,6 +2,10 @@ html, body {
font-size: 16px;
}
+body {
+ overflow-y: scroll;
+}
+
.header {
padding-top: 1.5rem;
margin-bottom: 1.5rem;