87 lines
1.8 KiB
JavaScript
87 lines
1.8 KiB
JavaScript
import React, { useState, useEffect } 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';
|
|
|
|
const Cash = (props) => {
|
|
const [homiesCash, setHomiesCash] = useState([]);
|
|
//const [importance, setImportance] = useState(10);
|
|
|
|
useEffect( () => {
|
|
const getCashForHomies = async () => {
|
|
try {
|
|
const cash = await axios.get(`/homies/cash`);
|
|
setHomiesCash(cash.data);
|
|
} catch (e) {
|
|
console.log("Error fetching", e);
|
|
}
|
|
};
|
|
getCashForHomies();
|
|
}, []);
|
|
|
|
|
|
const formatMoney = (amount) => {
|
|
const formatted = Number.parseFloat(amount).toFixed(2);
|
|
return `${formatted} KM`;
|
|
}
|
|
|
|
const cashTableBody = homiesCash.map( (homieLine) => {
|
|
return (
|
|
<tr key={homieLine.homie.id}>
|
|
<td className="cash-cell-left">
|
|
{ homieLine.homie.name }
|
|
</td>
|
|
<td className="cash-cell-right">
|
|
{ formatMoney(homieLine.amount) }
|
|
</td>
|
|
<td className="cash-cell-left">
|
|
[ settle ]
|
|
</td>
|
|
</tr>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<div>
|
|
|
|
<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);
|