display stats depending on duration - #13

fittrackee_client/src/components/App.css

@@ -123,6 +123,10 @@ label {
   font-size: 0.9em;
 }
 
+.chart-filters {
+  padding-bottom: 10px;
+}
+
 .chart-info {
   font-size: 0.8em;
   font-style: italic;

fittrackee_client/src/components/Common/Stats/index.jsx

@@ -9,12 +9,21 @@ import StatsChart from './StatsChart'
 
 class Statistics extends React.PureComponent {
   componentDidMount() {
-    this.props.loadMonthActivities(
+    this.props.loadActivities(
       this.props.user.id,
       this.props.statsParams,
     )
   }
 
+  componentDidUpdate(prevProps) {
+    if (this.props.statsParams !== prevProps.statsParams) {
+      this.props.loadActivities(
+        this.props.user.id,
+        this.props.statsParams,
+      )
+    }
+  }
+
   render() {
     const { sports, statistics, statsParams } = this.props
     const stats = formatStats(statistics, sports, statsParams)
@@ -37,7 +46,7 @@ export default connect(
     user: state.user,
   }),
   dispatch => ({
-    loadMonthActivities: (userId, data) => {
+    loadActivities: (userId, data) => {
       const dateFormat = 'YYYY-MM-DD'
       const params = {
         from: format(data.start, dateFormat),

fittrackee_client/src/components/Statistics/index.jsx

@@ -1,8 +1,17 @@
-import { endOfMonth, startOfMonth, subMonths } from 'date-fns'
+import {
+  endOfMonth,
+  endOfWeek,
+  endOfYear,
+  startOfMonth,
+  startOfYear,
+  subMonths,
+  subYears
+} from 'date-fns'
 import React from 'react'
 
 import Stats from '../Common/Stats'
 
+const durations = ['week', 'month', 'year']
 
 export default class Statistics extends React.Component {
   constructor(props, context) {
@@ -16,7 +25,24 @@ export default class Statistics extends React.Component {
     }
   }
 
+  handleOnChange(e) {
+    const duration = e.target.value
+    const date = new Date()
+    const start = duration === 'year'
+      ? startOfYear(subYears(date, 9))
+      : duration === 'week'
+        ? startOfMonth(subMonths(date, 2))
+        : startOfMonth(subMonths(date, 11))
+    const end = duration === 'year'
+      ? endOfYear(date)
+      : duration === 'week'
+        ? endOfWeek(date)
+        : endOfMonth(date)
+    this.setState({ duration, end, start })
+  }
+
   render() {
+    const { duration } = this.state
     return (
       <div className="container dashboard">
         <div className="card activity-card">
@@ -24,6 +50,22 @@ export default class Statistics extends React.Component {
             Statistics
           </div>
           <div className="card-body">
+            <div className="chart-filters row">
+              <div className="col-md-3">
+                <select
+                  className="form-control input-lg"
+                  name="duration"
+                  defaultValue={duration}
+                  onChange={e => this.handleOnChange(e)}
+                >
+                  {durations.map(d => (
+                    <option key={d} value={d}>
+                      {d}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            </div>
             <Stats statsParams={this.state} />
           </div>
         </div>