senaduka/old-roraccounting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make navigation work

Browse Source
This commit is contained in:
Senad Uka
2019-06-23 19:38:26 +02:00
parent 50cfbfede5
commit 755f056abb
14 changed files with 437 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/package.json
View File

@@ -4,8 +4,10 @@
"private": true,
"proxy": "http://localhost:3001",
"dependencies": {
"axios": "^0.19.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-materialize": "^3.3.1",
"react-scripts": "3.0.1"
},
"scripts": {

10
client/public/index.html
View File

@@ -19,7 +19,15 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<!-- Import Google Icon Font -->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<title>Gangsta Keeping Score</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

14
client/src/App.css
View File

@@ -31,3 +31,17 @@
transform: rotate(360deg);
}
}
#root, .main-tab {
height: 100%;
width: 100%;
}
.noscrolling {
overflow: hidden;
}
.autoscroling {
overflow: auto;
}

50
client/src/App.js
View File

@@ -1,25 +1,41 @@
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Tabs, Tab, Navbar } from 'react-materialize';
import MakeMoneyMove from './cash/MakeMoneyMove';
import Cash from './cash/Cash';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import RoutableNavItem from './common/RoutableNavItem';
import {
CRIB,
MAKE_MONEY_MOVE
} from './RouteNames';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
<Router className="noscrolling">
<Navbar brand={<div>GKS</div>} alignLinks="right">
<RoutableNavItem href={CRIB}>
Crib
</RoutableNavItem>
<RoutableNavItem>
Homies
</RoutableNavItem>
<RoutableNavItem href={MAKE_MONEY_MOVE}>
Make Money Move
</RoutableNavItem>
</Navbar>
<div className="autoscrolling">
<Route exact path={CRIB} component={Cash} />
<Route path={MAKE_MONEY_MOVE} component={MakeMoneyMove} />
</div>
</Router>
);
}

2
client/src/RouteNames.js Normal file
View File

@@ -0,0 +1,2 @@
export const CRIB = '/';
export const MAKE_MONEY_MOVE = '/make-money-move';

7
client/src/cash/Cash.css Normal file
View File

@@ -0,0 +1,7 @@
.cash-cell-left {
text-align: left;
}
.cash-cell-right {
text-align: right;
}

87
client/src/cash/Cash.js Normal file
View File

@@ -0,0 +1,87 @@
import React, { useState, useEffect } from 'react';
import { Button, Table } from 'react-materialize';
import './Cash.css';
import axios from 'axios';
import { Link } from 'react-router-dom';
import { MAKE_MONEY_MOVE } from '../RouteNames';
import { withRouter } from 'react-router-dom';
const Cash = (props) => {
const [homiesCash, setHomiesCash] = useState([]);
//const [importance, setImportance] = useState(10);
useEffect( () => {
const getCashForHomies = async () => {
try {
const cash = await axios.get(`/homies/cash`);
setHomiesCash(cash.data);
} catch (e) {
console.log("Error fetching", e);
}
};
getCashForHomies();
}, []);
const formatMoney = (amount) => {
const formatted = Number.parseFloat(amount).toFixed(2);
return `${formatted} KM`;
}
const cashTableBody = homiesCash.map( (homieLine) => {
return (
<tr key={homieLine.homie.id}>
<td className="cash-cell-left">
{ homieLine.homie.name }
</td>
<td className="cash-cell-right">
{ formatMoney(homieLine.amount) }
</td>
<td className="cash-cell-left">
[ settle ]
</td>
</tr>
);
});
return (
<div>
<Table>
<thead>
<tr>
<th>
Homie
</th>
<th>
Cash
</th>
<th>
Actions
</th>
</tr>
</thead>
<tbody>
{ cashTableBody }
</tbody>
</Table>
<Button
floating
large
className="green"
fab={{direction: 'bottom'}}
waves="light"
icon="add"
onClick={
() => {
props.history.push(MAKE_MONEY_MOVE)
}
}/>
</div>
);
}
export default withRouter(Cash);

70
client/src/cash/MakeMoneyMove.js Normal file
View File

