Merge branch 'adapt-money-move-form-for-new-logic' into 'master'

adapt frontend

See merge request saburly/gangsta/roraccounting!3

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,5 +1,6 @@
-import React, { useState, useEffect } from 'react'; 
-import {Icon, Select, TextInput, Button} from 'react-materialize';
+import React, {useState, useEffect} from 'react';
+import M from 'materialize-css';
+import {Icon, Select, TextInput, Button, Textarea} from 'react-materialize';
 import './Cash.css';
 import axios from 'axios';
 
@@ -9,8 +10,10 @@ const MakeMoneyMove = (props) => {
     const [selectedTo, setSelectedTo] = useState("");
     const [homiesCash, setHomiesCash] = useState([]);
     const [amountToMove, setAmountToMove] = useState(null);
+    const [moveDescription, setMoveDescription] = useState("");
+    const [submitInProgress, setSubmitInProgress] = useState(false);
 
-  useEffect( () => { 
+    useEffect(() => {
         const getCashForHomies = async () => {
             try {
                 const cash = await axios.get(`/homies/cash`);
@@ -39,35 +42,68 @@ const MakeMoneyMove = (props) => {
         console.log("from homie", e.target.value);
         setSelectedFrom(e.target.value);
     };
-  const filteredHomieCashes = homiesCash.filter( (homieCash) => homieCash.homie.id !== parseInt(selectedFrom) );
+    const filteredHomieCashes = homiesCash.filter((homieCash) => homieCash.homie.id !== parseInt(selectedFrom));
     const filteredHomieOptions = filteredHomieCashes.map(homieToOptionMapper);
 
     const handleToHomieChange = (e) => {
         setSelectedTo(e.target.value);
     }
 
-  const handleSubmit = (e) => {
+    const handleDescriptionChange = (e) => {
+        setMoveDescription(e.target.value);
+    }
+
+    const clearForm = () => {
+        setAmountToMove(null);
+        setSelectedFrom("");
+        setSelectedTo("");
+        setMoveDescription("");
+    }
+
+    const handleSubmit = async (e) => {
         e.preventDefault();
-    console.log("Submitting");
+        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 !== "" && 
         selectedFrom !== selectedTo &&
         selectedTo !== "" &&
         amountToMove > 0
     );
 
-return (
-<div className="center-align">
+    const disableSubmit = () => (!formComplete() || submitInProgress);
+
+    return (
+        <div className="center-align">
             <form onSubmit={handleSubmit}>
                 <h3>Make Money Move</h3>
-   <TextInput label="How Much?" type="number" 
+                <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} />
+                           value={`${amountToMove}`}
+                           step="0.01"
+                           onChange={handleAmountChange}/>
                 <label>From: </label>
                 <Select value={selectedFrom} name="from_homie" onChange={handleFromHomieChange}>
-       <option disabled value="" >Select Homie</option>
+                    <option disabled value="">Select Homie</option>
                     {homieOptions}
                 </Select>
 
@@ -77,9 +113,12 @@ return (
                     {filteredHomieOptions}
                 </Select>
 
+                <br/>
+
+                <Textarea label="Tag" value={moveDescription} onChange={handleDescriptionChange}/>
 
                 <div>
-      <Button disabled={!formComplete()} waves="light">
+                    <Button disabled={disableSubmit()} waves="light">
                         Do it
                         <Icon left>
                             attach_money
@@ -87,8 +126,8 @@ return (
                     </Button>
                 </div>
             </form>
-</div>
-);
+        </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"