clean-up state & props delegation. destroy pikaday on unmount.

assets/js/components/Chart.js

@@ -82,15 +82,14 @@ class Chart extends Component {
     }
   }
 
-  componentWillReceiveProps(newProps, prevState) {
-    if(newProps.before == prevState.before && newProps.after == prevState.after) {
+  componentWillReceiveProps(newProps) {
+    if(newProps.before == this.props.before && newProps.after == this.props.after) {
       return;
     }
 
     this.fetchData(newProps.before, newProps.after);
   }
 
-
   @bind
   redrawChart() {
     var data = this.state.data;
@@ -202,9 +201,8 @@ class Chart extends Component {
         this.setState({ 
           loading: false,
           data: prepareData(after, before, d),
-        });
-
-        this.redrawChart();
+        })
+        this.redrawChart()
       })
   }
  

assets/js/components/CountWidget.js

@@ -16,8 +16,8 @@ class CountWidget extends Component {
     }
   }
 
-  componentWillReceiveProps(newProps, prevState) {
-    if(newProps.before == prevState.before && newProps.after == prevState.after) {
+  componentWillReceiveProps(newProps, newState) {
+    if(newProps.before == this.props.before && newProps.after == this.props.after) {
       return;
     }
 

assets/js/components/DatePicker.js

@@ -33,6 +33,8 @@ class DatePicker extends Component {
       period: props.value,
       before: 0,
       after: 0,
+      startDate: null,
+      endDate: null,
     }
 
     this.updateDatesFromPeriod(this.state.period)
@@ -89,17 +91,21 @@ class DatePicker extends Component {
       endDate: endDate,
       before: before, 
       after: after,
-      picking: '',
     });
 
-    this.props.onChange(this.state);
+    if(!this.timeout) {
+      this.timeout = window.setTimeout(() => {
+        this.props.onChange(this.state);
+        this.timeout = null;
+      }, 5)
+    }
   }
 
   @bind
   setPeriod(e) {
     e.preventDefault();
 
-    let newPeriod = e.target.dataset.value;
+    let newPeriod = e.target.getAttribute('data-value');
     if( newPeriod === this.state.period) {
       return;
     }

assets/js/components/Notification.js

@@ -14,7 +14,7 @@ class Notification extends Component {
     this.timeout = 0
   }
 
-  componentWillReceiveProps(newProps, prevState) {
+  componentWillReceiveProps(newProps) {
     if(newProps.message === this.state.message) {
       return;
     }

assets/js/components/Pikadayer.js

@@ -14,14 +14,17 @@ class Pikadayer extends Component {
 
   componentWillReceiveProps(newProps) {
     // make sure pikaday updates if we set a date using one of our presets
-    if(newProps.value !== this.state.value) {
-      this.state.value = newProps.value;
-      this.pikaday.setDate(newProps.value, false);
+    if(this.pikaday && newProps.value !== this.props.value) {
+      this.pikaday.setDate(newProps.value, true)
     }
   }
 
+  componentWillUnmount() {
+    this.pikaday.destroy()
+  }
+
   render(props) {
-    return <input {...props} />
+    return <input />
   }
 }
 

assets/js/components/Table.js

@@ -16,34 +16,26 @@ class Table extends Component {
       records: [],
       limit: 15,
       loading: true,
-      before: props.before,
-      after: props.after,
       total: 0,
     }
   }
 
-  componentWillReceiveProps(newProps, prevState) {
-      if(newProps.before == prevState.before && newProps.after == prevState.after) {
+  componentWillReceiveProps(newProps) {
+      if(newProps.before == this.props.before && newProps.after == this.props.after) {
         return;
       }
 
-      this.setState({
-        before: newProps.before,
-        after: newProps.after,
-      });
-      this.fetchRecords();
+      this.fetchRecords(newProps.before, newProps.after);
   }
 
   @bind
-  fetchRecords() {
+  fetchRecords(before, after) {
     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}`)
+    Client.request(`${this.props.endpoint}?before=${before}&after=${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 ) {
+        if( this.props.before != before || this.props.after != after ) {
           return;
         }
 
@@ -54,7 +46,7 @@ class Table extends Component {
       });
 
      // fetch totals too
-     Client.request(`${this.props.endpoint}/pageviews?before=${this.state.before}&after=${this.state.after}`)
+     Client.request(`${this.props.endpoint}/pageviews?before=${before}&after=${after}`)
       .then((d) => {
         this.setState({ 
           total: d

assets/js/script.js

@@ -21,9 +21,9 @@ class App extends Component {
     })
   }
 
-  render() {
+  render(props, state) {
     // logged-in
-    if( this.state.authenticated ) {
+    if( state.authenticated ) {
       return <Dashboard onLogout={this.toggleAuth} />
     }