From c66e69b797f922d62ab7892e6c8b306c90f535f2 Mon Sep 17 00:00:00 2001
From: Danny van Kooten <dannyvankooten@gmail.com>
Date: Tue, 18 Sep 2018 12:03:45 +0200
Subject: [PATCH] remember view when loading dashboard without explicit period
 in location hash. closes #128

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

diff --git a/assets/src/js/components/DatePicker.js b/assets/src/js/components/DatePicker.js
index b80d825..6992397 100644
--- a/assets/src/js/components/DatePicker.js
+++ b/assets/src/js/components/DatePicker.js
@@ -53,6 +53,7 @@ const availablePeriods = {
  },
 }
 
+const defaultPeriod = 'last-7-days';
 const padZero = function(n){return n<10? '0'+n:''+n;}
 
 class DatePicker extends Component {
@@ -60,7 +61,7 @@ class DatePicker extends Component {
     super(props)
 
     this.state = {
-      period: props.value,
+      period: window.location.hash.substring(2) || window.localStorage.getItem('period') || defaultPeriod,
       before: 0, // UTC timestamp
       after: 0, // UTC timestamp
       startDate: null, // local date object
@@ -109,6 +110,9 @@ class DatePicker extends Component {
       this.timeout = window.setTimeout(() => {
         this.props.onChange(this.state);
         this.timeout = null;
+
+        window.localStorage.setItem('period', this.state.period) 
+        window.history.replaceState(this.state, null, '#!' + this.state.period)
       }, 2)
     }
   }
diff --git a/assets/src/js/pages/dashboard.js b/assets/src/js/pages/dashboard.js
index 5947304..8c64379 100644
--- a/assets/src/js/pages/dashboard.js
+++ b/assets/src/js/pages/dashboard.js
@@ -14,7 +14,6 @@ class Dashboard extends Component {
     super(props)
 
     this.state = {
-      period: (window.location.hash.substring(2) || 'last-7-days'),
       before: 0,
       after: 0,
       isPublic: document.cookie.indexOf('auth') < 0,
@@ -22,9 +21,11 @@ class Dashboard extends Component {
   }
 
   @bind
-  changePeriod(s) {
-    this.setState({ period: s.period, before: s.before, after: s.after })
-    window.history.replaceState(this.state, null, `#!${s.period}`)
+  updateDateRange(s) {
+    this.setState({ 
+      before: s.before, 
+      after: s.after 
+    })
   }
 
   render(props, state) {
@@ -48,7 +49,7 @@ class Dashboard extends Component {
 
       <section class="section animated fadeInUp delayed_02s">
         <nav class="date-nav">
-          <DatePicker onChange={this.changePeriod} value={state.period} />
+          <DatePicker onChange={this.updateDateRange} />
         </nav>
 
         <div class="boxes">