77 lines
2.4 KiB
JavaScript
77 lines
2.4 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { withRouter, useParams } from 'react-router-dom';
|
|
import axios from "axios";
|
|
import './Flow.css';
|
|
import { formatTime, timestampToDate } from "../common/formatting";
|
|
import {errorToast} from "../common/errorHelpers";
|
|
|
|
const WorkFlow = (props) => {
|
|
const { homie_id } = useParams();
|
|
|
|
const [work, setWork] = useState([]);
|
|
|
|
useEffect( () => {
|
|
(async () => {
|
|
try {
|
|
const response = await axios.get(`/api/work?homie_id=${parseInt(homie_id)}`);
|
|
if (response.status === 200 && response.data){
|
|
setWork(response.data);
|
|
}
|
|
} catch (e) {
|
|
errorToast();
|
|
}
|
|
})();
|
|
}, [homie_id]);
|
|
|
|
const dateBlock = (timestamp) => <span className="grey-text">{ timestampToDate(timestamp) }</span>
|
|
|
|
const flowData = work.map( (singleWorkData, index) => (
|
|
<li key={index}>
|
|
<div className="collapsible-header record">
|
|
<div className="flex-row opposite-sides-content">
|
|
<div className="flex-col">
|
|
<div>{ singleWorkData.description }</div>
|
|
<div>{ dateBlock(singleWorkData['created_at']) }</div>
|
|
</div>
|
|
|
|
<div className={`flex-center ${singleWorkData.amount > 0 ? 'amount-green' : ''}`}>{ formatTime(singleWorkData.amount) }</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
));
|
|
|
|
const totalStats = () => {
|
|
const totalCount = work.length;
|
|
const firstFlowRow = totalCount > 0 ? work[0] : undefined;
|
|
const lastFlowRow = totalCount > 0 ? work[work.length - 1] : undefined;
|
|
const totalFlow = work.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 work:</span> <strong>{formatTime(totalFlow)}</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
{ totalStats() }
|
|
<ul className="collapsible">
|
|
{ flowData }
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default withRouter(WorkFlow); |