Make navigation work

client/src/App.css

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

client/src/App.js

@@ -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>
   );
 }
 

client/src/RouteNames.js

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

client/src/cash/Cash.css

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

client/src/cash/Cash.js

@@ -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); 

client/src/cash/MakeMoneyMove.js

@@ -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;

client/src/common/RoutableNavItem.js

@@ -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);
+
+

client/src/index.css

@@ -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;
 }
+
+