Data dashboard

package.json

@@ -14,6 +14,7 @@
     "cancel": "^0.2.1",
     "case-sensitive-paths-webpack-plugin": "2.1.1",
     "chalk": "1.1.3",
+    "chart.js": "^1.1.1",
     "css-loader": "0.28.4",
     "dotenv": "4.0.0",
     "eslint": "4.4.1",
@@ -46,6 +47,7 @@
     "react": "^16.4.0",
     "react-button": "^1.2.1",
     "react-buttons": "0.0.11",
+    "react-chartjs": "^1.2.0",
     "react-dev-utils": "^4.1.0",
     "react-dom": "^16.4.1",
     "react-dropdown": "^1.4.2",

src/DataGraph.js

@@ -0,0 +1,114 @@
+import React, { Component } from 'react';
+var LineChart = require("react-chartjs").Line;
+
+/*
+ *
+ * REFACTORING RECOMMENDATION
+ *
+ * Graph changes currently structured based on several hardcoded functions.
+ *  - once file refactored to pass in props, recommend collapsing these to one func
+ *  - the one func takes in a single value that will trigger a switch statement that selects props
+ *  - use the keys
+ *
+ *
+ */
+
+export default class DataGraph extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      dataLabels: [1, 2, 3, 4],
+      graphLabel: "One Day",
+      data: [4, 1, 2, 6]
+    };
+
+  }
+
+  UpdateOneDay = () => {
+    this.setState(state => ({
+      dataLabels: [1, 2, 3, 4],
+      graphLabel: "One Day",
+      data: [4, 1, 2, 6]
+    }));
+  }
+
+  UpdateOneWeek = () => {
+    this.setState(state => ({
+      dataLabels: [1, 2, 3, 4, 5, 6, 7],
+      graphLabel: "One Week",
+      data: [4, 4, 1, 2, 2, 5, 7]
+    }));
+  }
+
+  UpdateThreeMonth= () => {
+    this.setState(state => ({
+      dataLabels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
+      graphLabel: "Three Month",
+      data: [4, 4, 1, 2, 2, 5, 7, 8, 9, 13, 4, 12, 5, 2, 31, 5]
+    }));
+  }
+
+  UpdateOneMonth = () => {
+    this.setState(state => ({
+      dataLabels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
+      graphLabel: "One Month",
+      data: [4, 4, 1, 2, 2, 5, 7, 8, 9, 13, 4]
+    }));
+  }
+
+  UpdateOneYear = () => {
+    this.setState(state => ({
+      dataLabels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25],
+      graphLabel: "One Year",
+      data: Array.from(Array(25).keys())
+    }));
+  }
+
+  UpdateAll = () => {
+    this.setState(state => ({
+      dataLabels: Array.from(Array(40).keys()),
+      graphLabel: "All",
+      data: Array.from(Array(40).keys())
+    }));
+  }
+
+  render() {
+    var chartOptions = {
+      scaleShowHorizontalLines: true
+    };
+
+    var generalData = {
+      labels: this.state.dataLabels,
+      datasets: [
+        {
+          label: this.state.graphLabel,
+          fillColor: "rgba(220,220,220,0.2)",
+          strokeColor: "rgba(220,220,220,1)",
+          pointColor: "rgba(220,220,220,1)",
+          pointStrokeColor: "#fff",
+          pointHighlightFill: "#fff",
+          pointHighlightStroke: "rgba(220,220,220,1)",
+          data: this.state.data
+        }
+      ]
+    }
+
+    return (
+      <div>
+        <LineChart data={generalData} options={chartOptions} width="600" height="250"/>
+        <div className="quickstart row">
+          {this.state.graphLabel}
+        </div>
+        <div className="quickstart row">
+          <button key={"oneday"} onClick={this.UpdateOneDay}>1D</button>
+          <button key={"oneweek"} onClick={this.UpdateOneWeek}>1W</button>
+          <button key={"onemonth"} onClick={this.UpdateOneMonth}>M</button>
+          <button key={"threemonth"} onClick={this.UpdateThreeMonth}>3M</button>
+          <button key={"oneyear"} onClick={this.UpdateOneYear}>1Y</button>
+          <button key={"all"} onClick={this.UpdateAll}>ALL</button>
+        </div>
+      </div>
+    );
+  }
+}

