remember view when loading dashboard without explicit period in location hash. closes #128

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

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">