Current sync

client/src/cash/MakeMoneyMove.js

@@ -1,68 +1,92 @@
 import React, { useState, useEffect } from 'react'; 
-import { Modal, Select, TextInput, Collection, CollectionItem } from 'react-materialize';
+import {Icon, Select, TextInput, Button} from 'react-materialize';
 import './Cash.css';
 import axios from 'axios';
 
 const MakeMoneyMove = (props) => {
 
-  const [selectedFrom, setSelectedFrom] = useState(null); 
+  const [selectedFrom, setSelectedFrom] = useState(""); 
+  const [selectedTo, setSelectedTo] = useState(""); 
+  const [homiesCash, setHomiesCash] = useState([]);
+  const [amountToMove, setAmountToMove] = useState(null);
+
+  useEffect( () => { 
+    const getCashForHomies = async () => {
+      try { 
+        const cash = await axios.get(`/homies/cash`);
+        setHomiesCash(cash.data);
+      } catch (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>
+    );
+  };
+
+  const homieOptions = homiesCash.map(homieToOptionMapper);    
+  
+  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) => {
+    setSelectedTo(e.target.value); 
+  }
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    console.log("Submitting");
+  }
+
+  const formComplete = () => (
+    selectedFrom !== "" && 
+    selectedFrom !== selectedTo && 
+    selectedTo !== "" &&
+    amountToMove > 0
+  );
 
 return (
-<div>
+<div className="center-align">
+   <form onSubmit={handleSubmit}>
    <h3>Make Money Move</h3>
-   <TextInput label="How Much?" />
-   <label>From: </label>
-   <Collection>
-     <CollectionItem>
-       Alvin
-      </CollectionItem>
-     <CollectionItem>
-       Alvin
-     </CollectionItem>
-     <CollectionItem>
-       Alvin
-     </CollectionItem>
-     <CollectionItem>
-       Alvin
-      </CollectionItem>
-     <CollectionItem>
-       Alvin
-      </CollectionItem>
-     <CollectionItem>
-       Alvin
-     </CollectionItem>
-     <CollectionItem>
-       Alvin
-     </CollectionItem>
-     <CollectionItem>
-       Alvin
-      </CollectionItem>
-      <CollectionItem>
-       Alvin
-      </CollectionItem>
-     <CollectionItem>
-       Alvin
-     </CollectionItem>
-     <CollectionItem>
-       Alvin
-     </CollectionItem>
-     <CollectionItem>
-       Alvin
-      </CollectionItem>
-     <CollectionItem>
-       Alvin
-      </CollectionItem>
-     <CollectionItem>
-       Alvin
-     </CollectionItem>
-     <CollectionItem>
-       Alvin
-     </CollectionItem>
-     <CollectionItem>
-       Alvin
-      </CollectionItem>
+   <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>
 
-    </Collection>  
+     <label>To: </label>
+     <Select  value={selectedTo} name="to_homie" onChange={handleToHomieChange}>
+        <option disabled value="">Select Homie</option>
+        {filteredHomieOptions}
+      </Select>
+      
+    
+      <div>  
+      <Button disabled={!formComplete()} waves="light">
+        Do it
+       <Icon left>
+         attach_money
+       </Icon>
+      </Button>
+      </div>
+   </form>
 </div>
 );
 

client/src/homies/Homie.js

@@ -0,0 +1,55 @@
+import React, { useState, useEffect } from 'react'; 
+import {Icon, Select, TextInput, Button} from 'react-materialize';
+import './Homie.css';
+import axios from 'axios';
+
+const Homie = (props) => {
+
+  const [homieName, setHomieName] = useState("");
+ 
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    console.log("Submitting");
+  }
+
+  const formComplete = () => (
+    selectedFrom !== "" && 
+    selectedFrom !== selectedTo && 
+    selectedTo !== "" &&
+    amountToMove > 0
+  );
+
+return (
+<div className="center-align">
+   <form onSubmit={handleSubmit}>
+   <h3>Homie Data</h3>
+   <TextInput label="Homies Name" type="text" 
+               required defaultValue="" onChange={handleNameChange} />
+     <label>From: </label>
+     <Select  value={selectedFrom} name="from_homie" onChange={handleFromHomieChange}>
+       <option disabled value="" >Select Homie</option>
+        {homieOptions}
+     </Select>
+
+     <label>To: </label>
+     <Select  value={selectedTo} name="to_homie" onChange={handleToHomieChange}>
+        <option disabled value="">Select Homie</option>
+        {filteredHomieOptions}
+      </Select>
+      
+    
+      <div>  
+      <Button disabled={!formComplete()} waves="light">
+        Do it
+       <Icon left>
+         attach_money
+       </Icon>
+      </Button>
+      </div>
+   </form>
+</div>
+);
+
+}
+
+export default Homie;