Handle adding work for homie

2020-09-19 04:46:01 +03:00
parent 533ef368cf
commit 6e0df8e7b7
9 changed files with 288 additions and 69 deletions
--- a/client/src/homies/WorkFlow.js
+++ b/client/src/homies/WorkFlow.js
@@ -0,0 +1,77 @@
+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);