From d8e074191f646102f97a7385d07e7e4e5ecb23f5 Mon Sep 17 00:00:00 2001
From: Danny van Kooten <dannyvankooten@gmail.com>
Date: Sat, 24 Dec 2016 10:42:05 +0200
Subject: [PATCH] Update location hash when choosing time period & parse on
 component init.

---
 assets/js/components/CountWidget.js |  2 +-
 assets/js/components/DatePicker.js  |  2 +-
 assets/js/pages/dashboard.js        | 11 +++++++++--
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/assets/js/components/CountWidget.js b/assets/js/components/CountWidget.js
index fe91b78..834ac8b 100644
--- a/assets/js/components/CountWidget.js
+++ b/assets/js/components/CountWidget.js
@@ -41,6 +41,7 @@ class CountWidget extends Component {
   }
 
   renderPercentage() {
+    // wait for request to finish
     if( ! this.state.previousCount ) {
       return '';
     }
@@ -58,7 +59,6 @@ class CountWidget extends Component {
         {loadingOverlay}
         <h4 class="">{this.props.title}</h4>
         <div class="big tiny-margin">{numbers.formatWithComma(this.state.count)} {this.renderPercentage()}</div>
-        <div class="muted">last {this.props.period} days</div>
       </div>
     )
   }
diff --git a/assets/js/components/DatePicker.js b/assets/js/components/DatePicker.js
index 2c43dd4..92e44cd 100644
--- a/assets/js/components/DatePicker.js
+++ b/assets/js/components/DatePicker.js
@@ -2,7 +2,7 @@
 
 import { h, render, Component } from 'preact';
 
-var availablePeriods = [
+const availablePeriods = [
   {
     id: 7,
     label: 'Last 7 days'
diff --git a/assets/js/pages/dashboard.js b/assets/js/pages/dashboard.js
index c61d637..a3bc97d 100644
--- a/assets/js/pages/dashboard.js
+++ b/assets/js/pages/dashboard.js
@@ -29,8 +29,15 @@ class Dashboard extends Component {
     super(props)
 
     this.state = {
-      period: 7
+      period: parseInt(window.location.hash.substring(2)) || 7
     }
+
+    this.onPeriodChoose = this.onPeriodChoose.bind(this)
+  }
+
+  onPeriodChoose(p) {
+    this.setState({ period: p })
+    window.history.replaceState(this.state, null, `#!${p}`)
   }
 
   render() {
@@ -40,7 +47,7 @@ class Dashboard extends Component {
       <div class="container">
         <Realtime />
         <div class="clear">
-          <DatePicker period={this.state.period} onChoose={(p) => { this.setState({ period: p })}} />
+          <DatePicker period={this.state.period} onChoose={this.onPeriodChoose} />
         </div>
         <div class="row">
           <div class="col-2">