Handle adding work for homie

client/src/homies/Flow.js

@@ -1,76 +1,26 @@
-import React, { useState, useEffect } from 'react';
-import { withRouter, useParams } from 'react-router-dom';
-import axios from "axios";
-import M from "materialize-css";
+import React, { useState } from 'react';
+import { withRouter } from 'react-router-dom';
+import { Switch } from 'react-materialize';
 import './Flow.css';
-import { formatMoney, timestampToDate } from "../common/formatting";
+import CashFlow from "./CashFlow";
+import WorkFlow from "./WorkFlow";
 
 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>
-    )
-  }
+  const [flowType, setFlowType] = useState('cash');
 
   return (
     <div className="container">
-      { totalStats() }
-      <ul className="collapsible">
-        { flowData }
-      </ul>
+      <div className='switch-box'>
+        <Switch
+          offLabel="Cash"
+          onChange={(e) => setFlowType(e.target.checked === true ? 'work' : 'cash')}
+          onLabel="Work"
+        />
+      </div>
+
+      { flowType === 'cash' && <CashFlow /> }
+      { flowType === 'work' && <WorkFlow /> }
+
     </div>
   );
 }