move before & after calculation to datepicker component

assets/js/components/CountWidget.js

@@ -19,41 +19,33 @@ class CountWidget extends Component {
 
     this.state = {
       value: '-',
-      loading: false
+      loading: false,
+      before: props.before,
+      after: props.after,
     }
-    this.fetchData(props.period);
   }
 
-  componentWillReceiveProps(newProps) {
-    if(this.props.period != newProps.period) {
-      this.fetchData(newProps.period)
-    }
+  componentDidMount() {
+    this.fetchData();
+  }
+
+  componentWillReceiveProps(newProps, prevState) {
+      this.setState({
+        before: newProps.before,
+        after: newProps.after,
+      });
+
+      if(newProps.before != prevState.before || newProps.after != prevState.after) {
+        this.fetchData();
+      }
   }
 
   @bind
-  fetchData(period) {
-    let before, after;
-    let afterDate = new Date();
-    afterDate.setHours(0, 0, 0, 0);
-    
-    switch(period) {
-      case "week":
-        afterDate.setDate(afterDate.getDate() - (afterDate.getDay() + 6) % 7);
-      break;
-      case "month":
-        afterDate.setDate(1);
-      break;
-      case "year":
-        afterDate.setDate(1);
-        afterDate.setMonth(0);
-      break;
-    }
-
-    before = Math.round((+new Date() ) / 1000);
-    after = Math.round((+afterDate) / 1000);
+  fetchData() {
+    console.log(this.state);
     this.setState({ loading: true })
 
-    Client.request(`${this.props.endpoint}/count?before=${before}&after=${after}`)
+    Client.request(`${this.props.endpoint}/count?before=${this.state.before}&after=${this.state.after}`)
       .then((d) => { 
         this.setState({ 
           loading: false, 

assets/js/components/DatePicker.js

@@ -27,21 +27,54 @@ class DatePicker extends Component {
     super(props)
 
     this.state = {
-      period: this.props.value
+      period: this.props.value,
+      before: 0,
+      after: 0,
     }
   }
 
+  componentDidMount() {
+    this.setTimeRange(this.state.period)
+  }
+
+  @bind
+  setTimeRange(period) {
+    let beforeDate = new Date();
+    let afterDate = new Date();
+    afterDate.setHours(0, 0, 0, 0);
+    switch(period) {
+      case "week":
+        afterDate.setDate(afterDate.getDate() - (afterDate.getDay() + 6) % 7);
+      break;
+      case "month":
+        afterDate.setDate(1);
+      break;
+      case "year":
+        afterDate.setDate(1);
+        afterDate.setMonth(0);
+      break;
+    }
+
+    let before, after;
+    before = Math.round((+beforeDate ) / 1000);
+    after = Math.round((+afterDate) / 1000);
+    this.setState({
+      before: before, 
+      after: after,
+    });
+    this.props.onChange(this.state);
+  }
+
   @bind
   setPeriod(e) {
     e.preventDefault();
 
-    var nextState = { 
-      period: e.target.dataset.value 
-    }
-
-    if(this.state.period != nextState.period) {
-      this.setState(nextState)
-      this.props.onChange(nextState.period);
+    let period = e.target.dataset.value;
+    if( period !== this.state.period) {
+      this.setState({ 
+        period: period, 
+      });
+      this.setTimeRange(this.state.period);
     }
   }
 

assets/js/components/LogoutButton.js

@@ -2,14 +2,11 @@
 
 import { h, render, Component } from 'preact';
 import Client from '../lib/client.js';
+import { bind } from 'decko';
 
 class LogoutButton extends Component {
 
-  constructor(props) {
-    super(props)
-    this.handleSubmit = this.handleSubmit.bind(this);
-  }
-
+  @bind
   handleSubmit(e) {
     e.preventDefault();
 

assets/js/components/Notification.js

@@ -1,6 +1,7 @@
 'use strict'
 
 import { h, render, Component } from 'preact';
+import { bind } from 'decko';
 
 class Notification extends Component {
   constructor(props) {
@@ -13,27 +14,28 @@ class Notification extends Component {
     this.timeout = 0
   }
 
-  clearMessage() {
-    this.setState({ message: '' })
-  }
-
   componentWillReceiveProps(newProps) {
     if(newProps.message != this.state.message) {
       this.setState({ message: newProps.message, kind: newProps.kind || 'error' })
       window.clearTimeout(this.timeout)
-      this.timeout = window.setTimeout(this.clearMessage.bind(this), 5000)
+      this.timeout = window.setTimeout(this.clearMessage, 5000)
     }
   }
 
-  render() {
-    if(this.state.message === '') {
+  @bind
+  clearMessage() {
+    this.setState({ message: '' })
+  }
+
+  render(props, state) {
+    if(state.message === '') {
       return ''
     }
 
     return (
       <div class={`notification`}>
-        <div class={`notification-${this.state.kind}`}>
-          {this.state.message}
+        <div class={`notification-${state.kind}`}>
+          {state.message}
         </div>
       </div>
   )}

assets/js/components/Realtime.js

@@ -12,8 +12,11 @@ class Realtime extends Component {
     this.state = {
       count: 0
     }
-    this.fetchData();
-    window.setInterval(this.fetchData, 15000);
+  }
+
+  componentDidMount() {
+      this.fetchData();
+      window.setInterval(this.fetchData, 15000);
   }
 
   @bind

assets/js/components/Table.js

@@ -15,30 +15,38 @@ class Table extends Component {
     this.state = {
       records: [],
       limit: 100,
-      loading: true
+      loading: true,
+      before: props.before,
+      after: props.after,
     }
   }
 
   componentDidMount() {
-      this.fetchRecords(this.props.period, this.state.limit)
+      this.fetchRecords()
   }
 
-  componentWillReceiveProps(newProps) {
-    if(this.props.period != newProps.period) {
-      this.fetchRecords(newProps.period, this.state.limit)
-    }
+  componentWillReceiveProps(newProps, prevState) {
+      this.setState({
+        before: newProps.before,
+        after: newProps.after,
+      });
+
+      if(newProps.before != prevState.before || newProps.after != prevState.after) {
+        this.fetchRecords();
+      }
   }
 
   @bind
-  fetchRecords(period, limit) {
+  fetchRecords() {
     this.setState({ loading: true });
-    const before = Math.round((+new Date() ) / 1000);
-    const after = before - ( period * dayInSeconds );
-
-    Client.request(`${this.props.endpoint}?before=${before}&after=${after}&limit=${limit}`)
+  
+    Client.request(`${this.props.endpoint}?before=${this.state.before}&after=${this.state.after}&limit=${this.state.limit}`)
       .then((d) => {
-        this.setState({ loading: false, records: d }
-      )})
+        this.setState({ 
+          loading: false,
+          records: d 
+        });
+      });
   }
 
   render(props, state) {

assets/js/pages/dashboard.js

@@ -15,13 +15,16 @@ class Dashboard extends Component {
 
     this.state = {
       period: (window.location.hash.substring(2) || 'week'),
+      before: 0,
+      after: 0,
     }
   }
 
   @bind
-  changePeriod(p) {
-    this.setState({ period: p })
-    window.history.replaceState(this.state, null, `#!${p}`)
+  changePeriod(s) {
+    console.log(s)
+    this.setState({ period: s.period, before: s.before, after: s.after })
+    window.history.replaceState(this.state, null, `#!${s.period}`)
   }
 
   render(props, state) {
@@ -46,14 +49,14 @@ class Dashboard extends Component {
 
         <div class="boxes">
           <div class="box box-totals animated fadeInUp delayed_03s">
-            <CountWidget title="Unique visitors" endpoint="visitors" period={state.period} />
-            <CountWidget title="Page views" endpoint="pageviews" period={state.period} />
+            <CountWidget title="Unique visitors" endpoint="visitors" before={state.before} after={state.after} />
+            <CountWidget title="Page views" endpoint="pageviews" before={state.before} after={state.after} />
             <CountWidget title="Avg time on site" endpoint="time-on-site" format="time" period={state.period} />
             <CountWidget title="Bounce rate" endpoint="bounce-rate" format="percentage" period={state.period} />
           </div>
   
-          <Table endpoint="pageviews" headers={["Top pages", "Views", "Uniques"]} period={state.period} />
-          <Table endpoint="referrers" headers={["Top referrers", "Views", "Uniques"]} period={state.period} />
+          <Table endpoint="pageviews" headers={["Top pages", "Views", "Uniques"]} before={state.before} after={state.after} />
+          <Table endpoint="referrers" headers={["Top referrers", "Views", "Uniques"]} before={state.before} after={state.after} />
 
         </div>
       </section>