Handle click on settle link

client/src/cash/Cash.js

@@ -1,13 +1,17 @@
-import React, { useState, useEffect } from 'react'; 
+import React, { useState, useEffect, useReducer } 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 } from '../common/formatting';
+import YesNoModal from "../common/YesNoModal";
+import { errorToast } from "../common/errorHelpers";
+import M from 'materialize-css';
 
 const Cash = (props) => {
   const [homiesCash, setHomiesCash] = useState([]);
+  const [, forceUpdate] = useReducer(x => x + 1, 0);
   //const [importance, setImportance] = useState(10);
 
   useEffect( () => { 
@@ -22,6 +26,20 @@ const Cash = (props) => {
     getCashForHomies(); 
   }, []);
 
+  const settleFlowForHomie = async (id) => {
+    try {
+      const response = await axios.delete(`/api/homies/${id}/settle`);
+      if (response.status === 200 && response.data) {
+        M.toast({ html: 'Settled' });
+      }else{
+        errorToast();
+      }
+    } catch(e) {
+      errorToast();
+    }
+    forceUpdate();
+  }
+
   const cashTableBody = homiesCash.map( (homieLine) => {
     return (
       <tr key={homieLine.homie.id}>
@@ -32,7 +50,13 @@ const Cash = (props) => {
           { formatMoney(homieLine.amount) }
         </td>
         <td className="cash-cell-left">
-           [ settle ]
+          [
+            <YesNoModal
+              body={"Maan, y'a sure about this? Flow history goes bye bye!"}
+              yesAction={() => settleFlowForHomie(homieLine.homie.id)}
+              triggerNode={<a href='#'>Settle</a>}
+            />
+          ]
         </td>
       </tr>
     );