client/src/homies/CashFlow.js

@@ -7,6 +7,7 @@ import {errorToast} from "../common/errorHelpers";
 import InputModal from "../common/InputModal";
 import M from "materialize-css";
 import { Button } from 'react-materialize';
+import YesNoModal from "../common/YesNoModal";
 
 const CashFlow = (props) => {
   const { homie_id } = useParams();
@@ -17,13 +18,16 @@ const CashFlow = (props) => {
 
   const updateData = (data) => {
     setCashFlow(data);
-    setTotalCashFlowAmount(data.reduce((sum, record) => sum + parseInt(record.amount), 0));
+    setTotalCashFlowAmount(data.reduce((sum, record) => {
+      const amountToAdd = record.deleted_at ? 0 : parseInt(record.amount);
+      return sum + amountToAdd;
+    }, 0));
   }
 
   useEffect( () => {
     (async () => {
       try {
-        const response = await axios.get(`/api/money_moves?homie_id=${parseInt(homie_id)}`);
+        const response = await axios.get(`/api/gangs/${gang.id}/homies/${homie_id}/money_moves`);
         if (response.status === 200 && response.data){
           updateData(response.data);
         }
@@ -33,37 +37,65 @@ const CashFlow = (props) => {
     })();
   }, [homie_id]);
 
-  const dateBlock = (timestamp) => <span className="grey-text">{ timestampToDate(timestamp) }</span>
+  const softDeleteMoneyMove = async (moneyMove) => {
+    try {
+      const response = await axios.delete(`/api/gangs/${gang.id}/homies/${homie_id}/money_moves/${moneyMove.id}`);
+      if (response.status === 200 && response.data){
+        updateData(response.data);
+      }
+    } catch (e) {
+      errorToast();
+    }
+  }
 
-  const flowData = cashFlow.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>
+  const flowData = cashFlow.map((singleFlowData, index) => {
+    const deleted = !!singleFlowData.deleted_at;
+    const description = deleted ? <del>{singleFlowData.description}</del> : singleFlowData.description;
+    const formattedCreatedAtDate = timestampToDate(singleFlowData['created_at']);
+    const formattedDeletedAtDate = deleted ? timestampToDate(singleFlowData['deleted_at']) : null;
+    const dateDescription = deleted ?
+      `${formattedCreatedAtDate} • deleted at ${formattedDeletedAtDate}` : `${formattedCreatedAtDate}`;
+
+    const recordClass = deleted ? 'deleted-record' : 'record';
+
+    return (
+      <li key={index}>
+        <div className={`collapsible-header ${recordClass}`}>
+          <div className="flex-row opposite-sides-content">
+            <div className="flex-col">
+              <div>{description}</div>
+              <div><span className="grey-text">{dateDescription}</span></div>
+            </div>
+
+            <div className={`push flex-center ${singleFlowData.amount > 0 ? 'amount-green' : ''}`}>{ formatMoney(singleFlowData.amount, gang) }</div>
+
+            <YesNoModal
+              body={"Maan, y'a sure about this?"}
+              yesAction={() => softDeleteMoneyMove(singleFlowData)}
+              triggerNode={<Button disabled={deleted} className="flex-center" flat node="button" icon="remove_circle" />} />
           </div>
-
-          <div className={`flex-center ${singleFlowData.amount > 0 ? 'amount-green' : ''}`}>{ formatMoney(singleFlowData.amount, gang) }</div>
         </div>
-      </div>
-    </li>
-  ));
+      </li>
+    )
+  });
 
   const totalStats = () => {
-    const totalCount = cashFlow.length;
-    const firstFlowRow = totalCount > 0 ? cashFlow[0] : undefined;
-    const lastFlowRow = totalCount > 0 ? cashFlow[cashFlow.length - 1] : undefined;
+    const totalNonDeletedCount = cashFlow.filter(record => !record.deleted_at).length;
+
+    const firstFlowRow = totalNonDeletedCount > 0 ? cashFlow[0] : undefined;
+    const lastFlowRow = totalNonDeletedCount > 0 ? cashFlow[cashFlow.length - 1] : undefined;
 
     const fromDate = lastFlowRow ? timestampToDate(lastFlowRow['created_at']) : '';
     const toDate = firstFlowRow ? timestampToDate(firstFlowRow['created_at']) : '';
 
+    const dateRange = firstFlowRow && lastFlowRow ? ` • ${fromDate} - ${toDate}` : '';
+
     return (
       <div>
         <br />
         <div className="row">
           <div className="col s6">
-            <strong>{`${totalCount} Records`}</strong><span className="grey-text">{` • ${fromDate} - ${toDate}`}</span>
+            <strong>{`${totalNonDeletedCount} Records`}</strong><span className="grey-text">{dateRange}</span>
           </div>
           <div className="col s6 right-align">
             <span className="grey-text">Total cash flow:</span> <strong>{formatMoney(totalCashFlowAmount, gang)}</strong>

client/src/homies/Flow.css

@@ -33,6 +33,12 @@
     padding-left: 11px;
 }
 
+.deleted-record:hover {
+    border-left: rgb(85, 85, 85) solid 4px;
+    box-sizing: border-box;
+    padding-left: 11px;
+}
+
 .switch-box {
     margin-top: 10px;
     margin-bottom: 20px;

client/src/homies/MoveMoney.js

@@ -77,7 +77,7 @@ const MoveMoney = (props) => {
         }
 
 
-        const submitResponse = await axios.post('/api/money_moves', moneyMoveRequest);
+        const submitResponse = await axios.post(`/api/gangs/${gang.id}/homies/${homie_id}/money_moves`, moneyMoveRequest);
 
         if (submitResponse && submitResponse.status === 200 && submitResponse.data === true) {
             M.toast({html: "Money lounde...moved"});