From 52b1603b92a49889538df3c9e9c7fa04e051c537 Mon Sep 17 00:00:00 2001
From: Toni Dezman <tdezman@biosistemika.com>
Date: Mon, 14 Aug 2017 15:14:08 +0200
Subject: [PATCH] adds MyStatistics logic

---
 .../src/settings/components/MyStatistics.jsx  | 64 +++++++++++++++++++
 .../settings/components/MyStatisticsBox.jsx   | 30 +++++++++
 app/views/client_api/users/show.json.jbuilder |  1 +
 3 files changed, 95 insertions(+)
 create mode 100644 app/javascript/packs/src/settings/components/MyStatistics.jsx
 create mode 100644 app/javascript/packs/src/settings/components/MyStatisticsBox.jsx

diff --git a/app/javascript/packs/src/settings/components/MyStatistics.jsx b/app/javascript/packs/src/settings/components/MyStatistics.jsx
new file mode 100644
index 000000000..287bbc6cb
--- /dev/null
+++ b/app/javascript/packs/src/settings/components/MyStatistics.jsx
@@ -0,0 +1,64 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import PropTypes from "prop-types";
+
+import MyStatisticsBox from "./MyStatisticsBox";
+
+class MyStatistics extends Component {
+  render() {
+    const stats = this.props.statistics;
+
+    const statBoxes = () => {
+      let boxes = <div>Loading...</div>;
+      if (stats) {
+        boxes = (
+          <div>
+            <MyStatisticsBox
+              typeLength={stats.number_of_teams}
+              typeText="Team"
+            />
+            <MyStatisticsBox
+              typeLength={stats.number_of_projects}
+              typeText="Projects"
+            />
+            <MyStatisticsBox
+              typeLength={stats.number_of_experiments}
+              typeText="Experiments"
+            />
+            <MyStatisticsBox
+              typeLength={stats.number_of_protocols}
+              typeText="Protocols"
+            />
+          </div>
+        );
+      }
+
+      return boxes;
+    };
+
+    return (
+      <div>
+        <h2>My Statistics</h2>
+
+        {statBoxes()}
+      </div>
+    );
+  }
+}
+
+MyStatistics.defaultProps = {
+  statistics: null
+};
+
+MyStatistics.propTypes = {
+  statistics: PropTypes.shape({
+    number_of_teams: PropTypes.number.isRequired,
+    number_of_projects: PropTypes.number.isRequired,
+    number_of_experiments: PropTypes.number.isRequired,
+    number_of_protocols: PropTypes.number.isRequired
+  })
+};
+
+const mapStateToProps = state => state.current_user;
+
+export default connect(mapStateToProps, {})(MyStatistics);
diff --git a/app/javascript/packs/src/settings/components/MyStatisticsBox.jsx b/app/javascript/packs/src/settings/components/MyStatisticsBox.jsx
new file mode 100644
index 000000000..08a8e0be0
--- /dev/null
+++ b/app/javascript/packs/src/settings/components/MyStatisticsBox.jsx
@@ -0,0 +1,30 @@
+import React from "react";
+import styled from "styled-components";
+import PropTypes from "prop-types";
+
+const Box = styled.div`
+  width: 100px;
+  height: 100px;
+  color: #fff;
+  background-color: silver;
+  display: inline-block;
+  margin: 15px;
+  text-align: center;
+`;
+
+const MyStatisticsBox = props =>
+  <Box>
+    <h2>
+      {props.typeLength}
+    </h2>
+    <h5>
+      {props.typeText}
+    </h5>
+  </Box>;
+
+MyStatisticsBox.propTypes = {
+  typeLength: PropTypes.number.isRequired,
+  typeText: PropTypes.string.isRequired
+};
+
+export default MyStatisticsBox;
diff --git a/app/views/client_api/users/show.json.jbuilder b/app/views/client_api/users/show.json.jbuilder
index 2670c7653..6a5c034cf 100644
--- a/app/views/client_api/users/show.json.jbuilder
+++ b/app/views/client_api/users/show.json.jbuilder
@@ -5,4 +5,5 @@ json.user do
   json.email user.email
   json.avatarPath avatar_path(user, :icon_small)
   json.avatarThumbPath avatar_path(user, :thumb)
+  json.statistics user.statistics
 end