@@ -0,0 +1,70 @@
import React, { useState, useEffect } from 'react';
import { Modal, Select, TextInput, Collection, CollectionItem } from 'react-materialize';
import './Cash.css';
import axios from 'axios';
const MakeMoneyMove = (props) => {
const [selectedFrom, setSelectedFrom] = useState(null);
return (
<div>
<TextInput label="How Much?" />
<label>From: </label>
<Collection>
<CollectionItem>
Alvin
</CollectionItem>
<CollectionItem>
Alvin
</CollectionItem>
<CollectionItem>
Alvin
</CollectionItem>
<CollectionItem>
Alvin
</CollectionItem>
<CollectionItem>
Alvin
</CollectionItem>
<CollectionItem>
Alvin
</CollectionItem>
<CollectionItem>
Alvin
</CollectionItem>
<CollectionItem>
Alvin
</CollectionItem>
<CollectionItem>
Alvin
</CollectionItem>
<CollectionItem>
Alvin
</CollectionItem>
<CollectionItem>
Alvin
</CollectionItem>
<CollectionItem>
Alvin
</CollectionItem>
<CollectionItem>
Alvin
</CollectionItem>
<CollectionItem>
Alvin
</CollectionItem>
<CollectionItem>
Alvin
</CollectionItem>
<CollectionItem>
Alvin
</CollectionItem>
</Collection>
</div>
);
}
export default MakeMoneyMove;

19
client/src/common/RoutableNavItem.js Normal file
View File

@@ -0,0 +1,19 @@
import React from 'react';
import { Navbar, NavItem } from 'react-materialize';
import { withRouter } from 'react-router-dom';
const RoutableNavItem = (props) => {
return (
<NavItem data-target="mobile-nav" className="sidenav-close" onClick={
() => {
props.history.push(props.href);
}
}>
{ props.children }
</NavItem>
);
}
export default withRouter(RoutableNavItem);

8
client/src/index.css
View File

@@ -7,7 +7,15 @@ body {
-moz-osx-font-smoothing: grayscale;
}
html, body {
margin: 0;
height: 100%;
width: 100%;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}

42
client/yarn.lock
View File

@@ -1813,6 +1813,14 @@ aws4@^1.8.0:
resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
axios@^0.19.0:
version "0.19.0"
resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.0.tgz#8e09bff3d9122e133f7b8101c8fbdd00ed3d2ab8"
integrity sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==
dependencies:
follow-redirects "1.5.10"
is-buffer "^2.0.2"
axobject-query@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.0.2.tgz#ea187abe5b9002b377f925d8bf7d1c561adf38f9"
@@ -2421,6 +2429,11 @@ class-utils@^0.3.5:
isobject "^3.0.0"
static-extend "^0.1.1"
classnames@^2.2.5:
version "2.2.6"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
clean-css@4.2.x:
version "4.2.1"
resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.1.tgz#2d411ef76b8569b6d0c84068dabe85b0aa5e5c17"
@@ -3040,6 +3053,13 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.8, debug@^2.6.
dependencies:
ms "2.0.0"
debug@=3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
dependencies:
ms "2.0.0"
debug@^3.2.5, debug@^3.2.6:
version "3.2.6"
resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
@@ -3998,6 +4018,13 @@ flush-write-stream@^1.0.0:
inherits "^2.0.3"
readable-stream "^2.3.6"
follow-redirects@1.5.10:
version "1.5.10"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
dependencies:
debug "=3.1.0"
follow-redirects@^1.0.0:
version "1.7.0"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.7.0.tgz#489ebc198dc0e7f64167bd23b03c4c19b5784c76"
@@ -4818,7 +4845,7 @@ is-buffer@^1.0.2, is-buffer@^1.1.5:
resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
is-buffer@^2.0.0:
is-buffer@^2.0.0, is-buffer@^2.0.2:
version "2.0.3"
resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.3.tgz#4ecf3fcf749cbd1e472689e109ac66261a25e725"
integrity sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw==
@@ -7846,7 +7873,7 @@ react-dev-utils@^9.0.1:
strip-ansi "5.2.0"
text-table "0.2.0"
react-dom@^16.8.6:
react-dom@^16.8.5, react-dom@^16.8.6:
version "16.8.6"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f"
integrity sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==
@@ -7866,6 +7893,15 @@ react-is@^16.8.1, react-is@^16.8.4:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
react-materialize@^3.3.1:
version "3.3.1"
resolved "https://registry.yarnpkg.com/react-materialize/-/react-materialize-3.3.1.tgz#aa928d6002a54db651eb359c94c9de3e5fa74c92"
integrity sha512-w2mbBYujUuNsrmxB98GgaZEFmmuSwyQojgECjy6qADU9QSRjJNwcYFb/MjJAAC1hQ3DtVfLZ/SfBOZfC8LlqRg==
dependencies:
classnames "^2.2.5"
react "^16.8.5"
react-dom "^16.8.5"
react-scripts@3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-3.0.1.tgz#e5565350d8069cc9966b5998d3fe3befe3d243ac"
@@ -7926,7 +7962,7 @@ react-scripts@3.0.1:
optionalDependencies:
fsevents "2.0.6"
react@^16.8.6:
react@^16.8.5, react@^16.8.6:
version "16.8.6"
resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==