109 lines
2.7 KiB
JavaScript
109 lines
2.7 KiB
JavaScript
import React, { useState, useEffect, useReducer } from 'react';
|
|
import { Button, Table } from 'react-materialize';
|
|
import './Cash.css';
|
|
import axios from 'axios';
|
|
import { MAKE_MONEY_MOVE } from '../RouteNames';
|
|
import { withRouter } from 'react-router-dom';
|
|
import { formatMoney } from '../common/formatting';
|
|
import InputModal from "../common/InputModal";
|
|
import { errorToast } from "../common/errorHelpers";
|
|
import M from 'materialize-css';
|
|
|
|
const Cash = (props) => {
|
|
const [homiesCash, setHomiesCash] = useState([]);
|
|
const [, forceUpdate] = useReducer(x => x + 1, 0);
|
|
//const [importance, setImportance] = useState(10);
|
|
|
|
useEffect( () => {
|
|
const getCashForHomies = async () => {
|
|
try {
|
|
const cash = await axios.get(`/api/homies/cash`);
|
|
setHomiesCash(cash.data);
|
|
} catch (e) {
|
|
console.log("Error fetching", e);
|
|
}
|
|
};
|
|
getCashForHomies();
|
|
}, []);
|
|
|
|
const settleFlowForHomie = async (id, amountToSettle) => {
|
|
console.log('Amount to settle : ', amountToSettle);
|
|
try {
|
|
const response = await axios.post(`/api/homies/${id}/settle`, { amount: amountToSettle });
|
|
if (response.status === 200 && response.data) {
|
|
M.toast({ html: 'Settled' });
|
|
}else{
|
|
errorToast();
|
|
}
|
|
} catch(e) {
|
|
errorToast();
|
|
}
|
|
forceUpdate();
|
|
}
|
|
|
|
const cashTableBody = homiesCash.map( (homieLine) => {
|
|
return (
|
|
<tr key={homieLine.homie.id}>
|
|
<td className="cash-cell-left">
|
|
<a href={`/homie/${homieLine.homie.id}/flow`}>{ homieLine.homie.name }</a>
|
|
</td>
|
|
<td className="cash-cell-right">
|
|
{ formatMoney(homieLine.amount) }
|
|
</td>
|
|
<td className="cash-cell-left">
|
|
[
|
|
<InputModal
|
|
body={"Maan, y'a sure about this? Flow history goes bye bye!"}
|
|
inputLabel={'Settle to'}
|
|
defaultInputValue={homieLine.amount}
|
|
confirmAction={(settleAmount) => settleFlowForHomie(homieLine.homie.id, settleAmount)}
|
|
triggerNode={<a href='#'>Settle</a>}
|
|
/>
|
|
]
|
|
</td>
|
|
</tr>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<div className="container">
|
|
<Table>
|
|
<thead>
|
|
<tr>
|
|
<th>
|
|
Homie
|
|
</th>
|
|
<th>
|
|
Cash
|
|
</th>
|
|
<th>
|
|
Actions
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{ cashTableBody }
|
|
</tbody>
|
|
</Table>
|
|
|
|
<Button
|
|
floating
|
|
large
|
|
className="green"
|
|
fab={{direction: 'bottom'}}
|
|
waves="light"
|
|
icon="add"
|
|
onClick={
|
|
() => {
|
|
props.history.push(MAKE_MONEY_MOVE)
|
|
}
|
|
}
|
|
/>
|
|
|
|
</div>
|
|
);
|
|
}
|
|
|
|
|
|
export default withRouter(Cash);
|