Handle adding work for homie

client/src/App.js

@@ -13,8 +13,9 @@ import {
   CHIPS,
   MAKE_MONEY_MOVE,
   HOMIE_FLOW,
-  HOMIES
+  HOMIES, PUT_IN_WORK
 } from './RouteNames';
+import PutInWork from "./cash/PutInWork";
 
 
 function App() {
@@ -37,6 +38,10 @@ function App() {
           <RoutableNavItem href={MAKE_MONEY_MOVE}>
             Make Money Move
           </RoutableNavItem>
+
+          <RoutableNavItem href={PUT_IN_WORK}>
+            Put in Work
+          </RoutableNavItem>
         </Navbar>
       </div>
 
@@ -46,6 +51,7 @@ function App() {
         <Route path={HOMIE_FLOW} component={Flow} />
         <Route path={CHIPS} component={Chips} />
         <Route path={MAKE_MONEY_MOVE} component={MakeMoneyMove} />
+        <Route path={PUT_IN_WORK} component={PutInWork} />
       </div>
     </Router>
   );

client/src/RouteNames.js

@@ -2,4 +2,5 @@ export const CRIB = '/';
 export const HOMIES = '/homies';
 export const CHIPS = '/chips';
 export const MAKE_MONEY_MOVE = '/make-money-move';
+export const PUT_IN_WORK = '/put-in-work';
 export const HOMIE_FLOW = '/homie/:homie_id/flow';

client/src/cash/MakeMoneyMove.js

@@ -96,7 +96,7 @@ const MakeMoneyMove = (props) => {
                 <h3>Make Money Move</h3>
 
                 <div className="input-field col s12">
-                    <input id="how-much" type="number" className="validate" step="0.01" required="required" value={amountToMove} onChange={handleAmountChange} pattern="^\\?(([1-9](\\d*|\\d{0,2}(,\\d{3})*))|0)(\\.\\d{1,2})?$" />
+                    <input id="how-much" type="number" className="validate" step="0.01" required="required" value={amountToMove} onChange={handleAmountChange} pattern="\d*" />
                     <label className="required" htmlFor="how-much">How much?</label>
                     <span className="helper-text" data-error="Yo! Put some money" />
                 </div>

client/src/cash/PutInWork.js

@@ -0,0 +1,97 @@
+import React, {useState, useEffect} from 'react';
+import M from 'materialize-css';
+import {Icon, Select, Button, Textarea} from 'react-materialize';
+import './Cash.css';
+import axios from 'axios';
+import {errorToast} from "../common/errorHelpers";
+
+const PutInWork = (props) => {
+    const [homies, setHomies] = useState([]);
+    const [selectedTo, setSelectedTo] = useState('');
+    const [amountToAdd, setAmountToAdd] = useState('');
+    const [workDescription, setWorkDescription] = useState('');
+    const [submitInProgress, setSubmitInProgress] = useState(false);
+
+    useEffect(() => {
+        (async () => {
+            try {
+                const response = await axios.get('/api/homies');
+                if (response.status === 200 && response.data){
+                    setHomies(response.data);
+                }
+            } catch (e) {
+                errorToast();
+            }
+        })();
+    }, []);
+
+    const homieOptions = homies.map(homie => <option key={homie.id} value={homie.id}>{homie.name}</option>);
+
+    const clearForm = () => {
+        setAmountToAdd('');
+        setSelectedTo('');
+        setWorkDescription('');
+    }
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setSubmitInProgress(true);
+        const workRequest = {
+            work: {
+                amount: parseInt(amountToAdd),
+                homie_id: selectedTo,
+                description: workDescription
+            }
+        }
+
+        const submitResponse = await axios.post('/api/work', workRequest);
+
+        if (submitResponse && submitResponse.status === 200 && submitResponse.data && submitResponse.data.ok === true) {
+            M.toast({html: "Alright"});
+            clearForm();
+        } else {
+            errorToast();
+        }
+        setSubmitInProgress(false);
+    }
+
+    const formComplete = () => selectedTo !== '' && parseInt(amountToAdd) !== 0 && !isNaN(parseInt(amountToAdd));
+
+    const disableSubmit = () => (!formComplete() || submitInProgress);
+
+    return (
+        <div className="center-align container">
+            <form onSubmit={handleSubmit}>
+                <h3>Put in Work</h3>
+
+                <div className="input-field col s12">
+                    <input id="how-much" type="number" className="validate" required="required" value={amountToAdd} onChange={(e) => setAmountToAdd(parseInt(e.target.value))} />
+                    <label className="required" htmlFor="how-much">How many hours of work?</label>
+                    <span className="helper-text" data-error="Yo! Put some work" />
+                </div>
+
+                <label className="required">To: </label>
+                <Select value={selectedTo} name="to_homie" onChange={(e) => setSelectedTo(e.target.value)} required="required">
+                    <option disabled value="">Select Homie</option>
+                    {homieOptions}
+                </Select>
+
+                <br/>
+
+                <Textarea label="Tag" value={workDescription} onChange={(e) => setWorkDescription(e.target.value)}/>
+
+                <div>
+                    <Button disabled={disableSubmit()} waves="light">
+                        Do it
+                        <Icon left>
+                            access_time
+                        </Icon>
+                    </Button>
+                </div>
+            </form>
+        </div>
+    );
+
+}
+
+export default PutInWork;

client/src/common/formatting.js

@@ -3,6 +3,11 @@ const formatMoney = (amount) => {
   return `${formatted} KM`;
 }
 
+const formatTime = (amount) => {
+  const formatted = Number.parseInt(amount);
+  return `${formatted} hrs`;
+}
+
 const timestampToDate = (timestamp) => {
   const dateOptions = { year: 'numeric', month: 'long', day: 'numeric' };
 
@@ -12,5 +17,6 @@ const timestampToDate = (timestamp) => {
 
 export {
   formatMoney,
+  formatTime,
   timestampToDate
 }

client/src/homies/CashFlow.js

@@ -0,0 +1,77 @@
+import React, { useState, useEffect } from 'react';
+import { withRouter, useParams } from 'react-router-dom';
+import axios from "axios";
+import './Flow.css';
+import { formatMoney, timestampToDate } from "../common/formatting";
+import {errorToast} from "../common/errorHelpers";
+
+const CashFlow = (props) => {
+  const { homie_id } = useParams();
+
+  const [cashFlow, setCashFlow] = useState([]);
+
+  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);
+        }
+      } catch (e) {
+        errorToast();
+      }
+    })();
+  }, [homie_id]);
+
+  const dateBlock = (timestamp) => <span className="grey-text">{ timestampToDate(timestamp) }</span>
+
+  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>
+          </div>
+
+          <div className={`flex-center ${singleFlowData.amount > 0 ? 'amount-green' : ''}`}>{ formatMoney(singleFlowData.amount) }</div>
+        </div>
+      </div>
+    </li>
+  ));
+
+  const totalStats = () => {
+    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']) : '';
+
+    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 cash flow:</span> <strong>{formatMoney(totalFlow)}</strong>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      { totalStats() }
+      <ul className="collapsible">
+        { flowData }
+      </ul>
+    </div>
+  );
+}
+
+export default withRouter(CashFlow);

