From 3c823e93513b7f170951b692544fd192e3632da4 Mon Sep 17 00:00:00 2001
From: Danny <dannyvankooten@gmail.com>
Date: Wed, 9 May 2018 10:55:56 +0200
Subject: [PATCH] delay initial request until datepicker component bubbled up
 the correct period

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

diff --git a/assets/js/components/CountWidget.js b/assets/js/components/CountWidget.js
index fbee505..276ec39 100644
--- a/assets/js/components/CountWidget.js
+++ b/assets/js/components/CountWidget.js
@@ -24,10 +24,6 @@ class CountWidget extends Component {
     }
   }
 
-  componentDidMount() {
-    this.fetchData();
-  }
-
   componentWillReceiveProps(newProps, prevState) {
     if(newProps.before == prevState.before && newProps.after == prevState.after) {
       return;
diff --git a/assets/js/components/DatePicker.js b/assets/js/components/DatePicker.js
index 235b51d..21b27f5 100644
--- a/assets/js/components/DatePicker.js
+++ b/assets/js/components/DatePicker.js
@@ -31,9 +31,7 @@ class DatePicker extends Component {
       before: 0,
       after: 0,
     }
-  }
 
-  componentDidMount() {
     this.setTimeRange(this.state.period)
   }
 
diff --git a/assets/js/components/Table.js b/assets/js/components/Table.js
index 74775e4..8ce1e7d 100644
--- a/assets/js/components/Table.js
+++ b/assets/js/components/Table.js
@@ -21,10 +21,6 @@ class Table extends Component {
     }
   }
 
-  componentDidMount() {
-      this.fetchRecords()
-  }
-
   componentWillReceiveProps(newProps, prevState) {
       if(newProps.before == prevState.before && newProps.after == prevState.after) {
         return;
@@ -40,9 +36,16 @@ class Table extends Component {
   @bind
   fetchRecords() {
     this.setState({ loading: true });
+    let before = this.state.before;
+    let after = this.state.after;
   
     Client.request(`${this.props.endpoint}?before=${this.state.before}&after=${this.state.after}&limit=${this.state.limit}`)
       .then((d) => {
+         // request finished; check if timestamp range is still the one user wants to see
+        if( this.state.before != before || this.state.after != after ) {
+          return;
+        }
+
         this.setState({ 
           loading: false,
           records: d,