adds MyStatistics logic

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);

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;

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