add description field; implement submit action
This commit is contained in:
Bilal
@@ -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",
|
||||
|
||||
@@ -1,94 +1,133 @@
|
||||
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';
|
||||
|
||||
const MakeMoneyMove = (props) => {
|
||||
|
||||
const [selectedFrom, setSelectedFrom] = useState("");
|
||||
const [selectedTo, setSelectedTo] = useState("");
|
||||
const [homiesCash, setHomiesCash] = useState([]);
|
||||
const [amountToMove, setAmountToMove] = useState(null);
|
||||
const [selectedFrom, setSelectedFrom] = useState("");
|
||||
const [selectedTo, setSelectedTo] = useState("");
|
||||
const [homiesCash, setHomiesCash] = useState([]);
|
||||
const [amountToMove, setAmountToMove] = useState(null);
|
||||
const [moveDescription, setMoveDescription] = useState("");
|
||||
const [submitInProgress, setSubmitInProgress] = useState(false);
|
||||
|
||||
useEffect( () => {
|
||||
const getCashForHomies = async () => {
|
||||
try {
|
||||
const cash = await axios.get(`/homies/cash`);
|
||||
setHomiesCash(cash.data);
|
||||
} catch (e) {
|
||||
console.log("Error fetching", e);
|
||||
}
|
||||
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>
|
||||
);
|
||||
};
|
||||
getCashForHomies();
|
||||
}, []);
|
||||
|
||||
const handleAmountChange = (e) => {
|
||||
setAmountToMove(parseFloat(e.target.value))
|
||||
}
|
||||
const homieOptions = homiesCash.map(homieToOptionMapper);
|
||||
|
||||
const homieToOptionMapper = (homieCash) => {
|
||||
const homie = homieCash.homie;
|
||||
return (
|
||||
<option key={homie.id} value={homie.id}>{homie.name}</option>
|
||||
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 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 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 disableSubmit = () => (!formComplete() || submitInProgress);
|
||||
|
||||
const handleToHomieChange = (e) => {
|
||||
setSelectedTo(e.target.value);
|
||||
}
|
||||
return (
|
||||
<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) => {
|
||||
e.preventDefault();
|
||||
console.log("Submitting");
|
||||
}
|
||||
<label>To: </label>
|
||||
<Select value={selectedTo} name="to_homie" onChange={handleToHomieChange}>
|
||||
<option disabled value="">Select Homie</option>
|
||||
{filteredHomieOptions}
|
||||
</Select>
|
||||
|
||||
const formComplete = () => (
|
||||
selectedFrom !== "" &&
|
||||
selectedFrom !== selectedTo &&
|
||||
selectedTo !== "" &&
|
||||
amountToMove > 0
|
||||
);
|
||||
<br/>
|
||||
|
||||
return (
|
||||
<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>
|
||||
<Textarea label="Tag" value={moveDescription} onChange={handleDescriptionChange}/>
|
||||
|
||||
<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>
|
||||
);
|
||||
<div>
|
||||
<Button disabled={disableSubmit()} waves="light">
|
||||
Do it
|
||||
<Icon left>
|
||||
attach_money
|
||||
</Icon>
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user