add description field; implement submit action

client/package.json

@@ -5,6 +5,7 @@
   "proxy": "http://localhost:3001",
   "dependencies": {
     "axios": "^0.19.0",
+    "materialize-css": "^1.0.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-materialize": "^3.3.1",

client/src/cash/MakeMoneyMove.js

@@ -1,94 +1,133 @@
-import React, { useState, useEffect } from 'react'; 
+import React, {useState, useEffect} from 'react';
-import {Icon, Select, TextInput, Button} from 'react-materialize';
+import M from 'materialize-css';
+import {Icon, Select, TextInput, Button, Textarea} from 'react-materialize';
 import './Cash.css';
 import axios from 'axios';
 
 const MakeMoneyMove = (props) => {
 
-  const [selectedFrom, setSelectedFrom] = useState(""); 
+    const [selectedFrom, setSelectedFrom] = useState("");
-  const [selectedTo, setSelectedTo] = useState(""); 
+    const [selectedTo, setSelectedTo] = useState("");
-  const [homiesCash, setHomiesCash] = useState([]);
+    const [homiesCash, setHomiesCash] = useState([]);
-  const [amountToMove, setAmountToMove] = useState(null);
+    const [amountToMove, setAmountToMove] = useState(null);
+    const [moveDescription, setMoveDescription] = useState("");
+    const [submitInProgress, setSubmitInProgress] = useState(false);
 
-  useEffect( () => { 
+    useEffect(() => {
-    const getCashForHomies = async () => {
+        const getCashForHomies = async () => {
-      try { 
+            try {
-        const cash = await axios.get(`/homies/cash`);
+                const cash = await axios.get(`/homies/cash`);
-        setHomiesCash(cash.data);
+                setHomiesCash(cash.data);
-      } catch (e) {
+            } catch (e) {
-        console.log("Error fetching", e); 
+                console.log("Error fetching", e);
-      }
+            }
+        };
+        getCashForHomies();
+    }, []);
+
+    const handleAmountChange = (e) => {
+        setAmountToMove(parseFloat(e.target.value))
+    }
+
+    const homieToOptionMapper = (homieCash) => {
+        const homie = homieCash.homie;
+        return (
+            <option key={homie.id} value={homie.id}>{homie.name}</option>
+        );
     };
-    getCashForHomies(); 
-  }, []);
 
-  const handleAmountChange = (e) => {
+    const homieOptions = homiesCash.map(homieToOptionMapper);
-    setAmountToMove(parseFloat(e.target.value))
-  }
 
-  const homieToOptionMapper = (homieCash) => {
+    const handleFromHomieChange = (e) => {
-    const homie = homieCash.homie;
+        console.log("from homie", e.target.value);
-    return (
+        setSelectedFrom(e.target.value);
-    <option key={homie.id} value={homie.id}>{homie.name}</option>
+    };
+    const filteredHomieCashes = homiesCash.filter((homieCash) => homieCash.homie.id !== parseInt(selectedFrom));
+    const filteredHomieOptions = filteredHomieCashes.map(homieToOptionMapper);
+
+    const handleToHomieChange = (e) => {
+        setSelectedTo(e.target.value);
+    }
+
+    const handleDescriptionChange = (e) => {
+        setMoveDescription(e.target.value);
+    }
+
+    const clearForm = () => {
+        setAmountToMove(null);
+        setSelectedFrom("");
+        setSelectedTo("");
+        setMoveDescription("");
+    }
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setSubmitInProgress(true);
+        const moneyMoveRequest = {
+            money_move: {
+                amount: amountToMove,
+                from_homie_id: selectedFrom,
+                to_homie_id: selectedTo,
+                description: moveDescription
+            }
+        }
+
+        const submitResponse = await axios.post('/money_moves', moneyMoveRequest);
+
+        if (submitResponse && submitResponse.status === 200 && submitResponse.data === true) {
+            M.toast({html: "Money lounde...moved"});
+            clearForm();
+        } else {
+            M.toast({html: "Yo! It ain't workin'"});
+        }
+        setSubmitInProgress(false);
+    }
+
+    const formComplete = () => (
+        selectedFrom !== selectedTo &&
+        selectedTo !== "" &&
+        amountToMove > 0
     );
-  };
 
-  const homieOptions = homiesCash.map(homieToOptionMapper);    
+    const disableSubmit = () => (!formComplete() || submitInProgress);
-  
-  const handleFromHomieChange = (e) => {
-    console.log("from homie", e.target.value);
-    setSelectedFrom(e.target.value); 
-  };
-  const filteredHomieCashes = homiesCash.filter( (homieCash) => homieCash.homie.id !== parseInt(selectedFrom) );
-  const filteredHomieOptions = filteredHomieCashes.map(homieToOptionMapper); 
 
-  const handleToHomieChange = (e) => {
+    return (
-    setSelectedTo(e.target.value); 
+        <div className="center-align">
-  }
+            <form onSubmit={handleSubmit}>
+                <h3>Make Money Move</h3>
+                <TextInput label="How Much?"
+                           type="number"
+                           required pattern="^\\?(([1-9](\\d*|\\d{0,2}(,\\d{3})*))|0)(\\.\\d{1,2})?$"
+                           value={`${amountToMove}`}
+                           step="0.01"
+                           onChange={handleAmountChange}/>
+                <label>From: </label>
+                <Select value={selectedFrom} name="from_homie" onChange={handleFromHomieChange}>
+                    <option disabled value="">Select Homie</option>
+                    {homieOptions}
+                </Select>
 
-  const handleSubmit = (e) => {
+                <label>To: </label>
-    e.preventDefault();
+                <Select value={selectedTo} name="to_homie" onChange={handleToHomieChange}>
-    console.log("Submitting");
+                    <option disabled value="">Select Homie</option>
-  }
+                    {filteredHomieOptions}
+                </Select>
 
-  const formComplete = () => (
+                <br/>
-    selectedFrom !== "" && 
-    selectedFrom !== selectedTo && 
-    selectedTo !== "" &&
-    amountToMove > 0
-  );
 
-return (
+                <Textarea label="Tag" value={moveDescription} onChange={handleDescriptionChange}/>
-<div className="center-align">
-   <form onSubmit={handleSubmit}>
-   <h3>Make Money Move</h3>
-   <TextInput label="How Much?" type="number" 
-               required pattern="^\\?(([1-9](\\d*|\\d{0,2}(,\\d{3})*))|0)(\\.\\d{1,2})?$" 
-               defaultValue={`${amountToMove}`} step="0.01" onChange={handleAmountChange} />
-     <label>From: </label>
-     <Select  value={selectedFrom} name="from_homie" onChange={handleFromHomieChange}>
-       <option disabled value="" >Select Homie</option>
-        {homieOptions}
-     </Select>
 
-     <label>To: </label>
+                <div>
-     <Select  value={selectedTo} name="to_homie" onChange={handleToHomieChange}>
+                    <Button disabled={disableSubmit()} waves="light">
-        <option disabled value="">Select Homie</option>
+                        Do it
-        {filteredHomieOptions}
+                        <Icon left>
-      </Select>
+                            attach_money
-      
+                        </Icon>
-    
+                    </Button>
-      <div>  
+                </div>
-      <Button disabled={!formComplete()} waves="light">
+            </form>
-        Do it
+        </div>
-       <Icon left>
+    );
-         attach_money
-       </Icon>
-      </Button>
-      </div>
-   </form>
-</div>
-);
 
 }
 

client/yarn.lock

@@ -5961,6 +5961,11 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+materialize-css@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/materialize-css/-/materialize-css-1.0.0.tgz#8d5db1c4a81c6d65f3b2e2ca83a8e08daa24d1be"
+  integrity sha512-4/oecXl8y/1i8RDZvyvwAICyqwNoKU4or5uf8uoAd74k76KzZ0Llym4zhJ5lLNUskcqjO0AuMcvNyDkpz8Z6zw==
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"