From 4719d3b84587193a4f9d5504171b9f9dd110f574 Mon Sep 17 00:00:00 2001
From: Lauren Stephenson <compscilauren@gmail.com>
Date: Thu, 9 Jul 2020 18:56:12 -0500
Subject: [PATCH] Add statistics page with time code summary (#6)

* Add statistics page with time code summary
---
 package-lock.json                             | 12 ++++++
 package.json                                  |  1 +
 src/App.js                                    |  5 +++
 .../TimeCodeStatSummary.js                    | 43 +++++++++++++++++++
 .../ViewTimeCodes/TimeCodeProject.js          | 23 ++++++++--
 src/pages/statistics/statistics.css           |  0
 src/pages/statistics/statistics.js            | 12 ++++++
 7 files changed, 92 insertions(+), 4 deletions(-)
 create mode 100644 src/components/TimeCodeStatSummary/TimeCodeStatSummary.js
 create mode 100644 src/pages/statistics/statistics.css
 create mode 100644 src/pages/statistics/statistics.js

diff --git a/package-lock.json b/package-lock.json
index a276e36..9cf6c57 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14099,6 +14099,18 @@
         "terra-icon": "^3.33.0"
       }
     },
+    "terra-badge": {
+      "version": "3.39.0",
+      "resolved": "https://registry.npmjs.org/terra-badge/-/terra-badge-3.39.0.tgz",
+      "integrity": "sha512-B7M/H+QhCKuhIeSu5AHHJd/3FwLX0ep/MxrHwsH1gMB8P6Nc3sgixPS1DTDwOGkoFxvaa0BSwiqQbMm+fCV/Sg==",
+      "requires": {
+        "classnames": "^2.2.5",
+        "prop-types": "^15.5.8",
+        "terra-icon": "^3.33.0",
+        "terra-theme-context": "^1.2.0",
+        "terra-visually-hidden-text": "^2.28.0"
+      }
+    },
     "terra-base": {
       "version": "5.36.0",
       "resolved": "https://registry.npmjs.org/terra-base/-/terra-base-5.36.0.tgz",
diff --git a/package.json b/package.json
index 088942c..96a015a 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "react-intl": "^2.9.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
+    "terra-badge": "^3.39.0",
     "terra-base": "^5.36.0",
     "terra-button": "^3.43.0",
     "terra-card": "^3.32.0",
diff --git a/src/App.js b/src/App.js
index fb149f1..fe1352c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,6 +4,7 @@ import "./App.css";
 import { BrowserRouter as Router, Route } from "react-router-dom";
 import clock from "./pages/clock/clock.js";
 import profile from "./pages/profile/profile.js";
+import statistics from "./pages/statistics/statistics.js";
 
 function App() {
   return (
@@ -19,10 +20,14 @@ function App() {
                 <li>
                   <a href="/profile">Profile</a>
                 </li>
+                <li>
+                  <a href="/statistics">Statistics</a>
+                </li>
               </ul>
             </nav>
             <Route path="/" exact component={clock} />
             <Route path="/profile" exact component={profile} />
+            <Route path="/statistics" exact component={statistics} />
           </main>
         </Router>
       </div>
diff --git a/src/components/TimeCodeStatSummary/TimeCodeStatSummary.js b/src/components/TimeCodeStatSummary/TimeCodeStatSummary.js
new file mode 100644
index 0000000..0b4593f
--- /dev/null
+++ b/src/components/TimeCodeStatSummary/TimeCodeStatSummary.js
@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import Card from "terra-card";
+import Heading from "terra-heading";
+import TimeCodeProject from "../ViewTimeCodes/TimeCodeProject";
+import "../../styles/ViewTimeCodes.css";
+
+const TimeCodeStatSummary = () => {
+  return (
+    <Card variant="default" style={{ maxWidth: "40vw", margin: "auto" }}>
+      <div className="my-time-codes-container">
+        <Heading level={1} size="large" weight={700}>
+          This Week's Time Code Summary
+        </Heading>
+        <TimeCodeProject
+          timeCode="19378847"
+          projectTitle="Fancy Project"
+          tag="In-Progress"
+          timeSpent="4.5 hours"
+        />
+        <TimeCodeProject
+          timeCode="39572956"
+          projectTitle="Classified"
+          tag="Not Started"
+          timeSpent="8 hours"
+        />
+        <TimeCodeProject
+          timeCode="82659301"
+          projectTitle="DevOps Magic"
+          tag="In-Progress"
+          timeSpent="6.35 hours"
+        />
+        <TimeCodeProject
+          timeCode="92847634"
+          projectTitle="Wow a project"
+          tag="Completed"
+          timeSpent="17 hours"
+        />
+      </div>
+    </Card>
+  );
+};
+
+export default TimeCodeStatSummary;
diff --git a/src/components/ViewTimeCodes/TimeCodeProject.js b/src/components/ViewTimeCodes/TimeCodeProject.js
index 619b000..cd6d79e 100644
--- a/src/components/ViewTimeCodes/TimeCodeProject.js
+++ b/src/components/ViewTimeCodes/TimeCodeProject.js
@@ -1,12 +1,16 @@
 import React from "react";
 import PropTypes from "prop-types";
 import Select from "terra-form-select";
+import Badge from "terra-badge";
 
 const TimeCodeProject = (props) => {
-  return (
-    <div className="time-code-project">
-      <p>{props.timeCode}</p>
-      <p>{props.projectTitle}</p>
+  let currentIntent = "info";
+  if (props.tag === "Completed") {
+    currentIntent = "positive";
+  }
+
+  function CurrentStatus() {
+    return !props.timeSpent ? (
       <Select
         variant="default"
         defaultValue={props.tag}
@@ -17,6 +21,17 @@ const TimeCodeProject = (props) => {
         <Select.Option value="inProgress" display="In Progress" />
         <Select.Option value="completed" display="Completed" />
       </Select>
+    ) : (
+      <Badge text={props.tag} intent={currentIntent} size="medium" />
+    );
+  }
+
+  return (
+    <div className="time-code-project">
+      <p>{props.projectTitle}</p>
+      <CurrentStatus />
+      <p>{props.timeCode}</p>
+      <p>{props.timeSpent}</p>
     </div>
   );
 };
diff --git a/src/pages/statistics/statistics.css b/src/pages/statistics/statistics.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/statistics/statistics.js b/src/pages/statistics/statistics.js
new file mode 100644
index 0000000..0a16fc0
--- /dev/null
+++ b/src/pages/statistics/statistics.js
@@ -0,0 +1,12 @@
+import React from "react";
+import TimeCodeStatSummary from "../../components/TimeCodeStatSummary/TimeCodeStatSummary.js";
+
+const statistics = () => {
+  return (
+    <div>
+      <TimeCodeStatSummary />
+    </div>
+  );
+};
+
+export default statistics;