78 lines
2.4 KiB
JavaScript
78 lines
2.4 KiB
JavaScript
|
import React, { useState, useEffect } from 'react';
|
||
|
|
import { withRouter, useParams } from 'react-router-dom';
|
||
|
|
import axios from "axios";
|
||
|
|
import M from "materialize-css";
|
||
|
|
import './Flow.css';
|
||
|
|
import { formatMoney, timestampToDate } from "../common/formatting";
|
||
|
|
|
||
|
|
const Flow = (props) => {
|
||
|
|
const { homie_id } = useParams();
|
||
|
|
|
||
|
|
const [flow, setFlow] = useState([]);
|
||
|
|
|
||
|
|
useEffect( () => {
|
||
|
|
(async () => {
|
||
|
|
try {
|
||
|
|
const response = await axios.get(`/api/money_moves?homie_id=${parseInt(homie_id)}`);
|
||
|
|
if (response.status === 200 && response.data){
|
||
|
|
setFlow(response.data);
|
||
|
|
}
|
||
|
|
} catch (e) {
|
||
|
|
M.toast({ html: "Yo! It ain't workin'" });
|
||
|
|
}
|
||
|
|
})();
|
||
|
|
}, [homie_id]);
|
||
|
|
|
||
|
|
const dateBlock = (timestamp) => <span className="grey-text">{ timestampToDate(timestamp) }</span>
|
||
|
|
|
||
|
|
|
||
|
|
const flowData = flow.map( (singleFlowData, index) => (
|
||
|
|
<li key={index}>
|
||
|
|
<div className="collapsible-header record">
|
||
|
|
<div className="flex-row opposite-sides-content">
|
||
|
|
<div className="flex-col">
|
||
|
|
<div>{ singleFlowData.description }</div>
|
||
|
|
<div>{ dateBlock(singleFlowData['created_at']) }</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className={`flex-center ${singleFlowData.amount > 0 ? 'amount-green' : ''}`}>{ formatMoney(singleFlowData.amount) }</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
));
|
||
|
|
|
||
|
|
const totalStats = () => {
|
||
|
|
const totalCount = flow.length;
|
||
|
|
const firstFlowRow = totalCount > 0 ? flow[0] : undefined;
|
||
|
|
const lastFlowRow = totalCount > 0 ? flow[flow.length - 1] : undefined;
|
||
|
|
const totalFlow = flow.reduce((sum, record) => sum + parseInt(record.amount), 0);
|
||
|
|
|
||
|
|
const fromDate = lastFlowRow ? timestampToDate(lastFlowRow['created_at']) : '';
|
||
|
|
const toDate = firstFlowRow ? timestampToDate(firstFlowRow['created_at']) : '';
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<br />
|
||
|
|
<div className="row">
|
||
|
|
<div className="col s6">
|
||
|
|
<strong>{`${totalCount} Records`}</strong><span className="grey-text">{` • ${fromDate} - ${toDate}`}</span>
|
||
|
|
</div>
|
||
|
|
<div className="col s6 right-align">
|
||
|
|
<span className="grey-text">Total flow:</span> <strong>{formatMoney(totalFlow)}</strong>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="container">
|
||
|
|
{ totalStats() }
|
||
|
|
<ul className="collapsible">
|
||
|
|
{ flowData }
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default withRouter(Flow);
|