src/Progress.js

@@ -0,0 +1,144 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { Line } from 'rc-progress';
+
+import ShowSpinner from './components/spinner';
+import Header from './components/header';
+import avgUserStats from './components/avgUserStats';
+import avgUserStat from './components/avgUserStat';
+import DataGraph from './DataGraph';
+
+import {
+  getCurrentLessonForUser,
+  getAverageStats,
+  getChapterProgress
+} from './actions/progress';
+
+import "./style/styles.css";
+import "./style/Progress.css";
+
+var LineChart = require("react-chartjs").Line;
+
+class Progress extends Component {
+  constructor(props) {
+      super(props);
+
+      const { uid } = this.props.currentUser;
+      this.setup(uid);
+
+      this.state = {
+        headerLinks: ["Learn", "Home" ],
+        badges: ["WPM", "Accuracy"],
+        badgeDescriptions: [
+          "",
+          ""
+        ]
+      }
+  }
+
+  setup(uid) {
+    this.props.getCurrentLessonForUser(uid);
+    this.props.getAverageStats(uid);
+    this.props.getChapterProgress(uid);
+  }
+
+  redirectLesson = () => {
+      this.setState({redirectLesson: true})
+  }
+
+  formatText = (chapterName, lessonName) => {
+    const title = `${chapterName.split(":")[0]} | ${lessonName.split(":")[0]}`
+    const lesson = lessonName.split(":")[1];
+    return { title, lesson };
+  }
+
+  render() {
+
+    const {
+      badges,
+      headerLinks,
+      badgeDescriptions
+    } = this.state;
+    const {
+      chapterName,
+      lessonName,
+      hasFinishedLoading,
+      imagePath,
+      avgWPM,
+      avgAccuracy,
+      isStatsLoading,
+      percentageComplete,
+      isPercentageLoading,
+    } = this.props;
+
+    if(!hasFinishedLoading || isStatsLoading || isPercentageLoading) {
+      return ShowSpinner();
+    }
+
+    const { title, lesson } = this.formatText(chapterName, lessonName);
+    const stats = avgUserStats(badges, badgeDescriptions, [avgWPM, avgAccuracy]);
+    // separate stats into two separate components
+    const wpmStat = avgUserStat(badges[0], avgWPM, 0, "This is your average\nWords Per Minute score.\n");
+    const accStat = avgUserStat(badges[1], avgAccuracy, 1, "This is your average\n accuracy rate.\n");
+    const { username } = this.props.currentUser
+
+    return (
+      <div>
+        <Header links={headerLinks} isLoggedIn={true} username={username} />
+        <div className="container">
+          <div className="quickstart row">
+            <div className="column" align="left">
+              <h2 className="title" align="left">My Progress</h2>
+            </div>
+          </div>
+          <div className="quickstart row">
+            <div className="qs-lesson-info column" align="left">
+              {wpmStat}
+            </div>
+            <div className="column">
+              <DataGraph />
+            </div>
+          </div>
+          <div className="quickstart row">
+            <div className="qs-lesson-info column" align="left">
+              {accStat}
+            </div>
+            <div className="column">
+              <DataGraph />
+            </div>
+          </div>
+          <hr className="line row"/>
+        </div>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = ({ auth, app, statsForUser, chapterProgressPercentage }) => {
+  return {
+    lessonName: app.currentLesson.lessonName,
+    chapterName: app.currentLesson.chapterName,
+    hasFinishedLoading: app.currentLesson.hasFinishedLoading,
+    showSpinner: app.currentLesson.showSpinner,
+    imagePath: app.currentLesson.chapterImage,
+    avgWPM: statsForUser.avgWPM,
+    avgAccuracy: statsForUser.avgAccuracy,
+    isStatsLoading: statsForUser.isStatsLoading,
+    percentageComplete: chapterProgressPercentage.percentageComplete,
+    isPercentageLoading: chapterProgressPercentage.isPercentageLoading,
+    currentUser: auth.currentUser,
+    isLoggedIn: auth.isLoggedIn
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return bindActionCreators({
+    getCurrentLessonForUser,
+    getAverageStats,
+    getChapterProgress
+  }, dispatch);
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Progress);

src/actions/progress.js

@@ -0,0 +1,97 @@
+import axios from 'axios';
+import { api_url } from '../constants';
+
+export const GET_CURRENT_LESSON = "GET_CURRENT_LESSON";
+export const GET_CURRENT_LESSON_WAITING = "GET_CURRENT_LESSON_WAITING";
+export const GET_CURRENT_LESSON_FAILED = "GET_CURRENT_LESSON_FAILED";
+
+const getCurrentLessonForUserSuccess = data => {
+  return {
+    type: GET_CURRENT_LESSON,
+    data
+  }
+}
+
+const getCurrentLessonForUserWaiting = _ => {
+  return {
+    type: GET_CURRENT_LESSON_WAITING
+  }
+}
+
+const getCurrentLessonForUserFailed = err => {
+  return {
+    type: GET_CURRENT_LESSON_FAILED,
+    err
+  }
+}
+
+export const getCurrentLessonForUser = uid => {
+  return function (dispatch) {
+    dispatch(getCurrentLessonForUserWaiting());
+    return axios.post(`${api_url}/lesson/getCurrent`, { uid })
+      .then(res => {
+        const { data } = res;
+        dispatch(getCurrentLessonForUserSuccess(data));
+      })
+      .catch(err => {
+        dispatch(getCurrentLessonForUserFailed(err));
+      })
+  }
+}
+
+export const GET_AVG_STATS_REQ = "GET_AVG_STATS";
+export const GET_AVG_STATS_SUCCESS = "GET_AVG_STATS_SUCCESS";
+
+const getAverageStatsSuccess = (data) => {
+  return {
+    type: GET_AVG_STATS_SUCCESS,
+    data
+  }
+}
+
+const getAverageStatsReq = () => {
+  return {
+    type: GET_AVG_STATS_REQ
+  }
+} 
+
+export const getAverageStats = (uid) => {
+  return function(dispatch) {
+    dispatch(getAverageStatsReq());
+    return axios.post(`${api_url}/hollisticStats`, { uid })
+      .then(res => {
+        const { data } = res;
+        dispatch(getAverageStatsSuccess(data));
+      })
+      .catch(err => {
+        console.log('err');
+      })
+  }
+}
+
+export const GET_CHAPTER_PROGRESS = "GET_CHAPTER_PROGRESS";
+export const GET_CHAPTER_PROGRESS_SUCCESS = "GET_CHAPTER_PROGRESS_SUCCESS";
+
+const getChapterProgressSuccess = (data) => {
+  return {
+    type: GET_CHAPTER_PROGRESS_SUCCESS,
+    data
+  }
+}
+
+const getChapterProgressReq = () => {
+  return {
+    type: GET_AVG_STATS_REQ
+  }
+}
+
+export const getChapterProgress = (uid) => {
+  return function(dispatch) {
+    dispatch(getChapterProgressReq());
+    return axios.post(`${api_url}/chapter/getChapterProgress`, { uid })
+      .then(res => {
+        const { data } = res;
+        dispatch(getChapterProgressSuccess(data));
+      })
+  }
+}

src/app.js

@@ -10,6 +10,7 @@ import Profile from './ProfilePage';
 import Learn from './Learn';
 import Tutorial from './Tutorial';                               
 import HomePage from './HomePage';
+import Progress from './Progress';
 import FourOhFour from './components/FourOhFour';
 
 class App extends Component {
@@ -43,6 +44,7 @@ class App extends Component {
       <Switch>
         <Route path="/home" component={HomePage}/>
         <Route path="/learn" component={Learn}/>
+        <Route path="/progress" component={Progress}/>
         <Route path="/tutorial" component={Tutorial}/>
         <Route path="/profile" component={Profile}/>
         <Route path="/signup" component={() => <SignupPage onSuccessfulAuth={this.onSuccessfulAuth}/>}/>