allow not selecting To homie

client/src/cash/MakeMoneyMove.js

@@ -7,9 +7,9 @@ import axios from 'axios';
 const MakeMoneyMove = (props) => {
 
     const [selectedFrom, setSelectedFrom] = useState("");
-    const [selectedTo, setSelectedTo] = useState("");
+    const [selectedTo, setSelectedTo] = useState("-1");
     const [homiesCash, setHomiesCash] = useState([]);
-    const [amountToMove, setAmountToMove] = useState(null);
+    const [amountToMove, setAmountToMove] = useState('');
     const [moveDescription, setMoveDescription] = useState("");
     const [submitInProgress, setSubmitInProgress] = useState(false);
 
@@ -40,9 +40,26 @@ const MakeMoneyMove = (props) => {
 
     const handleFromHomieChange = (e) => {
         setSelectedFrom(e.target.value);
+
+        if (selectedTo === e.target.value) {
+            setSelectedTo('-1');
+        }
     };
-    const filteredHomieCashes = homiesCash.filter((homieCash) => homieCash.homie.id !== parseInt(selectedFrom));
+
-    const filteredHomieOptions = filteredHomieCashes.map(homieToOptionMapper);
+    const notSayingOption = <option value="">NOT SAYIN'</option>
+
+    const filteredHomieOptions = () => {
+        if (selectedFrom === ''){
+            return homiesCash.map(homieToOptionMapper);
+        }else{
+            const filteredHomieCashes = homiesCash.filter((homieCash) => homieCash.homie.id !== parseInt(selectedFrom));
+            return [
+              notSayingOption,
+              ...filteredHomieCashes.map(homieToOptionMapper)
+            ];
+        }
+
+    }
 
     const handleToHomieChange = (e) => {
         setSelectedTo(e.target.value);
@@ -84,7 +101,7 @@ const MakeMoneyMove = (props) => {
 
     const formComplete = () => (
         selectedFrom !== selectedTo &&
-        selectedTo !== "" &&
+        selectedTo !== '-1' &&
         amountToMove > 0
     );
 
@@ -101,16 +118,16 @@ const MakeMoneyMove = (props) => {
                     <span className="helper-text" data-error="Yo! Put some money" />
                 </div>
 
-                <label>From (only if you can say): </label>
+                <label className="required">From (only if you can say): </label>
                 <Select value={selectedFrom} name="from_homie" onChange={handleFromHomieChange}>
-                    <option value="">NOT SAYIN'</option>
+                    {notSayingOption}
                     {homieOptions}
                 </Select>
 
-                <label className="required">To: </label>
+                <label className="required">To (only if you can say): </label>
                 <Select value={selectedTo} name="to_homie" onChange={handleToHomieChange} required="required">
-                    <option disabled value="">Select Homie</option>
+                    <option disabled value="-1">Select Homie</option>
-                    {filteredHomieOptions}
+                    {filteredHomieOptions()}
                 </Select>
 
                 <br/>