redesign put in work

client/src/App.js

@@ -13,7 +13,7 @@ import {
   HOMIE_FLOW,
   HOMIES,
   HOMIE_MOVE_MONEY,
-  PUT_IN_WORK
+  HOMIE_PUT_IN_WORK
 } from './RouteNames';
 import PutInWork from "./cash/PutInWork";
 import GangOnboarding from "./gangOnboarding/GangOnboarding";
@@ -51,7 +51,7 @@ const App = (props) => {
       <Route key='3' exact path={HOMIES} component={() => <Homies gang={selectedGang} />} />,
       <Route key='4' path={HOMIE_FLOW} component={() => <Flow gang={selectedGang} />} />,
       <Route key='5' path={HOMIE_MOVE_MONEY} component={() => <MoveMoney gang={selectedGang} />} />,
-      <Route key='6' path={PUT_IN_WORK} component={() => <PutInWork gang={selectedGang} />} />
+      <Route key='6' path={HOMIE_PUT_IN_WORK} component={() => <PutInWork gang={selectedGang} />} />
     ]
   );
 
@@ -124,10 +124,6 @@ const App = (props) => {
           <RoutableNavItem href={HOMIES}>
             Homies
           </RoutableNavItem>
-
-          <RoutableNavItem href={PUT_IN_WORK}>
-            Put in Work
-          </RoutableNavItem>
         </Navbar>
       </div>
 

client/src/RouteNames.js

@@ -1,6 +1,6 @@
 export const CRIB = '/';
 export const HOMIES = '/homies';
 export const HOMIE_MOVE_MONEY = '/homie/:homie_id/move-money';
-export const PUT_IN_WORK = '/put-in-work';
+export const HOMIE_PUT_IN_WORK = '/homie/:homie_id/put-in-work';
 export const HOMIE_FLOW = '/homie/:homie_id/flow';
 export const GANGS = '/gangs';

client/src/cash/Cash.js

@@ -41,6 +41,12 @@ const Cash = (props) => {
               <Icon left>monetization_on</Icon>
             </Button>
           </RoutableNavItem>
+          <RoutableNavItem href={`/homie/${homieLine.homie.id}/put-in-work`}>
+            <Button className="bump">
+              Put in work
+              <Icon left>query_builder</Icon>
+            </Button>
+          </RoutableNavItem>
         </td>
       </tr>
     );

client/src/cash/PutInWork.js

@@ -1,70 +1,88 @@
 import React, {useState, useEffect} from 'react';
 import M from 'materialize-css';
-import {Icon, Select, Button, Textarea} from 'react-materialize';
+import {Icon, Select, Button, Textarea, Switch} from 'react-materialize';
 import './Cash.css';
 import axios from 'axios';
 import {errorToast} from "../common/errorHelpers";
+import {useParams, withRouter} from "react-router-dom";
 
 const PutInWork = (props) => {
-    const [homies, setHomies] = useState([]);
-    const [selectedTo, setSelectedTo] = useState('');
+    const { homie_id } = useParams();
+
+    const [selectedHomie, setSelectedHomie] = useState(null);
     const [amountToAdd, setAmountToAdd] = useState('');
     const [workDescription, setWorkDescription] = useState('');
     const [submitInProgress, setSubmitInProgress] = useState(false);
+    const [workType, setWorkType] = useState('put-in');
 
     const gang = props.gang;
 
     useEffect(() => {
         (async () => {
             try {
-                const response = await axios.get(`/api/gangs/${gang.id}/homies`);
-                if (response.status === 200 && response.data){
-                    setHomies(response.data);
+                const homie = await axios.get(`/api/gangs/${gang.id}/homies/${homie_id}`);
+                if (homie.status === 200 && homie.data){
+                    setSelectedHomie(homie.data);
                 }
             } catch (e) {
                 errorToast();
             }
         })();
-    }, [gang]);
-
-    const homieOptions = homies.map(homie => <option key={homie.id} value={homie.id}>{homie.name}</option>);
-
-    const clearForm = () => {
-        setAmountToAdd('');
-        setSelectedTo('');
-        setWorkDescription('');
-    }
+    }, [gang, homie_id]);
 
     const handleSubmit = async (e) => {
         e.preventDefault();
         setSubmitInProgress(true);
-        const workRequest = {
-            work: {
-                amount: parseInt(amountToAdd),
-                homie_id: selectedTo,
-                description: workDescription
+
+        let workRequest = {};
+        if (workType === 'put-in') {
+            workRequest = {
+                work: {
+                    amount: parseInt(amountToAdd),
+                    homie_id: homie_id,
+                    description: workDescription
+                }
+            }
+        }else{
+            workRequest = {
+                work: {
+                    amount: -parseInt(amountToAdd),
+                    homie_id: homie_id,
+                    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();
+            props.history.push(`/homie/${homie_id}/flow`);
         } else {
             errorToast();
         }
         setSubmitInProgress(false);
     }
 
-    const formComplete = () => selectedTo !== '' && parseInt(amountToAdd) !== 0 && !isNaN(parseInt(amountToAdd));
+    const formComplete = () => parseInt(amountToAdd) > 0 && !isNaN(parseInt(amountToAdd));
 
     const disableSubmit = () => (!formComplete() || submitInProgress);
 
     return (
         <div className="center-align container">
             <form onSubmit={handleSubmit}>
-                <h3>Put in Work</h3>
+                <h3>{selectedHomie && selectedHomie.name}</h3>
+
+                <div className='switch-box'>
+                    <Switch
+                      offLabel="Put in work"
+                      onChange={(e) => setWorkType(e.target.checked === true ? 'owe' : 'put-in')}
+                      onLabel="Owe work"
+                    />
+                </div>
+
+                <br />
 
                 <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))} />
@@ -72,12 +90,6 @@ const PutInWork = (props) => {
                     <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)}/>
@@ -96,4 +108,4 @@ const PutInWork = (props) => {
 
 }
 
-export default PutInWork;
+export default withRouter(PutInWork);

client/src/homies/Homies.js

@@ -60,6 +60,13 @@ const Homies = (props) => {
               </Button>
             </RoutableNavItem>
 
+            <RoutableNavItem href={`/homie/${homie.id}/put-in-work`}>
+              <Button className="bump">
+                Put in work
+                <Icon left>query_builder</Icon>
+              </Button>
+            </RoutableNavItem>
+
             <YesNoModal
               body={"Maan, y'a sure about this?"}
               yesAction={() => deleteHomie(homie.id)}

client/src/homies/MoveMoney.js

@@ -82,7 +82,6 @@ const MoveMoney = (props) => {
         if (submitResponse && submitResponse.status === 200 && submitResponse.data === true) {
             M.toast({html: "Money lounde...moved"});
             props.history.push(`/homie/${homie_id}/flow`);
-            props.history.push(props.href);
         } else {
             M.toast({html: "Yo! It ain't workin'"});
         }