move settle action to the homie cash flow details

client/src/cash/Cash.js

@@ -1,13 +1,10 @@
-import React, { useState, useEffect, useReducer } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Button, Table } from 'react-materialize';
 import './Cash.css';
 import axios from 'axios';
 import { MAKE_MONEY_MOVE } from '../RouteNames';
 import { withRouter } from 'react-router-dom';
 import { formatMoney, formatTime } from '../common/formatting';
-import InputModal from "../common/InputModal";
-import { errorToast } from "../common/errorHelpers";
-import M from 'materialize-css';
 
 const Cash = (props) => {
   const [homiesCash, setHomiesCash] = useState([]);
@@ -25,20 +22,6 @@ const Cash = (props) => {
     getCashForHomies(); 
   }, []);
 
-  const settleFlowForHomie = async (id, amountToSettle) => {
-    try {
-      const response = await axios.post(`/api/gangs/${gang.id}/homies/${id}/settle`, { amount: amountToSettle });
-      if (response.status === 200 && response.data) {
-        M.toast({ html: 'Settled' });
-        setHomiesCash(response.data);
-      }else{
-        errorToast();
-      }
-    } catch(e) {
-      errorToast();
-    }
-  }
-
   const cashTableBody = homiesCash.map( (homieLine) => {
     return (
       <tr key={homieLine.homie.id}>
@@ -52,15 +35,6 @@ const Cash = (props) => {
           { formatMoney(homieLine.amount, gang) }
         </td>
         <td className="cash-cell-left">
-          [
-            <InputModal
-              body={"Maan, y'a sure about this? Flow history goes bye bye!"}
-              inputLabel={'Settle to'}
-              defaultInputValue={homieLine.amount}
-              confirmAction={(settleAmount) => settleFlowForHomie(homieLine.homie.id, settleAmount)}
-              triggerNode={<a href='#'>Settle</a>}
-            />
-          ]
         </td>
       </tr>
     );

client/src/common/InputModal.js

@@ -40,7 +40,7 @@ const InputModal = (props) => {
       <p><strong>{body}</strong></p>
       <br/>
       <div className="input-field col s6">
-        <input ref={inputField} defaultValue={defaultInputValue} id="input-num" type="number" className="validate" />
+        <input key={`defaultInput:${defaultInputValue}`} ref={inputField} defaultValue={defaultInputValue} id="input-num" type="number" className="validate" />
         <label className="active" htmlFor="input-num">{inputLabel}</label>
       </div>
     </Modal>

client/src/homies/CashFlow.js

@@ -4,19 +4,28 @@ import axios from "axios";
 import './Flow.css';
 import { formatMoney, timestampToDate } from "../common/formatting";
 import {errorToast} from "../common/errorHelpers";
+import InputModal from "../common/InputModal";
+import M from "materialize-css";
+import { Button } from 'react-materialize';
 
 const CashFlow = (props) => {
   const { homie_id } = useParams();
   const gang = props.gang;
 
   const [cashFlow, setCashFlow] = useState([]);
+  const [totalCashFlowAmount, setTotalCashFlowAmount] = useState(0);
+
+  const updateData = (data) => {
+    setCashFlow(data);
+    setTotalCashFlowAmount(data.reduce((sum, record) => sum + parseInt(record.amount), 0));
+  }
 
   useEffect( () => {
     (async () => {
       try {
         const response = await axios.get(`/api/money_moves?homie_id=${parseInt(homie_id)}`);
         if (response.status === 200 && response.data){
-          setCashFlow(response.data);
+          updateData(response.data);
         }
       } catch (e) {
         errorToast();
@@ -45,7 +54,6 @@ const CashFlow = (props) => {
     const totalCount = cashFlow.length;
     const firstFlowRow = totalCount > 0 ? cashFlow[0] : undefined;
     const lastFlowRow = totalCount > 0 ? cashFlow[cashFlow.length - 1] : undefined;
-    const totalFlow = cashFlow.reduce((sum, record) => sum + parseInt(record.amount), 0);
 
     const fromDate = lastFlowRow ? timestampToDate(lastFlowRow['created_at']) : '';
     const toDate = firstFlowRow ? timestampToDate(firstFlowRow['created_at']) : '';
@@ -58,19 +66,43 @@ const CashFlow = (props) => {
             <strong>{`${totalCount} Records`}</strong><span className="grey-text">{` • ${fromDate} - ${toDate}`}</span>
           </div>
           <div className="col s6 right-align">
-            <span className="grey-text">Total cash flow:</span> <strong>{formatMoney(totalFlow, gang)}</strong>
+            <span className="grey-text">Total cash flow:</span> <strong>{formatMoney(totalCashFlowAmount, gang)}</strong>
           </div>
         </div>
       </div>
     )
   }
 
+  const settleFlowForHomie = async (id, amountToSettle) => {
+    try {
+      const response = await axios.post(`/api/gangs/${gang.id}/homies/${id}/settle`, { amount: amountToSettle });
+      if (response.status === 200 && response.data) {
+        M.toast({ html: 'Settled' });
+        updateData(response.data);
+      }else{
+        errorToast();
+      }
+    } catch(e) {
+      errorToast();
+    }
+  }
+
   return (
     <div>
       { totalStats() }
       <ul className="collapsible">
         { flowData }
       </ul>
+
+      <br/>
+
+      <InputModal
+        body={"Maan, y'a sure about this? Flow history goes bye bye!"}
+        inputLabel={'Settle to '}
+        defaultInputValue={totalCashFlowAmount}
+        confirmAction={(settleAmount) => settleFlowForHomie(homie_id, settleAmount)}
+        triggerNode={<Button className="orange">Settle</Button>}
+      />
     </div>
   );
 }