quitting react router

client/dashboard/power/graph/graph.component.js

@@ -7,23 +7,28 @@ import SplineStackChart from './../../../d3/line/spline_stack';
 class GraphComponent extends React.Component {
 
   componentDidMount(){
-    var power_graph = this,
-      house = power_graph.context.house;
+    var power_graph = this;
     power_graph.graph_title = ' ';
-    if (!power_graph.context.loading_power_data) power_graph.updateGraph();
+    if (power_graph.house) power_graph.updateGraph();
+  }
+
+  get house(){
+    return this.props.location.state && this.props.location.state.house;
   }
 
   componentDidUpdate(prev_props, prev_state, prev_context){
-    var power_graph = this,
-      house = power_graph.context.house;
-    if (power_graph.context.loading_power_data) {return false;}
-    if (!prev_context.house ||
-        prev_context.loading_power_data ||
-        prev_context.house.id != power_graph.context.house.id) {
+    var power_graph = this;
+    if (power_graph.shouldUpdateGraph(prev_props)) {
       power_graph.updateGraph();
     }
   }
 
+  shouldUpdateGraph(prev_props){
+    var power_graph = this;
+    return (power_graph.house && !prev_props.location.state.house ||
+        prev_props.location.state.house.id != power_graph.props.location.state.house.id);
+  }
+
   updateGraph(){
     var power_graph = this,
       house = power_graph.context.house;
@@ -83,8 +88,6 @@ class GraphComponent extends React.Component {
 }
 
 GraphComponent.contextTypes = {
-  house: React.PropTypes.instanceOf(House),
-  loading_power_data: React.PropTypes.bool.isRequired,
   router: React.PropTypes.object.isRequired
 };
 

client/dashboard/power/power.component.js

@@ -12,36 +12,43 @@ class PowerComponent extends React.Component {
   constructor(props){
     super(props);
     var power = this;
-    power.state = {
-      loading_power_data: true };
     power.updates = 0;
   }
 
+  get house(){
+    console.log('PowerComponent#get house', this.props.location.state && this.props.location.state.house)
+    return this.props.location.state && this.props.location.state.house;
+  }
+
   componentDidMount(){
     var power = this,
-      house = power.context.house;
+      house = power.props.location.state.house;
+
+    console.log(this.updates, ') PowerComponent#componentDidMount')
+    console.log(this.house)
     power.renders = 0;
     if (!house) return false;
     power.initDateRange();
-    house.setPowerData()
-      .then(()=>{
-        power.setState({loading_power_data: false }); });
   }
 
   componentDidUpdate(prev_props, prev_state, prev_context){
+    this.updates += 1
+    console.log(this.updates, ') PowerComponent#componentDidUpdate')
+    console.log(this.house)
     var power = this,
-      house = power.context.house;
-    if (!house) return false;
-    var route_helper = new RouteHelper(house, power.props);
-    if ((!prev_context.house || prev_context.house.data.id != power.context.house.data.id) ||
-                                !house.matchesPowerRange(prev_props.location.query['dates[]'] || [])) {
-      power.setState({loading_power_data: true});
-      house.setPowerData()
-        .then(()=>{
-          power.initDateRange();
-          power.setState({loading_power_data: false}); // will update graph or table.
-        });
-    } else if (!house.matchesMonthState(prev_props.params)) power.initDateRange();
+      route_helper = new RouteHelper(power.props);
+    if (!route_helper.house) return false;
+    if (power.shouldInitDateRange(prev_props)) {
+      power.initDateRange();
+    }
+  }
+
+  shouldInitDateRange(prev_props){
+    var power = this,
+      route_helper = new RouteHelper(power.props);
+    return !prev_props.location.state.house ||
+              prev_props.location.state.house.data.id != power.context.house.data.id ||
+              !route_helper.house.matchesPowerRange(prev_props.params, prev_props.location.query['dates[]'] || []);
   }
 
   initDateRange(){
@@ -69,8 +76,7 @@ class PowerComponent extends React.Component {
         var power_range = [Math.round(min.getTime() / 1000), Math.round(max.getTime() / 1000)],
           route_helper = new RouteHelper(house, power.props, {power_range: power_range});
 
-        route_helper.updateHouseState();
-        power.context.router.push(route_helper.newRoute());
+        route_helper.updateRoute();
       }, 500);
     };
     power.date_range_slider.drawData({
@@ -95,25 +101,13 @@ class PowerComponent extends React.Component {
     }
   }
 
-  getChildContext(){
-    var layout = this;
-    return {
-      loading_power_data: layout.state.loading_power_data
-    };
-  }
-
   render() {
     var powerRt = Templates.forComponent('power');
     return powerRt.call(this);
   }
 }
 
-PowerComponent.childContextTypes = {
-  loading_power_data: React.PropTypes.bool.isRequired
-};
-
 PowerComponent.contextTypes = {
-  house: React.PropTypes.instanceOf(House),
   router: React.PropTypes.object.isRequired
 };
 

client/dashboard/power/power.rt

@@ -1,16 +1,16 @@
 <div id="power_view">
   <div class="btn-group">
     <button
-      rt-if="this.context.house"
-      rt-repeat="month in this.context.house.availableMonths()"
+      rt-if="this.house"
+      rt-repeat="month in this.house.availableMonths()"
       data-param="month"
       data-value="{month}"
       key="data-month-{month}"
       class="btn-warning btn btn-sm"
-      rt-class="{active: month === this.context.house.state.month}"
+      rt-class="{active: month === this.house.state.month}"
       onClick="{this.setParam.bind(this)}">{month}</button>
   </div>
-  <div class="alert alert-warning" rt-if="this.state.loading_power_data">
+  <div class="alert alert-warning" rt-if="this.props.location.state.loading_power_data">
     Retrieving power data...
   </div>
   <div id="power_date_setter"></div>

client/dashboard/power/table/table.component.js

@@ -12,7 +12,6 @@ class TableComponent extends React.Component {
 }
 
 TableComponent.contextTypes = {
-  house: React.PropTypes.instanceOf(House),
   router: React.PropTypes.object.isRequired
 };