client/src/homies/Flow.css

@@ -31,4 +31,9 @@
     border-left: rgb(72, 172, 152) solid 4px;
     box-sizing: border-box;
     padding-left: 11px;
+}
+
+.switch-box {
+    margin-top: 10px;
+    margin-bottom: 20px;
 }

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>
   );
 }

client/src/homies/WorkFlow.js

@@ -0,0 +1,77 @@
+import React, { useState, useEffect } from 'react';
+import { withRouter, useParams } from 'react-router-dom';
+import axios from "axios";
+import './Flow.css';
+import { formatTime, timestampToDate } from "../common/formatting";
+import {errorToast} from "../common/errorHelpers";
+
+const WorkFlow = (props) => {
+  const { homie_id } = useParams();
+
+  const [work, setWork] = useState([]);
+
+  useEffect( () => {
+    (async () => {
+      try {
+        const response = await axios.get(`/api/work?homie_id=${parseInt(homie_id)}`);
+        if (response.status === 200 && response.data){
+          setWork(response.data);
+        }
+      } catch (e) {
+        errorToast();
+      }
+    })();
+  }, [homie_id]);
+
+  const dateBlock = (timestamp) => <span className="grey-text">{ timestampToDate(timestamp) }</span>
+
+  const flowData = work.map( (singleWorkData, index) => (
+    <li key={index}>
+      <div className="collapsible-header record">
+        <div className="flex-row opposite-sides-content">
+          <div className="flex-col">
+            <div>{ singleWorkData.description }</div>
+            <div>{ dateBlock(singleWorkData['created_at']) }</div>
+          </div>
+
+          <div className={`flex-center ${singleWorkData.amount > 0 ? 'amount-green' : ''}`}>{ formatTime(singleWorkData.amount) }</div>
+        </div>
+      </div>
+    </li>
+  ));
+
+  const totalStats = () => {
+    const totalCount = work.length;
+    const firstFlowRow = totalCount > 0 ? work[0] : undefined;
+    const lastFlowRow = totalCount > 0 ? work[work.length - 1] : undefined;
+    const totalFlow = work.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 work:</span> <strong>{formatTime(totalFlow)}</strong>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      { totalStats() }
+      <ul className="collapsible">
+        { flowData }
+      </ul>
+    </div>
+  );
+}
+
+export default withRouter(WorkFlow);