Handle adding work for homie

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;