show transactions on homie click

client/src/App.js

@@ -2,16 +2,19 @@ import React from 'react';
 import './App.css';
 import { Navbar } from 'react-materialize';
 import MakeMoneyMove from './cash/MakeMoneyMove';
+import Flow from "./homies/Flow";
 import Cash from './cash/Cash';
 import Chips from './chips/Chips';
 import { BrowserRouter as Router, Route } from "react-router-dom";
 import RoutableNavItem from './common/RoutableNavItem';
-import { 
+import {
   CRIB,
   CHIPS,
-  MAKE_MONEY_MOVE
+  MAKE_MONEY_MOVE,
+  HOMIE_FLOW
 } from './RouteNames';
 
+
 function App() {
   return (
     <Router>
@@ -37,6 +40,7 @@ function App() {
 
       <div className="autoscrolling">
         <Route exact path={CRIB} component={Cash} />
+        <Route path={HOMIE_FLOW} component={Flow} />
         <Route path={CHIPS} component={Chips} />
         <Route path={MAKE_MONEY_MOVE} component={MakeMoneyMove} />
       </div>

client/src/RouteNames.js

@@ -1,3 +1,4 @@
 export const CRIB = '/';
 export const CHIPS = '/chips';
 export const MAKE_MONEY_MOVE = '/make-money-move';
+export const HOMIE_FLOW = '/homie/:homie_id/flow';

client/src/cash/Cash.js

@@ -4,6 +4,7 @@ import './Cash.css';
 import axios from 'axios';
 import { MAKE_MONEY_MOVE } from '../RouteNames';
 import { withRouter } from 'react-router-dom';
+import { formatMoney } from '../common/formatting';
 
 const Cash = (props) => {
   const [homiesCash, setHomiesCash] = useState([]);
@@ -21,17 +22,11 @@ const Cash = (props) => {
     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 } 
+          <a href={`/homie/${homieLine.homie.id}/flow`}>{ homieLine.homie.name }</a>
         </td>
         <td className="cash-cell-right">
           { formatMoney(homieLine.amount) }
@@ -44,39 +39,39 @@ const Cash = (props) => {
   });
 
   return (
-    <div>
+    <div className="container">
+      <Table>
+        <thead>
+        <tr>
+         <th>
+           Homie
+         </th>
+         <th>
+           Cash
+         </th>
+         <th>
+           Actions
+         </th>
+        </tr>
+        </thead>
+        <tbody>
+          { cashTableBody }
+        </tbody>
+      </Table>
 
-       <Table>
-         <thead>
-          <tr>
-           <th>
-             Homie
-           </th>
-           <th>
-             Cash
-           </th>
-           <th>
-             Actions
-           </th>
-          </tr>
-         </thead>
-         <tbody>
-          { cashTableBody }          
-         </tbody>
-       </Table>
-     
-       <Button
+      <Button
         floating
         large
         className="green"
         fab={{direction: 'bottom'}}
         waves="light"
-        icon="add" 
+        icon="add"
         onClick={
           () => {
             props.history.push(MAKE_MONEY_MOVE)
           }
-        }/>
+        }
+      />
 
     </div>
   );

client/src/cash/MakeMoneyMove.js

@@ -1,6 +1,6 @@
 import React, {useState, useEffect} from 'react';
 import M from 'materialize-css';
-import {Icon, Select, TextInput, Button, Textarea} from 'react-materialize';
+import {Icon, Select, Button, Textarea} from 'react-materialize';
 import './Cash.css';
 import axios from 'axios';
 

client/src/common/formatting.js

@@ -0,0 +1,16 @@
+const formatMoney = (amount) => {
+  const formatted = Number.parseFloat(amount).toFixed(2);
+  return `${formatted} KM`;
+}
+
+const timestampToDate = (timestamp) => {
+  const dateOptions = { year: 'numeric', month: 'long', day: 'numeric' };
+
+  const date = new Date(timestamp);
+  return date.toLocaleDateString('en-GB', dateOptions);
+}
+
+export {
+  formatMoney,
+  timestampToDate
+}

client/src/homies/Flow.css

@@ -0,0 +1,34 @@
+.amount-green {
+    background-color: rgba(72, 172, 152, 0.35);
+    padding: 3px 5px;
+    font-weight: 500;
+    color: rgb(72, 172, 152);
+    border-radius: 5px;
+}
+
+.opposite-sides-content {
+    width: 100%;
+    justify-content: space-between;
+}
+
+.flex-row {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+}
+
+.flex-center {
+    align-self: center;
+}
+
+.flex-col {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+}
+
+.record:hover {
+    border-left: rgb(72, 172, 152) solid 4px;
+    box-sizing: border-box;
+    padding-left: 11px;
+}

client/src/homies/Flow.js

@@ -0,0 +1,78 @@
+import React, { useState, useEffect } from 'react';
+import { withRouter, useParams } from 'react-router-dom';
+import axios from "axios";
+import M from "materialize-css";
+import './Flow.css';
+import { formatMoney, timestampToDate } from "../common/formatting";
+
+const Flow = (props) => {
+  const { homie_id } = useParams();
+
+  const [flow, setFlow] = useState([]);
+
+  useEffect( () => {
+    (async () => {
+      try {
+        const response = await axios.get(`/api/money_moves?homie_id=${parseInt(homie_id)}`);
+        if (response.status === 200 && response.data){
+          setFlow(response.data);
+        }
+      } catch (e) {
+        M.toast({ html: "Yo! It ain't workin'" });
+      }
+    })();
+  }, [homie_id]);
+
+  const dateBlock = (timestamp) => <span className="grey-text">{ timestampToDate(timestamp) }</span>
+
+
+  const flowData = flow.map( (singleFlowData, index) => (
+    <li key={index}>
+      <div className="collapsible-header record">
+        <div className="flex-row opposite-sides-content">
+          <div className="flex-col">
+            <div>{ singleFlowData.description }</div>
+            <div>{ dateBlock(singleFlowData['created_at']) }</div>
+          </div>
+
+          <div className={`flex-center ${singleFlowData.amount > 0 ? 'amount-green' : ''}`}>{ formatMoney(singleFlowData.amount) }</div>
+        </div>
+      </div>
+    </li>
+  ));
+
+  const totalStats = () => {
+    const totalCount = flow.length;
+    const firstFlowRow = totalCount > 0 ? flow[0] : undefined;
+    const lastFlowRow = totalCount > 0 ? flow[flow.length - 1] : undefined;
+    const totalFlow = flow.reduce((sum, record) => sum + parseInt(record.amount), 0);
+
+    const fromDate = lastFlowRow ? timestampToDate(lastFlowRow['created_at']) : '';
+    const toDate = firstFlowRow ? timestampToDate(firstFlowRow['created_at']) : '';
+
+    return (
+      <div>
+        <br />
+        <div className="row">
+          <div className="col s6">
+            <strong>{`${totalCount} Records`}</strong><span className="grey-text">{` • ${fromDate} - ${toDate}`}</span>
+          </div>
+          <div className="col s6 right-align">
+            <span className="grey-text">Total flow:</span> <strong>{formatMoney(totalFlow)}</strong>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="container">
+      { totalStats() }
+      <ul className="collapsible">
+        { flowData }
+      </ul>
+    </div>
+  );
+}
+
+export default withRouter(Flow);